前端面试总结

最近换工作，面试了几家大厂（阿里、网易、依图科技、美团、新H3C、丁香园、每科等），有的拿到了offer，有的则是被当作备胎，也有的没有走到终面。鄙人工作快6年，所以对标岗位都是高级或资深，现将面试总结记录如下：

一面：

主要是考察技术的广度，适当的考察知识点的深度。这一面不一定是按照简历上的技术点来发问。面试官都会由浅入深地盘问。

• 自我介绍

介绍自己的亮点（可以是大厂工作经历、工作经验、较为复杂的项目经历；清楚描述自己的工作内容，突出自己的地位；可以结合项目来聊，展示正能量）
例如：
我叫XXX，xx年毕业于xx大学，毕业之后就一直做前端开发相关工作，距今有xx年的工作经验。最近一家公司是xxx，工作角色是xxx，主要负责项目的前端技术选型、项目结构搭建、开发，项目前期也会一起参与需求评审。最近做的项目叫做xxx，前端技术栈nodejs（中间层）+vue（视图层）+webpack/gulp（项目构建和优化）。业余时间喜欢逛知乎、掘金、segmentfault等网站

• 技术问题
  • 什么是栅格？有什么用？怎么用？有没有自己设计过？
  • 只用CSS如何实现单行文本溢出效果？多行文本溢出效果呢？
  • CommonJS规范中的require和ESM规范中的import有什么区别？
  • 说说CommonJS、AMD\CMD、ESM的区别？
  • 能说说什么是MVVM吗？每个字母分别代表什么含义？自己有实现过MVVM吗？主流的MVVM框架有哪些，它们的实现原理有没有了解过？
  • 说说vue和react的区别？
  • 有没有看过vue源码？能说说双向绑定是如何实现的吗？
  • vue中watch和computed的区别是什么？computed和watch的实现原理是什么？
  • 项目中vue组件间是如何通信的？
  • 能说说vue组件的生命周期吗？
  • vue2中vdom有了解吗？有什么用？vue2中为什么要引入vdom？
  • vue2中vdom的diff算法是怎么实现的？
  • vue2中$nextTick有什么用？在什么场景下适合用到？它和setTimeout/setImediate的区别是什么？
  • 用一句话概况为什么选择vue（react）而不用react（vue）？
  • 对react是否熟悉？能说说组件有哪几种吗？为什么会有这么多种？
  • redux中的reducer有什么用？
  • 项目中有没有用到webpack？怎么用的，帮你解决了什么问题？
  • 说说你们项目中使用到的webpack的loader有哪些？为什么要用这些loader呢？
  • 说说webpack的tree-shake是什么？用于解决什么问题？
  • 说说webpack的caching机制是什么？为什么会有caching？
  • 说说webpack的runtime是什么？有什么用？
  • 有看过webpack的源代码吗？有自己写过webpack的插件吗？说说webpack的工作原理？
  • 说说webpack配置文件主要都有哪些常用配置项？每个配置项的作用是什么？
  • 说说webpack的bundle、chunk、module的区别吗？
  • 项目中是否用到gulp？能否手写一个gulp任务实现文件复制功能？
  • 前端代码有用到ES6/7/8吗？如何保证他们在IE上正常运行？
  • 是否用过babel？有什么用？如何用？babel的原理是什么？
  • 什么是CSS模块化？有什么用？如何用？
  • 现在有一段文本，需要做首行缩进效果，需要用到哪个css属性？用什么单位比较合适？
  • 段落文字之间的左右间距怎么控制？
  • margin和padding可以为负数吗？margin为负数用在什么场景下？
  • hasLayout属性有什么用？
  • position有哪些值？（考虑CSS3中新增的）
  • 什么是圣杯布局和双飞翼布局？如何实现？
  • 是否了解em/rem/px的区别？使用rem的时候有没有遇到什么坑？
  • 有没有做过移动端开发？移动端开发如何适应各种屏幕？
  • 微信小程序端有做过吗？说说微信小程序开发中有什么坑？
  • 什么是CSRF？如何防御？
  • 说说http缓存策略有哪些？如何实现协商缓存呢？
  • 是否了解http2？能简单说下它的新特性吗？
  • 如何实现util.promisify()方法？
  • 项目中有用到nodejs吗？帮你们做了哪些事情？你觉得用nodejs来做这些事情合适吗？
  • 说说对于这句代码，JS引擎做了哪些事情let obj = new Person();
  • proto和prototype的区别是什么？
  • 说说nodejs的异步IO指的是什么？什么又是事件驱动？nodejs异步队列有哪些？
  • 说说浏览器端事件循环和nodejs端事件循环的区别？
  • 说说未来的职业规划？
  • 说说你过去项目中自己觉得最亮眼的点/你做过最得意的项目是什么？

