共计 3251 个字符，预计需要花费 9 分钟才能阅读完成。
酷狗一面
1. 如何实现三栏布局（左右两边固定宽度，中间自适应）？
使用 flex 布局：父元素设置 display: flex，左右两边设置固定宽度，中间设置 flex-grow: 1
2. 如何实现弹窗水平垂直居中？
3. == 和 === 的区别
=== 为恒等符：当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回 true，若等号两边的值类型不同时直接返回 false。== 为等值符：当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较。a、如果一个是 null、一个是 undefined，那么 [相等]。b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的 toString 或者 valueOf 方法。js 核心内置类，会尝试 valueOf 先于 toString；例外的是 Date，Date 利用的是 toString 转换。非 js 核心的对象，令说（比较麻 烦，我也不大懂）e、任何其他组合，都 [不相等]。
4. 30 == ’30’ 的过程是怎样的？
30 为数值类型，而 ’30’ 未字符串类型，因此等号两边的数据类型不相等，需要进行转换类型；
由于一个是数值，另一个字符串，所以需要将字符串转换成数值再进行比较，即 ’30’ => 30;
这时等号两边同样为数值型数据，即 30 == 30，所以返回 true
5. 以下代码输出的是什么？为什么呢？
for (var i=0; i<5; i++) {
setTimeout(function timer() {
console.log(i);
}, 0 );
}
6. 你有使用过闭包吗？
7. 模块化的异步加载怎样做？
8. window.onload 执行时间？
9. 图片加载完的时候会执行吗？
10. 了解 JS 继承吗？
11. 利用原型链的继承有什么缺点吗？
12. 知道如何修改 this 的指向吗？
修改 this 指向的办法有三种：apply、call 和 bindapply、call：通过传入需要指向的对象，从而改变 this 的指向，指向传入的第一个参数;bind：它会创建一个函数的实例，其 this 值会被绑定到传给 bind() 函数的值。
window.color = ‘red’;
var o = {color:’blue’};
function sayColor(){
console.log(this.color);
}
var globalSaycolor = sayColor;
var objectSaycolor = sayColor.bind(o);
globalSaycolor(); // red
objectSaycolor(); // blue
补充
其实还有一种：new 关键字改变 this 指向因为在 new 的过程中，其中有一个步骤为将构造函数内部的 this 指向实例对象，所以通过 new 关键字也可以改变 this 的指向。
13. apply 和 call 的区别？
相同点：可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。不同点：实际上，apply 和 call 的功能是一样的，只是传入的参数列表形式不同。apply：最多只能有两个参数——新 this 对象和一个数组 argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果 argArray 不是一个有效的数组或 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj，并且无法被传递任何参数。
call：它可以接受多个参数，第一个参数与 apply 一样，后面则是一串参数列表。这个方法主要用在 js 对象各方法相互调用的时候，使当前 this 实例指针保持一致，或者在特殊情况下需要改变 this 指针。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
14. 有一个按钮是异步生成的，怎样对它进行事件绑定？
由于按钮是异步生成的，所以我选择将事件绑定在按钮生成的父元素上，通过事件委托的机制，利用事件冒泡，把事件绑定在父元素上，可以通过判断 event.target 按钮是否已经生成，从而实现相应的事件。科普补充：事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到 document 对象；事件捕获则跟事件冒泡相反，事件会从 document 对象开始发生，直到最具体的元素；
15. 跨域有处理过吗？
我处理过的跨域有两种情况：
一种是在页面中嵌入了一个 iframe，因此父子 iframe 间产生了跨域，要解决这个问题，只需要把 document.domain 设置成相同的值就可以在两个页面里进行相应的操作了；
另外一种情况是用 Vue 开发涉及到的跨域问题，这个问题只需要修改 config 文件夹下的 index.js 中的 dev:{} 部分中修改 proxyTable 参数即可，相当于对跨域的 url 进行了代理，从而可以顺利访问。
另外说了一下自己比较熟悉的一种跨域解决方案：JSONPJSONP 解决跨域问题的本质其实就是 <script> 标签可以请求不同域名下的资源，即 <script> 请求不受浏览器同源策略影响。
面试官听到 JSONP 立刻提出了一个问题：JSONP 是否可以支持 POST 方法？为什么？
JSONP 只支持 GET 的请求方法，上面也提到了 JSONP 原理其实就是利用 <script> 标签发送了一个 URL 给服务器，其实与 ajax XmlHttpRequest 协议无关了，相当于输入了一个 url 而已，所以必然只能为 GET 请求方法。
16. POST 和 GET 的区别？
17. 浏览器缓存的方式？
18. 看你有用过 Promise，知道 Promise 有几种状态？
19. 你知道 pending 状态可以停止吗？
20. 那 XMLHttpRequest 的 pending 状态可以停止吗？
21. 知道 Promise 和 setTimeout 的执行顺序吗？
22. vue 中生命周期中的钩子函数用过哪些？
23. 为什么不把数据放在 created 函数中？
24. 对 Vue 的数据双向绑定有了解吗？
25. 了解重绘和回流吗？页面的加载顺序？
26. 如何减少回流、重绘？怎样控制只有一部分回流？
27. 了解什么算法？快排？
28. 还了解什么排序算法？
29. 了解二叉查找树吗？
30. 有了解什么后端语言吗？知道面向对象的特性吗？
31. 知道数据库连接池吗？
32. 未来前端的规划？
酷狗二面
在面完第一面之后，本来以为终于结束了，没想到迎来的是第二技术面，后面面试官介绍说其实本来是应该两个人同时面我的，因为有一个面试官没空，所以就错开了，就有了 ” 二面 ” 了，其实本质上还是一面而已。
1. 自我介绍
2. 问了一下笔试的时候不应该错的题
3. 理解的 HTTP 状态码有哪些？
4. 正则的题目，对比 /^[a-z0-9][a-z]+$/ 和 /^[a-z0-9][a-z]*$/ 的区别？
5. display:none 和 visibility:hidden 的区别？
6. CSS 选择器的理解，你知道多少选择器？
7. CSS3 布局，移动端有用过 rem 吗？布局的话一般怎样布局？
8. Flex 布局和传统的其他布局有什么优点？
9. Flex 的居中方式有哪些？其他方式有哪些？
10. display 设置 inline-block 的话，多个之间有间隔应该怎样处理？(父节点 font-size: 0)
11. 更熟悉那方面的技术栈？
12. 对自己项目是怎样设计和选型的？
13. 有用到 vuex 吗？
14. 组件之间的通讯怎样做到？
15. 真的学习前端是什么时候开始？
16. 方向是选择全栈还是只做前端？
17. 有没有在 nodeJS 上做过什么？
18. 有没有在 npm 上面做过开源的学习？
19. 对毕业之后的学习规划？
