前端面试技能点总结

最近在面试，作为一个前端菜鸟面了几家公司，面试的这段时间也学习了不少知识，算是给自己查缺补漏。下面就面试当中的一些技术点做一个回顾和整理，自己总结提高的同时供大家交流和参考。

1. vue中MVVM的实现原理

   答：由于我读过vue的源码，所以可以比较清楚的说明这其中的原理。主要是数据劫持、模板解析、依赖收集这几个过程。这道题也是被问到最多的一道题。可以参考：剖析Vue实现原理 - 如何实现双向绑定mvvm

2. Object.defineProperty方法有什么作用？有哪些参数？可以通过描述对象来设置哪些特性？

   答：这道题是上一道题的拓展。Object.defineProperty方法可以给一个对象设置相关的属性，这个方法一共有三个参数，第一个参数是目标对象，第二个参数是属性名，第三个参数可以是一个描述对象。描述对象一个有如下特性：value -- 设置属性值、configurable -- 表示是否可删除属性，能否修改属性的特性、writable -- 是否是只读属性、enumerable -- 是否是可枚举属性、get -- 读取属性时调用的函数、set -- 设置属性时调用的函数。

3. for in可以遍历原型链上的属性吗？可以遍历不可枚举属性吗？Object.keys可以遍历到不可枚举属性吗？怎么遍历到对象的不可枚举属性？

   答：这道题也是上一道题中提及的枚举特性的拓展。for in 可以遍历到原型链上的属性，但是遍历不到不可枚举属性。Object.keys不能遍历到原型链上的属性也不能遍历到不可枚举属性。可以通过Object.getOwnPropertyNames()方法访问到不可枚举属性（最后一小问没有回答出来）。

4. react中的事件跟js原生的事件有什么区别？

   答：react中的事件是合成事件，通过事件冒泡的原理绑定在根元素上。普通的事件时绑定在目标元素上。

5. 事件捕获和事件冒泡机制。

   答：在一个有层次的多个元素之间，事件会先经过捕获阶段，捕获阶段是从最顶层元素一直到目标元素。当捕获阶段结束之后事件会从目标元素向底层元素进行传递也就是冒泡阶段。具体细节可以参考《javascript 高级程序设计》的第十三章事件流。

6. 说一下对Promise的理解。Promise有哪些常用的静态方法？Promise.all()方法的作用是什么？可以传入哪些类型的参数？

   答：Promise是一个构造函数，实例化的过程中可以传入一个函数，这个函数有两个参数。在函数内部可以通过resolve、reject来修改Promise的状态，状态发生变化后会在当前事件队列的末尾去执行then或者catch里面的方法。常用的静态方法有Promise.all、Promise.race、Promise.resolve、Promise.reject等。Promise.all方法可以传入一个数组，数组中的每一项都是一个Promise实例，只有数组中所有的Promise的状态都是成功时才会去改变Promise.all方法对应的Promise状态。Promise.all方法除了可以传入数组还可以传入所有具有iterator的对象。具体可以参考阮老师的es6入门Promise。

7. 正则表达式有哪些常用的符号？略

8. 列举常用的数组方法，哪些方法会改变原数组？略

9. for of可以遍历哪些数据类型？

   答：可以遍历具有iterator接口的对象。可以参考阮老师的es6入门Iterator 和 for...of 循环

10. CSS中overflow有哪些属性值？分别是什么作用？默认值是什么？略

11. webpack中有哪些常用的loader？css-loader与style-loader的作用分别是什么？

    答：常用的有css-loader、babel-loader、vue-loader、style-loader、url-loader等。css-loader是用来解析css文件的，因为webpack会将所有的东西都当成是模块，但是没有办法去解析css文件以及分析css文件中的依赖项所以需要css-loader去进行分析。style-loader会将通过css-loader编译好的模块提取出来通过style标签的形式插入到html文件中。

12. webpack中有哪些常用的plugin？怎么做代码分割？

    答：由于我用的webpack3.x的版本，所以回答的也是该版本中一些常用的plugin。常用的有htmlWebpackPlugin、extractTextPlugin、commonChunkPlugin等。

13. 简要描述js的事件循环。

    答：可以参考事件循环

14. 简要描述浏览器的渲染原理。

    答：我就简单说了说浏览器的渲染过程和一些概念：DOM树、CSSOM树、render、paint。可以参考你真的了解回流和重绘吗?

15. 浏览器发起请求的整个过程。

    答：这是一道老生常谈的题了，从DNS解析到三次握手到发送请求报文到服务端响应，具体答案可以自行百度。

16. 常用的http请求头和响应头。与缓存相关的有哪些？http1.0与http1.1中关于缓存有些什么区别？

    答：可以参考彻底弄懂HTTP缓存机制及原理

17. 常用的http响应状态码。分别表示什么意思？ 答：2xx、3xx、4xx、5xx

18. 谈谈对websocket的理解。有哪些替代方案？

    答：我对webscoket的理解比较有限，只知道是用来做全双工通讯的，是一个持久连接。建立连接的过程其实是通过http协议进行的，连接完成之后通过upgrade字段进行了协议升级，修改为websocket协议，该协议的请求头数据量比较少。当时回答的替代方案是ajax轮询和服务端推送，具体的推送方案不清楚。后来查了一些资料做了一点了解。可以参考《图解HTTP》这本书和《JavaScript高级程序设计》的第二十一章，里面提到了comet、SSE两种方案。

19. TCP与UDP的区别。

    答：理解的不多，只知道TCP是可靠传输UDP是不可靠传输。