二面：

面试官会先自我介绍，然后轮到面试者自我介绍。这一轮继续考察技术的广度和深度，面试官会结合简历上写的技术点来发问。（某些厂会有笔试）

• 什么是BFC？有什么用？如何触发BFC？（相关概念：IFC、FFC、清除浮动、margin collapse）
• 说说web缓存分为哪两大类？http缓存是什么？浏览器缓存是什么？
• 使用ES6语法一行代码如何实现数组去重？
• 解释一下盒子模型宽高值得计算方式？box-sizing有什么用？
• fetch和ajax的区别是什么？fetch有什么坑吗？
• 知道margin collapse吗？如何解决？
• 块级元素和行级元素有什么区别？行级元素有哪些？行级元素能设置宽高值吗，举个例子？行级元素设置display:inline-block之后为什么宽高会起效？
• 说说JS中逗号运算符的作用？
• 浏览器中输入一个url，按下Enter键后会发生什么？（尽量说的完整）
• 说说什么是JS闭包、原型、原型链、作用域、作用域链？
• 页面DOM节点太多会出现什么问题？
• 如何获取元素到视图顶部的距离？
• getBoundingClientRect中获取的top和offsetTop中获取的top有什么区别？
• 浏览器端setTimeout有什么坑吗？
• setTimeout和requestAnimationFrame有什么区别？
• defineProperty属于ES6吗？它和Proxy有什么区别？
• 说说ES6中都有哪些新特性？
• vue中数组如何更新值？有什么性能问题吗？如何实现只更改数组中的某一项（从性能方面考虑）？
• JSONP原理是什么？CORS是怎么执行的？
• MessageChannel和postMessage各有什么用？
• setTimeout和Promise.then的执行顺序有了解吗？在浏览器环境下和nodejs环境下各是如何？
• 说说web安全性方面的认识？项目中是如何做的？
• 说说单点登录流程的实现逻辑？
• 项目开发中有没有遇到什么技术问题？说说解决的过程？
• 介绍一下自己感觉最有挑战性的项目（可以从这几个方面入手：项目性质、项目规模、项目架构、自己承担的工作、项目亮点、项目难点、性能优化）
• 你有什么要问我的？（本轮面试的表现怎么样？你们常用的技术栈是哪些？）
• 说说TCP三次握手/四次挥手的过程？为什么挥手要四次而握手只要三次？SYN攻击属于哪个阶段？
• 说说https的原理（结合传输层和应用层来谈）？为什么http性能比https好？为什么https比http安全？
• 团队管理
  • 说说你是如何管理前端团队的？
  • 如果说团队里面两个同学业务表现都得到了业务方的认可，那你还会从哪些方面去定KPI？
  • 能不能找一两个你最熟悉的项目，然后聊聊你在里面做的事情（收获）？

综面：

主要聊项目，中间也会穿插些技术问题。体现学习能力、抗压能力、敬业精神；会深挖简历中提到的每个技术点。

• 你最熟悉的项目是哪个？说说项目架构？你负责的是哪部分？有什么亮点/业绩？使用了哪些技术？为什么要用这些技术？
• 你觉得你最大的优势是什么？
• 说说未来三年的职业规划？
• 说一次失败的经历？
• 工作过程中遇到的最大挑战是什么？如何解决的？
• 为什么要离职？
• 说说你的优缺点？
• 说说你在项目中遇到的最大挑战是什么？
• 说说你的前端项目架构是怎么样的？你觉得什么地方还可以再改进？
• 你觉得要让你加入我们团队的话，你最大的优势是什么？
• 说说你是怎么带前端团队的？
• 团队中每个人的开发方式是不相同的，你们团队用了哪些方式来保证代码质量？
• 如果团队有新人进来，有什么办法可以使其在一周左右的时间开始进行业务开发？
• 团队中有没有做工程化工具方面的提炼？
• 说说你的每段工作经历以及每段经历中的收获，现在回顾这些工作经历，你觉得哪些是对你成长最有帮助的？
• 如果加入一个新团队/公司，你现在的顾虑有哪些？你准备怎么去解决/消除顾虑？

总结

• 语速可以放慢点
• 当跟别人描述工作内容或者经历的时候应该挑重点来讲（因为别人会很容易找不到重点），所谓重点：问题是什么？怎么发现？怎么解决？收获是什么？
• 平时工作中就要养成总结/复盘的习惯
• 跟面试官聊的时候可以放松些，把整个过程当成是聊天，而不是问答式的对话，这样有利于你更清楚的描述你的工作内容，也有利用别人听懂你的描述