前端面试技能点总结

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

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