‘壹’ 前端经典面试题(60道前端面试题包含JS、CSS、React、浏览器等)
防抖
节流
误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。
实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:
补充补充一个get和post在缓存方面的区别：
可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Mole、
vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中（建议先了解一下diff算法过程）。在交叉对比中，当新节点跟旧节点 头尾交叉对比 没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下：
创建map函数
遍历寻找
在React中， 如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state 。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。
**原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是， 有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state 。
虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。
具体实现步骤如下：
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。
结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能：displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少
联系：它们都能让元素不可见
常用的一般为三种 .clearfix , clear:both , overflow:hidden ;
比较好是 .clearfix ,伪元素万金油版本,后两者有局限性.
clear:both :若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷
overflow:hidden :这种若是用在同个容器内,可以形成 BFC 避免浮动造成的元素塌陷
概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
缺点：
block 元素特点：
1.处于常规流中时，如果 width 没有设置，会自动填充满父容器 2.可以应用 margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略 vertical-align
inline 元素特点
1.水平方向上根据 direction 依次布局
2.不会在元素前后进行换行
3.受 white-space 控制
4. margin/padding 在竖直方向上无效，水平方向上有效
5. width/height 属性对非替换行内元素无效，宽度由元素内容决定
6.非替换行内元素的行框高由 line-height 确定，替换行内元素的行框高由 height , margin , padding , border 决定 7.浮动或绝对定位时会转换为 block 8. vertical-align 属性生效
GIF :
JPEG ：
PNG ：
七种数据类型
(ES6之前)其中5种为基本类型: string , number , boolean , null , undefined ,
ES6出来的 Symbol 也是原始数据类型 ，表示独一无二的值
Object 为引用类型(范围挺大),也包括数组、函数,
输出结果是：
工厂模式
简单的工厂模式可以理解为解决多个相似的问题;
单例模式
只能被实例化(构造函数给实例添加属性与方法)一次
沙箱模式
将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值
1.字面量
2.Object构造函数创建
3.使用工厂模式创建对象
4.使用构造函数创建对象
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。
addEventListener ： addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
IE只支持事件冒泡 。
获取一个对象的原型，在chrome中可以通过__proto__的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。
那么Function.proto是什么么？也就是说Function由什么对象继承而来，我们来做如下判别。
我们发现Function的原型也是Function。
我们用图可以来明确这个关系：
这里来举个栗子，以 Object 为例，我们常用的 Object 便是一个构造函数，因此我们可以通过它构建实例。
则此时， 实例为instance , 构造函数为Object ，我们知道，构造函数拥有一个 prototype 的属性指向原型，因此原型为:
这里我们可以来看出三者的关系:
在 JS 中，继承通常指的便是 原型链继承 ，也就是通过指定原型，并可以通过原型链继承原型上的属性或者方法。
在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？
函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。
函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。
在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数 预置通用参数 ，供多次重复调用。
call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。
除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。
bind 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 bind 实现柯里化。
如何实现一个 bind 函数
对于实现以下几个函数，可以从几个方面思考
如何实现一个call函数
如何实现一个apply函数
箭头函数其实是没有 this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this 。在这个例子中，因为调用 a 符合前面代码中的第一个情况，所以 this 是 window 。并且 this 一旦绑定了上下文，就不会被任何代码改变。
关于 let 的是否存在变量提升，我们何以用下面的例子来验证：
let 变量如果不存在变量提升， console.log(name) 就会输出 ConardLi ，结果却抛出了 ReferenceError ，那么这很好的说明了， let 也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。
变量的赋值可以分为三个阶段：
关于 let 、 var 和 function ：
依次输出：undefined -> 10 -> 20
答案: D
colorChange 方法是静态的。静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。由于 freddie 是一个子级对象，函数不会传递，所以在 freddie 实例上不存在 freddie 方法：抛出 TypeError 。
1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined
undefined {n:2}
首先，a和b同时引用了{n:2}对象，接着执行到a.x = a = {n：2}语句，尽管赋值是从右到左的没错，但是.的优先级比=要高，所以这里首先执行a.x，相当于为a（或者b）所指向的{n:1}对象新增了一个属性x，即此时对象将变为{n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行a ={n:2}的时候，a的引用改变，指向了新对象{n：2},而b依然指向的是旧对象。之后执行a.x = {n：2}的时候，并不会重新解析一遍a，而是沿用最初解析a.x时候的a，也即旧对象，故此时旧对象的x的值为{n：2}，旧对象为 {n:1;x:{n：2}}，它被b引用着。后面输出a.x的时候，又要解析a了，此时的a是指向新对象的a，而这个新对象是没有x属性的，故访问时输出undefined；而访问b.x的时候，将输出旧对象的x的值，即{n:2}。
在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。 JavaScript 检查对象是否具有对内存中相同位置的引用。
我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。
这就是为什么 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。
所有对象键（不包括 Symbols ）都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么 obj.hasOwnProperty（Ƈ'） 也返回 true 。
上面的说法不适用于 Set 。在我们的 Set 中没有 “1” ： set.has（Ƈ'） 返回 false 。它有数字类型 1 ， set.has（1） 返回 true 。
这题考察的是对象的键名的转换。
catch 块接收参数 x 。当我们传递参数时，这与变量的 x 不同。这个变量 x 是属于 catch 作用域的。
之后，我们将这个块级作用域的变量设置为 1 ，并设置变量 y 的值。现在，我们打印块级作用域的变量 x ，它等于 1 。
在 catch 块之外， x 仍然是 undefined ，而 y 是 2 。当我们想在 catch 块之外的 console.log(x) 时，它返回 undefined ，而 y 返回 2 。
‘贰’ 前端常见面试题
前端开发可能问到的问题：
自我介绍（一定要对项目很熟悉）
ui-app web前端技术体系？
响应式怎么做？
render跟状态的差异
类组件的生命周期？
阻止冒泡，阻止事件默认行为
文本垂直居中。 line-height设置为元素高度。
用rece讲数组中的对象进行合并
解释localstorage sessionstorage cookie
eventbus满足event.on('eventname', callback)
display有几个值？默认值？
position有几个值？默认值？
div水平垂直居中？
position有哪些值
react相关问题（概念理解、通讯组件等）、react常用内置
React-router
html+css
页面增删改查
position的值 absolute relative fixed static
工作中是怎么联调和上线的（现场想合适的前后端联调方式，能和webpack环境切换联系起来）
antd的Form shouldUpdate增量更新方式，性能优化。
对Hooks的理解
3:操作dom点击事件向服务器上传数据，在上传未完成之前不可重复操作事件
4:日期格式化，日期不足前两位补0（2021-06-06 06:06:00）
用css写一个布局，左侧固定宽度，右侧自适应
你看
‘叁’ 大厂前端笔试面试题总结（一）
1.从下列选项中找出正确的打印值
A. 'false','true'
B. '"Lydia"','21'
C. 'true','true'
D. 'undefined','undefined'
解析：
注：const、let、var声明的变量在使用delete关键字进行删除时是无效的，且其返回值是false。
正确答案：A
2.从下列选项中找出正确的打印值
A. {admin:true,user:{name:"Lydia",age:21}}
B. {admin:true,name:"Lydia",age:21}
C. {admin:true,user:["Lydia",age:21]}
D. {admin:true}
解析：
注： ...user 使用的是ES6的扩展运算符，默认作用是将user的属性展开平铺，并且和 admin:true 组成一个新的对象。
如果 const user ={name:"Lydia",age:21,admin:false}; 和前面的属性有重名时, ... 扩展运算符会把前面的属性覆盖掉。打印结果就会为： {admin:false,name:"Lydia",age:21}
正确答案：B
3.从下列选项中找出正确的打印值
A. 10
B. 11
C. Error
D. NaN
解析：从模块导出的变量是不能被修改的，只能作为一个只读的变量进行其他文件引入使用。
正确答案：C
4.从下列选项中找出正确的打印值
A. [1,1,2,3,4]
B. [1,2,3,4]
C. {1,1,2,3,4}
D. {1,2,3,4}
解析：
注：Set具有唯一性，输出时会默认过滤掉重复项。Set是一种新的数据结构并不是数组。
数组的去重、找唯一值都可以利用Set形式
正确答案：D
5.从下列选项中找出正确的打印值
A. "Woof I am Mara" , TypeError
B. "Woof I am Mara" , "Woof I am Mara"
C. "Woof I am Mara" , undefined
D. TypeError , TypeError
解析：
正确答案：A
6.从下列选项中找出正确的打印值
A. "undefined","number"
B. "number","number"
C. "object","number"
D. "number","undefined"
解析：
正确答案：A
7.从下列选项中找出正确的打印值
A. Lamborghini
B. "Maserati"
C. ReferenceError
D. TypeError
解析：
正确答案：B
8.从下列选项中找出正确的打印值
A. "It worked! Hello world!"
B. "Oh no an error: undefined"
C. SyntaxError: can only throw error objects
D. "Oh no an Error: Hello world!"
解析：
正确答案：D
A. []
B. [null,null,null]
C. [undefined, undefined,undefined]
D. [3 × empty]
解析：
正确答案：C
10.从下列选项中找出正确的打印值
A. 42
B. "42"
C. 7
D. NaN
解析：
parseInt(string, radix)函数解析字符串并返回整数。
‘肆’ Web前端岗位面试题有哪些
前端面试题汇总，基本上会有四大类问题，具体如下：
一、HTML
1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
2、HTML5 为什么只需要写 <!DOCTYPE HTML>？
3、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
4、页面导入样式时，使用link和@import有什么区别？
5、介绍一下你对浏览器内核的理解？
6、常见的浏览器内核有哪些？
7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
8、简述一下你对HTML语义化的理解？
9、HTML5的离线储存怎么使用，工作原理能不能解释一下？
10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
11、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
12、iframe有那些缺点？
13、Label的作用是什么？是怎么用的？（加 for 或 包裹）
14、HTML5的form如何关闭自动完成功能？
15、如何实现浏览器内多个标签页之间的通信? (阿里)
16、webSocket如何兼容低浏览器？(阿里)
17、页面可见性（Page Visibility）API 可以有哪些用途？
18、如何在页面上实现一个圆形的可点击区域？
19、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、网页验证码是干嘛的，是为了解决什么安全问题？
21、tite与h1的区别、b与strong的区别、i与em的区别？
二、css
1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
2、CSS选择符有哪些？哪些属性可以继承？
3、CSS优先级算法如何计算？
4、CSS3新增伪类有那些？
5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
6、display有哪些值？说明他们的作用。
7、position的值relative和absolute定位原点是？
8、CSS3有哪些新特性？
9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
11、一个满屏 品 字布局 如何设计?
三、常见兼容性问题？
1、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
2、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
3、为什么要初始化CSS样式。
4、absolute的containing block计算方式跟正常流有什么不同？
5、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
7、对BFC规范(块级格式化上下文：block formatting context)的理解？
8、CSS权重优先级是如何计算的？
9、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
10、移动端的布局用过媒体查询吗？
11、使用 CSS 预处理器吗？喜欢那个？
12、CSS优化、提高性能的方法有哪些？
13、浏览器是怎样解析CSS选择器的？
14、在网页中的应该使用奇数还是偶数的字体？为什么呢？
15、margin和padding分别适合什么场景使用？
16、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
17、元素竖向的百分比设定是相对于容器的高度吗？
18、全屏滚动的原理是什么？用到了CSS的那些属性？
19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
20、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
21、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
22、如何修改chrome记住密码后自动填充表单的黄色背景 ？
23、你对line-height是如何理解的？
24、设置元素浮动后，该元素的display值是多少？（自动变成display:block）
25、怎么让Chrome支持小于12px 的文字？
26、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）
27、font-style属性可以让它赋值为“oblique” oblique是什么意思？
28、position:fixed;在android下无效怎么处理？
29、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
30、display:inline-block 什么时候会显示间隙？(携程)
31、overflow: scroll时不能平滑滚动的问题怎么处理？
32、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
33、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
34、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
35、style标签写在body后与body前有什么区别？
四、JavaScript
1、介绍JavaScript的基本数据类型。
2、说说写JavaScript的基本规范？
3、JavaScript原型，原型链 ? 有什么特点？
4、JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？
5、Javascript如何实现继承？
6、Javascript创建对象的几种方式？
7、Javascript作用链域?
8、谈谈This对象的理解。
9、eval是做什么的？
10、什么是window对象? 什么是document对象?
11、null，undefined的区别？
12、写一个通用的事件侦听器函数(机试题)。
13、[“1”, “2”, “3”].map(parseInt) 答案是多少？
14、关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
15、什么是闭包（closure），为什么要用它？
16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
17、如何判断一个对象是否属于某个类？
18、new操作符具体干了什么呢?
19、用原生JavaScript的实现过什么功能吗？
20、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
21、对JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗？
23、js延迟加载的方式有哪些？
24、Ajax 是什么? 如何创建一个Ajax？
25、同步和异步的区别?
26、如何解决跨域问题?
27、页面编码和被请求的资源编码如果不一致如何处理？
28、模块化开发怎么做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common MoleDefinition）规范区别？
30、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）
31、让你自己设计实现一个requireJS，你会怎么做？
32、谈一谈你对ECMAScript6的了解？
33、ECMAScript6 怎么写class么，为什么会出现class这种东西?
34、异步加载的方式有哪些？
35、documen.write和 innerHTML的区别?
36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
37、.call() 和 .apply() 的含义和区别？
38、数组和对象有哪些原生方法，列举一下？
39、JS 怎么实现一个类。怎么实例化这个类
40、JavaScript中的作用域与变量声明提升？
41、如何编写高性能的Javascript？
42、那些操作会造成内存泄漏？
43、JQuery的源码看过吗？能不能简单概况一下它的实现原理？
44、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
45、jquery中如何将数组转化为json字符串，然后再转化回来？
46、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
47、jquery.extend 与 jquery.fn.extend的区别？
48、jQuery 的队列是如何实现的？队列可以用在哪些地方？
49、谈一下Jquery中的bind(),live(),delegate(),on()的区别？
50、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
51、是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
52、jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
53、针对 jQuery性能的优化方法？
54、Jquery与jQuery UI有啥区别？
55、JQuery的源码看过吗？能不能简单说一下它的实现原理？
56、jquery 中如何将数组转化为json字符串，然后再转化回来？
57、jQuery和Zepto的区别？各自的使用场景？
58、针对 jQuery 的优化方法？
59、Zepto的点透问题如何解决？
60、jQueryUI如何自定义组件?
61、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
62、如何判断当前脚本运行在浏览器还是node环境中？（阿里）
63、移动端最小触控区域是多大？
64、jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？
66、移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
69、解释JavaScript中的作用域与变量声明提升？
70、那些操作会造成内存泄漏？
71、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
72、Node.js的适用场景？
(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解释一下 Backbone 的 MVC 实现方式？
74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
78、简述一下 Handlebars 的基本用法？
79、简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
80、用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
检测浏览器版本版本有哪些方式？
81、我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
‘伍’ 前端hr面试常问的问题
面试其实就是一个不断选择与被选择的过程(不知道说的对不对)。不同公司的面试方式都有所不同，大多数人都有过多次面试的经历，前端面试也不外乎那么一些啦(好像有些废话的感觉)。
面试之前的小故事
HR会打电话过来我是××公司的，在××上看到你投到我们公司的简历，问你何时候有空约一个呗，然后说就星期*吧，既然都打电话请我面试了，好吧，那就约一个!
然后有些人会精心准备，不停刷面试题，整夜整夜的看着HTML/JS/CSS知识点，还有那些最新的、时髦的技术，看看到时候能不能唬住面试官;而有些人对自己胸有成竹，哥那么多年的前端经验了，啥项目没有经历过，不就一个面试，怕啥呢。
很快或者很慢的来到那天。你打扮的清清爽爽漂漂亮亮的，打扮的好会有加分不，没错，第一印象也是挺重要的。途中有些人可能会还一直想着面试官会问啥题目呢，那啥**属性是什么来着呢，再次拿出手机默默的看起资料;有些人可能就会想着公司不知道妹子多不多漂亮不呢，环境和福利不知道咋样，最好别碰到傻逼一样的面试官哎，不然这以后咋相处好呢。
来到公司，大小公司大家都见多了嘛，也是得看发展是吧，我们也不是肤浅的人，见到前台妹妹，哟，还不错哦。领你进会议室里，让你稍等一下，她去通知面试官，过了一会儿，不是面试官进来，那就是前台妹妹给您送来一杯水。面试官踱步向前，咦~，我是继续坐着呢，还是站着呢，还是站起来显礼貌一些嗯。
给面试的一般会是Team Leader或者非常资深的工程师。首先会让你自我介绍下，然后巴拉巴拉介绍自己，途中或者聊到面试官喜欢的`部分那就会中断问几个问题吧，介绍完自己，就进入正式的战斗了吧，一般会有2-3轮的回合。遇知战斗详情，请听下回分解。
哈哈， 开玩笑。以上瞎编胡造，如有雷同，纯属巧合。
这里就只谈谈前端技术的战斗回合吧，写的不好，请多见谅。
普通型
面试中问题会比较的零碎，html/js/css肯定都会有涉及。知识点不会有太大的规律，可能几个公司面试下来你遇到的问题一个都不带重复的。哎，前端的知识点就是乍一看深似海，仔细一看深似黑洞啊。问题好的话，一方面考察了面试人对前端接触的广度，深度的话也可以从中接触到一些。因为面试的时间有限，其实也非常考验面试官对一个人的洞察能力。
一般如果不是应届生的话，也就是会跟你交流你之前的项目，你担当的角色，你遇到的难题，怎么解决问题，用的框架，与其他工程师的交流沟通协作等等。 这些其实你心里肯定是有答案的(可能也有懵逼的)，就看你的表达，能不能对上面试官的胃口。
进阶型
除了基本的问题，面试中会有一些明显设计过的题目。针对某几个知识点，或让你手写代码，或让你提供算法或思路。如果之前没有遇到过这类问题的话其实一下子真的挺难回答，或者直接懵逼了，或者回答不出面试官满意的答案。这其实对工程师的要求也是比较的高，不能只是单纯的切切页面，用用插件，需要对某一类问题或者模式或者算法有深入的了解，对问题的解决思路有很好的把握。
算法可能不是前端工程师的长项，但作为优秀的工程师，对算法的了解应该会只深不浅。
这种面试的题目既提现了公司对面试者的要求，也相对而言的会有所体现公司的水平。
出题型
题目比较的综合，会通过邮件发给你，或者有专门的页面提供，在面试之前让你2-3天的时间做完。题目可能是很有名的某一类交互，或游戏，或页面，或公司自己出的一类小东西。
因为非当场面试，所有有比较充足的时间来思考，来写一些代码。一般都会完成，所以其实比较的关注点就是对代码的质量，通过代码来考察面试者的思路以及代码**惯等等。
其未知性也比较多，可能因为有些东西可能没法通过代码来传递，沟通，其他的思路，或者题目的缺陷等等。所以这只是面试途中的一个小部分，大多数人其实都会能做的很好。
直接上机型
还有的就会直接给你某一个交互，或者一张静态页面，或者一个布局等等，直接给你台电脑让你当场写出来。写完之后再有所交流，说说自己的想法或者接着谈其他的。
当你写代码时候，其实暴露的东西也挺多的。你写的**惯，思路清晰不清晰，对代码的熟悉程度，可能你平时都是ctrl C + V的，这时候你咋办呢。
这个可能遇到的比较少，但也会是有的。
结束语
许多面试可能都会结合以上的几种类型，多方面的考察面试者，其实，大家都懂的。
‘陆’ 前端面试题目汇总（一年经验）
部分题目 有些面试完忘记了，面试真的不能安排太紧凑啊，脑子完全不够用，血的教训😂
寒冬期前端准备总结---JS篇
寒冬期前端准备总结---浏览器篇
寒冬期前端准备总结---服务器和网络篇
寒冬期前端准备总结---CSS篇
寒冬期前端准备总结---框架篇
寒冬期前端准备总结---算法篇
（当时一个下午现场面试两家，累趴了，这家面的很差）
‘柒’ 前端工程师面试题vue2知识整理
⾸先呢,所谓的插槽就是⼀个占位符,将⾃定义组件的内容展示出来.我们知道⾃定义的组件⾥⾯如果写内容的话,⻚⾯是不会显
示出来的,如果我们想让⾃定义组件⾥⾯的内容显示出来,我们就需要使⽤ slot 的插槽.
⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽. 我们⽤的⽐较多的具名插槽和匿名插槽,具名插槽需要所有 slot 标签上指定
name 属性,⽽在对应标签上添加# 属性指定名字.
在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽,以上就是我对插槽的理解.
作用域插槽
是把子组件里的数据传到父组件的插槽里使用
什么是跨域
跨域是浏览器的跨域 不符合 域名 协议 端口号一样（同源策略） 的请求都会出现跨域的问题
跨域的解决方法
最多的情况是后端处理跨域
前端的跨域
服务器代理
jsonp
vue 中是 proxy 代理实现跨域
vue 的跨域
用 proxy 实现
拦截器有两种 一个是请求拦截一个是响应拦截
拦截器不需要手动调用而是每次发送 http 请求的时候都会自动触发
我们一般在请求拦截中 放全局的 loading 和 token
在响应拦截中关闭全局的 loading 和对 token 进行过期处理 还可以处理错误编码字典
⾸先呢 jquery 他是⽤ js 封装的⼀个类库,主要是为了⽅便操作 dom 元素,⽽ vue 他是⼀个框架,并且呢,他会从真实 dom 构建出⼀个
虚拟的 dom 树,通过 di!算法渲染只发⽣改变的 dom 元素,其他的相同的 dom 元素不⽤在重新渲染. ⽽使⽤ jquery 去改变 dom 元素
的时候,即使有相同的 dom 元素也会重新渲染, jq 重点操作 dom，而 vue 重点操作数据。以上就是我对 vue 和 jquery 区别的理解.
在 vue2 中 vue 实例的 data 数据是响应式 的 就是数据变了 视图也会跟着变，如果给某一个 data 新添加了一个字段 这个新添加的字段因为 js 的限制不响应，需要使用 this.$set 方法代替原本的普通添加方法 就能实现响应，这个方法的三个参数 是给谁添加 添加的字段 初始值 如果不是在组件中 用这个方法 那么就用 Vue.set
根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
如果不是一个函数，每个组件实例的data都是同一个引用数据，当该组件作为公共组件共享使用，一个地方的data更改，所有的data一起改变，如果data是一个函数，每个实例的data都在闭包中，就不会各自影响了。
query可以使用name和path而params只能使用name
使用params传参刷新后不会保存，而query传参刷新后可以保存
Params在地址栏中不会显示，query会显示
Params可以和动态路由一起使用，query不可以
同步更改mutations
异部更改action,action中通过commit触发mutations进行state数据更改
页面中触发action中函数
‘捌’ hr如何面试web前端工程师，该问哪些技术问题
hr如何面试web前端工程师，该问哪些技术问题
一、基本知识
我们生活在网际网路时代，你想知道的任何事情几乎都能在15分钟内找到相关资讯。可是，能找到资讯并不等于你会使用它。我认为所有前端工程师至少都应 该掌握某些基本的知识，才能有效地完成自己的工作。如果一遇到问题，就停下工作上网四处搜寻解决方案，怎么可能保证按期完成工作呢？听听，还有谁在说“我 不知道，但我可以上网搜到。”请这些同学把手举起来，让大家认识一下（immediately raises a flag for me.）。下面我列出一些基本的知识点，这些都是我认为一名前端工程师（无论工作年头长短）在没有任何外来帮助的情况应该知道的。
[list][*]
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
[*]
DOM操作——怎样新增、移除、移动、复制、建立和查询节点。
[*]
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
[*]
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
[*]
严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
[*]
盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。
[*]
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
[*]
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
[*]
HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
[*]
JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
[/list]
重申一下，上述这些知识点都应该是你应该“想都不用想”的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到，但我觉得你至少应该掌握这些，才有可能跟我坐到一间办公室里来。
二、少量提问
我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平，也很无聊。我在任何一次面试中，通常只问三个大问题，但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤，这样我就可以在每个步骤中穿插着问一些小问题。比如说：
这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式，或者 让你在页面中显示其他资讯，就可以把更多的知识点包括进来。对于经验比较丰富应聘者，我也可以自如地扩充套件要考察的知识范围，最简单像JOSN与XML的区 别、安全问题、容量问题，等等。
我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的程式码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把 关于库的知识作为评判能力的因素，因为库是会随时间变化的。我需要的是真正理解库背后的机制，特别是能够徒手写出一个自己的库的人。
三、解决问题
做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘 者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到 两个目的。
首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都 明白。可是，只要一跟这些人谈到怎么查询方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够 好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。
其次，可以测试出他们已经掌握的（还是那句话，“想都不用想”）浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。
对一名前端工程师来说，这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题（说你啦，IE6），应该说是一件很平常的事。一个方案无效就无计可施的人，做不了前端工程师。
考核应聘者解决问题能力的另一层原因，与我的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后，我就会想着问一个他们知识领域之外的问题。这样 做的目的，就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步，我也准备了一些提示，以防有人会卡壳打艮（在我面前15分钟一言不发，对我 评价这个人毫无帮助）。我真正感兴趣的，是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。
注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像（或者让刘翔跟博尔特同场竞技），没有意义，也得不到任何有价值的资讯。
HR一般不会面试太深的问题，主要是了解一下你之前的工作经历，更多的是你自己描述，中间可能会问一些初级的问题，比如，你为什么从上一家单位离职等类似问题。
一道web前端工程师面试题，求解答。
这样的布局用绝对定位实现最合适，ABC的外层用相对定位，里边各列用绝对定位就可以。至于CBA且B宽度自适应，还是用绝对定位，但只定位C,A分部到两侧，中间的列margin设成左右列的宽度就可以。
web前端工程师如何才能硬气的跳槽？
web前端开发工程师想要硬气的跳槽，起码应该达到以下几点：
1.掌握扎实的技术基础，
需要掌握技术包括：HTML、CSS、JavaScript;
HTML是Web程式设计的基础，HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页档案本身是一种文字档案，通过在文字档案中新增标记符，可以告诉浏览器如何显示其中的内容。
维护大型的CSS程式码库并非易事，特别是那些随意散漫未经组织的CSS程式码极易变成一团乱麻，所以，应该掌握CSS命名规范，来帮助开发者编写优质的程式码。
2.深入理解前端工程化和元件开发;
需要熟悉web前端框架—— React、Vue.js等，
React为我们提供了直接易用的，以状态为核心的前端应用开发方式，前端工程师应该会分析React内部工作原理，讨论React中简单元件、类元件等渲染流程。
Vue.js单元测试是应用开发中不可或缺的部分，日常开发中会用到的Vue.js单元测试的例子，所以应该掌握。
3.熟练掌握Web开发相关知识
至少熟悉一门后端语言，例如Node.js、Java、Go等;
Node.js内部原理视非常重要的，应该明白Node.js的主程序是如何启动的、如何载入内建模组、os包如何实现等等。
4.对技术有热情，有一定前端架构能力或者技术深度;具备团队合作意识强，能够多团队协作开发;具备企业级大型前端应用开发经验更佳。
如何识别一个人是web前端工程师
前端工程师需要懂得设计类程式码和js，有需要了解一些后台语言，例如PHP等。
如何实现成为web前端工程师的梦想
1.入门阶段：能够解决一些问题的水平。有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript程式设计能力)，能够完成一些简单的Web前端研发需求。
2.进阶阶段：将JavaScript、HTML、CSS之类的编码帮助手册里的每个方法/属性都通读几遍!只有将基础打好，以后的路才能走的顺畅。
3.入室：最强程式码，知道所有能够解决需求的各种方案，能够选择使用最优秀的方案满足需求。这个级别基本上产品开发程式设计中的程式码主力。程式设计师应该能够肯定的回答：对于这个需求而言，我的程式码就是最优秀的程式码。
4.注重细节，注意那些当前需求里没有明文给出的细节：程式码效能的差异、执行平台(浏览器)的差异、需求的隐性扩充套件、程式码的向后相容等等。
如何了解web前端工程师和UI设计师
web前端工程师是不参与任何的设计，直接将网站美工制作的网站效果图使用ps按照效果图进行切片并使用、css、js等程式码进行网页的制作，最终编写出符合w3c标准的相容各个主流浏览器的静态页面，同时还需要按照后台开发人员的要求留下一些后台资料的接口。所以说网站前端工程师更多的是程式设计而不是设计。
UI设计师一般是学美术或者设计出身，精通photoshop、AI、AE等平面设计工具，其在网站开发过程的中的职责就是按照客户或者公司的需求设计出符合客户需求和接口或者颜色符合大众视觉的网站效果，如根据不同行业的需求设计颜色、设计接口风格等，其工作的最后成果就是网站的效果图。
web前端工程师进阶学习路线如何走
less和sass什么时候学都行，1,2天就能学会。这个不着急，没有什么承上启下的作用，可以单独拿出来学。
bootstrap就是一个框架，把最主要的栅格系统看看就好。其他的大概了解能干啥就行，很多公司，是不让用bootstrap的，而是用原始码自己写。这个用一天的时间没啥问题。
node.js和angular比较重要，如果学会，算是上了一个台阶了。所以重点说说这个。
angular属于mvvm框架，一开始觉得angular挺复杂的，所以想学一个简单的，轻量级的，所以决定先学vue。但是在了解的过程中发现，很多的专业名词，没听过，或者理解不透。所以又开始从头学习node.js。在学习node.js的过程中又开始迷茫，发现了很多JS不懂的地方。
所以，又开始深入研究js的dom，函式，ajax，阵列等。总之用了很长的时间，浪费了很长时间。
最后总结一下啊。其实，没必要钻那么多牛角尖。
先做着vue的例子，不懂的地方，直接略过，很多时候，不理解的不懂的东西，用着用着，突然就能明白。照猫画虎先把VUE的例子跟着做一遍之后，同时梳理一下涉及到的JS知识点。能自己用vue做出几个小成品的时候，开始结合js研究node.js。之后再去涉及angular。
angular差不多有个大概了解的时候，反过头接着学vue，你会发现，又会发现很多新东西。
web前端这个东西特别有意思，当你达到一个高度，返回来再看以前的技术，会发现，哎呀，竟然又能发现新大陆。
厦门web前端工程师培训哪家好
培训学校很多，没有具体的衡量标准的。但是可以从几方面去选择：
1 有很多优秀导师的
2 培养出很多优秀学员的
3 只做培训的，没有做其他的
4 做的比较久的。
北京WEB前端工程师培训哪个好
建议找全程面授课程的地方学习，课程体系很重要，现在企业在用人方面讲究全栈的前端工程师人才，所在在课程选择上要慎重，学习内容要基于HTML5，要包含pc端+移动端+后端。这要才能学的系统，就业上才会有所保障。