20. 常用的web性能优化有哪些手段？

    答：这道题我主要从http请求和页面渲染两个方面做得解答，http请求上主要是将代码分割，进行代码压缩，gZip编码，路由懒加载等一些手段来完成优化。页面渲染上主要涉及到DOM操作，减少重排、读写分离、动画上帧率跟浏览器的刷新频率保持一致。可以参考一下阮老师的博客网页性能管理详解

21. 说一下作用域链。原型链。

    答：说的主要是《JavaScript高级程序设计》这本书上的内容，说到原型链我一般会画一张原型链关系图。可以参考我写的一篇博客js总结系列（三）原型链

22. 为什么0.1 + 0.2 === 0.3是false？

    答：这道题我主要是说了一下小数在内存中的存储方案，取的是一个近似值导致的精度丢失。

23. 如何实现js的继承？你说的这些继承方式各自有什么缺点？如何实现完美继承？

    答：构造函数继承、原型链继承、组合继承、完美继承。这些都是高程中的内容，可以照搬。

24. 常用的设计模式有哪些？分别有哪些应用场景？

    答：对设计模式总结的比较少，回答的时候说到了单例模式：用来做全屏遮罩或一些模态框；观察者模式：举了vue中实现数据绑定的例子；装饰者模式：用来扩展对象；工厂模式：举了jQuery中生成jQuery对象的例子。大家可以专门做个总结。

25. 如何实现一个可以设置过期时间的localstorage存储？

    答：这题写了两三版，第一版考虑到的问题很少。在面试官的提示之下才有较高的完成度。主要是提供两个方法set和get，set的时候不仅要存储内容还需要存储过期时间，然后在get方法中判断是否已经过期。当然还有一些优化手段。

26. 为什么会有跨域问题？常用的解决方案有哪些？

    答：直接上阮老师博客浏览器同源政策及其规避方法、跨域资源共享 CORS 详解

27. 常见的一些web安全问题

    答：XSS、CSRF

28. let和var有哪些区别？略

29. new关键字有什么作用？如何实现一个new关键字的方法？略

30. 外层div中有两个子元素，如何通过flex布局实现两个子元素垂直居中，左右分别顶到两边的布局？略

31. 如何通过定位的方式实现一个不确定宽高元素的垂直水平居中？略

32. 使用过node吗？主要做什么？

    答：服务端node使用较少，主要是用来做一些打包时候的自定义功能脚本。平时做一些代理服务器啥的。后端的话主要是demo水平。

33. express和koa有什么区别？

    答：了解的不多，主要是从回调的处理和中间件的使用不同两个方面

34. 知道三次握手和四次挥手吗？ 答：略

35. 谈谈你对闭包的理解。

    答：大家还是自行百度比较好。

36. 虚拟DOM是什么？了解diff算法吗？

    答：虚拟DOM使用js对象来模拟DOM树的结构。js对象中有标签名、属性、子元素。具体细节大家自行百度吧，比我说的专业。

37. vue和react中循环生成元素时的key有什么作用？

    答：也是从diff算法的角度来说的，循环的时候key是虚拟DOM的唯一标志符，可以节约性能。

38. DNS解析过程

    答：浏览器缓存、操作系统配置文件、DNS服务器

39. window.onload和document.ready有什么区别？

    答：window.onload是页面多有的元素的已经渲染完成包括image等。document.ready是DOM元素渲染完成，一些图片请求并不一定已经完成。

40. 移动端1px问题产生的原因是什么？有什么解决方案？

    答：直接上文章移动端 1px 像素问题及解决办法

41. rem的原理？还有哪些移动端布局方案？

    答：说了一下根据屏幕宽度进行动态计算然后给html元素这是fontSize。其他的方案主要说了一下响应式、vw、vh、百分比布局等。

42. 移动端为什么click事件会延迟300ms？如何禁止屏幕的缩放？

    答：主要是iPhone为了判断用户是否发生了双击。禁止缩放通过设置视口的缩放比例。

43. PC、移动端、微信小程序开发你会分别选用什么框架？说明你的理由。

    答：我给出的答案是PC业务场景复杂的情况下选用react，因为函数编程更加灵活；移动端选用vue，一般来说移动端场景不会很复杂，vue比较轻量化；小程序选用vue，有较为完善的框架。

44. 了解SSR吗？有什么好处？

    答：没用过，大概结合了node的服务端渲染说了一下自己的理解，好处是首屏性能和SEO

45. 怎么判断一个数据的类型？

    答：Object.property.toString.call(obj)

46. 说一下vue的生命周期钩子？vue-router有哪些钩子？优先级是怎么样的？略

47. 对于秒杀类的业务怎么确保倒计时的准确性？

    答：随便想了想，我说可以在活动开始前的某个时间点发送一个请求获取服务端时间。现在想想好像也不太理想，感觉需要在初始化页面的时候服务端就返回一个相对的时间而不是绝对时间。

48. 接口返回了一个非常庞大的数据怎么渲染到页面上？

    答：面试官提到了数据层级很深，我提到了数据缓存、分页渲染、数据扁平化等一些手段。

49. 常用的异步处理方案及它们的一些优缺点。

    答：主要说了回调函数、Promise、generator、async/await

50. 原生js给一个元素绑定事件有哪些形式？有什么区别？

    答：onclick 和 addEventListener。前者只能绑定一次，多次绑定会发生覆盖，后者可以绑定多个事件处理函数，不会发生覆盖。

由于我的水平有限，以上问题的完成度并没有达到100%，以上记录了我印象比较深的一些问题，也有些由于时间间隔较长有所遗漏。后续如果新的内容会做出更新。

更多内容可以关注公众号：伟伟学python

转载于:https://juejin.im/post/5c7e7290518825470368e02e