2018.10.26 酷狗音乐校招前端一面经历(转)

酷狗一面

1. 如何实现三栏布局（左右两边固定宽度，中间自适应）？

1. 使用flex布局： 父元素设置 display: flex，左右两边设置固定宽度，中间设置 flex-grow: 1；

2. 使用浮动布局：左右两边设置固定宽度，而且分别设置 float:left和right，这个方法有一个需要注意的是在HTML中，中间栏需要和右边栏进行对调；

3. 使用绝对定位布局：左右两边设置固定宽度和 position:absolute,而且分别设置 left: 0和 right: 0，中间栏只要设置左右margin为左右栏的宽度就可以了（需要注意的是左右两边需要设置 top: 0，不然右边会被订下来）

补充

其实还有表格布局，网格布局和圣杯布局，详细请看三栏布局的5种解决方案及优缺点

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' 的过程是怎样的？

1. 30为数值类型，而'30'未字符串类型，因此等号两边的数据类型不相等，需要进行转换类型；

2. 由于一个是数值，另一个字符串，所以需要将字符串转换成数值再进行比较，即 '30' => 30;

3. 这时等号两边同样为数值型数据，即 30 == 30，所以返回 true

5. 以下代码输出的是什么？为什么呢？

1. for (var i=0; i<5; i++) {

2. setTimeout( function timer() {

3. console.log(i);

4. }, 0 );

5. }

6. 你有使用过闭包吗？

7. 模块化的异步加载怎样做？

8. window.onload执行时间？

9.图片加载完的时候会执行吗？

10. 了解JS继承吗？

11. 利用原型链的继承有什么缺点吗？

12. 知道如何修改this的指向吗？

修改this指向的办法有三种： apply、 call和 bind
apply、 call：通过传入需要指向的对象，从而改变 this的指向，指向传入的第一个参数;
bind：它会创建一个函数的实例，其this值会被绑定到传给bind()函数的值。

1. window.color = 'red';

2. var o = { color:'blue' };

3. function sayColor(){

4.    console.log(this.color);

5. }

6. var globalSaycolor = sayColor;

7. var objectSaycolor = sayColor.bind(o);

8. globalSaycolor();  // red

9. 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. 跨域有处理过吗？

我处理过的跨域有两种情况：

1. 一种是在页面中嵌入了一个iframe，因此父子iframe间产生了跨域，要解决这个问题，只需要把 document.domain设置成相同的值就可以在两个页面里进行相应的操作了；

2. 另外一种情况是用Vue开发涉及到的跨域问题，这个问题只需要修改config文件夹下的index.js中的dev:{}部分中修改proxyTable参数即可，相当于对跨域的url进行了代理，从而可以顺利访问。

另外说了一下自己比较熟悉的一种跨域解决方案：JSONP
JSONP解决跨域问题的本质其实就是 <script> 标签可以请求不同域名下的资源，即 <script> 请求不受浏览器同源策略影响。

面试官听到JSONP立刻提出了一个问题：JSONP是否可以支持 POST方法？为什么？

JSONP只支持 GET的请求方法，上面也提到了JSONP原理其实就是利用 <script> 标签发送了一个 URL给服务器，其实与 ajax XMLHttpRequest协议无关了，相当于输入了一个 url而已，所以必然只能为 GET请求方法。

16. 既然提到 POST和 GET，说说两者的区别？

1. 大小： GET提交的数据最大为2k（原则上url长度无限制，可是浏览器通常限制url长度在2k左右）； POST理论上没有限制大小（实际上IIS4中最大量为80KB，IIS5中为100KB）。

2. 发送方式： GET请求数据放在url上，即HTTP协议头中，其格式为： url?key=value&key2=value; POST把数据放在HTTP的包体中（Request Body）。

3. 安全性： GET请求可被缓存，请求保存在浏览器历史记录中； POST则不能被缓存。与 POST相比， GET的安全性较差，因为发送的数据是URL的一部分。

4. 发送TCP包：对 GET请求只产生一个TCP包，浏览器会把 http header和 data一并发送出去，服务器响应 200（返回数据）；对于 POST请求产生两个TCP数据包，浏览器先发送 http header，服务器确认权限正确响应 100(continue)返回浏览器，浏览器收到 100确认继续请求，再次发送 data，服务器响应 200（返回数据）。

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. 对毕业之后的学习规划？

END

作者：BlueYuFisher 
https://segmentfault.com/a/1190000016828125