2016 秋招百度、搜狐、去哪儿、网易面经

前言：

2016年8月31日从网易离职，转正答辩没通过，结束了第一份正式的实习工作，准备回校参加秋招。

由于8月在准备转正答辩，很多互联网公司的内推就错过了（后来也有人总结：真正的秋招是内推，很多公司内推招的差不多了，秋招很少招甚至不招了）。

离职后共投了30多家公司，基本上有名字的公司都投了一圈，后来感觉并不可取，心态有点浮躁，害怕没着落，就海投，导致每天都在投简历，没有时间准备笔试面试。想起春招的时候虽然身边招聘信息少，只投了BAT和网易，还有几家深圳的小公司，但是收到网易的面试通知后就集中精力准备网易面试，还是可以保证很好的面试状态的。

秋招时第一个收到面试通知的是百度，要去成都参加面试，第一场很仓促，没有什么准备，自我感觉虽然进了二轮，但是回答错了很多，犯了很多低级错误。我觉得面试问的一些基础问题，在平时的开发里遇到的比较少，印象不深刻，在参加面试之前翻翻书，明确一下概念，效果要好很多。

项目经历很多都提到了我在网易做的“财富锦囊”新闻列表页，在此感谢实习时的导师武浩威和张浩~

从9月19号到23号，在成都5天一共参加10场面试。其中21号一天面了5场，收获了两个offer，分别是搜狐和去哪儿，还是很幸运的，在此记录一下。

去哪儿前端面经

时间：2016年9月21日

地点：成都市高新西区西源大道 锦熙印象酒店

一轮：

• 自我介绍。
• “财富锦囊”页面介绍，由这个项目介绍慢慢引出了前端性能优化的一些方式。
• 做这个页面遇到了哪些bug？分别怎么解决的？(面试官提到了滑动牵扯到原生webview的跟随滑动而无法滚动文章列表的bug，我在项目里是协商调用原生接口，禁止原生webview跟随滑动)
• 为什么页面从最左侧向右滑不能退出？
• flexible做移动适配会有什么问题？分别怎么解决的？(从1px边框的0.5处理、小数产生的像素碾压、高宽比、横屏的列表列数响应式设计等角度)
• tab标签切换的动画算法。
• panel下方文章列表支持左右滑动切换的滑动算法。(实际上这个滑动只需触发两个事件，分别是我们自己扩展的跟随滑动事件<获取tap与touchmove计算差值，从而移动panel>，和松开手后滑动到哪一页的事件<判断水平滑动距离是否超过设备宽度的50%>)
• 移动端click事件的300ms延迟产生原因与解决方案(用touchdown模拟)。

• 手写下面两个需求：

  • 1.不使用jquery mobile的tap事件，用touch相关事件实现判断手触摸屏幕是发生了手指点击还是手指向上下左右四个方向发生滑动。(用touchdown、touchmove、touchup事件，根据event.clientX/Y等信息计算100ms内手指移动的距离是否超过自己预设的一个距离，根据勾股定理判断是否超过，如果超过距离则根据偏移的坐标信息判断手指滑动方向)
  • 2.不使用jquery mobile的tap事件，用touch相关事件实现判断：手指垂直方向滑动文章列表，松开手的时候是否应该继续滑动一段距离，或者立即停止滚动？(这里我想实现一个加速度的曲线，如果滑动松开手时候判断加速度的正负性，为正则继续滑动，为负则立即停止)。
• 事件委托原理，有哪些好处。
• HTTP Request都包含什么信息。
• POST/GET有什么区别，JSONP如何实现跨域。
• 作用域链，闭包的理解。
• 如何实现继承。
• 对新技术的了解(es6了解，Node/Express了解，React与React Native，Hybird开发的了解)。
• 用过哪些后端语言(自己写过Node demo，项目里用Node，以前培训过J2EE，如果有需要可以捡起来)。

二轮：

• 前端性能优化(从DOM操作、网络请求、资源文件加载三方面介绍)
• DOM操作里表格布局table为什么比div模拟表格更难以查询？
• DOM操作如何优化(编码遵循NEC规范，结构简洁利于查询，减少页面重排重绘)
• 哪些操作会触发重排，哪些操作会触发重绘？更改文本的color会触发重排还是重绘？
• 如何避免页面的重排重绘？
• H5页面的移动适配怎么做的？(我用的flexible)
• 分析flexible的原理，flexible有哪些很大的问题？(面试官提醒，缩放后的页面很难做响应式，flexible是很糟糕的解决方案)
• flexible的适用场景有哪些？
• 雪碧图如何在移动端适配？(这里面试官问雪碧图在不同dpr下的适配方式，我说在scss文件里css3可以获取dpr从而修改路径，面试官问background-position属性是不是要修改，后来经过面试官引导，主动想出了先根据dpr按比例缩放背景图，background-position不用修改)
• 对响应式WEB设计的理解，Bootstrap的栅格系统是如何实现的(我之前用sass仿照bootstrap写过一个栅格系统)。
• 响应式布局的优缺点，适用场景。(这里和面试官聊了很久，他倾向于响应式适用场景有限，实际上还是写了多套代码，并没有实现一套代码的复用，这样写的响应式代码不如不用，跨平台代码难以维护。复杂系统用很麻烦，但是用于轻量级的如博客系统比较合适。我提出了同一平台下的响应式布局有存在的意义，如后台管理系统的表格宽度非常宝贵，如果能做成响应式可以提高效率。)
• 双飞翼布局原理。
• 聊去哪儿网公司的技术氛围、人际氛围、发展前景。
• 聊思维方式，与人交流的重要性。这里面试官说他们面试比较注重学习一种技术的时间与效果，比较看重人的发展潜力。
• 聊我对UI设计的艺术追求，大学专业的选择和职业规划。聊大学都有哪些课程。
• 我主动介绍我对JS的学习经历，我思维方式的进步(在网易养成了良好的思考问题方式，注重代码规范，独立思考解决问题，空闲时间搞个人研究的习惯)。
• 主动介绍我对创新的理解，介绍学生会时候策划的密室装机大赛活动，称赞互联网公司的技术氛围。

三轮：

• 看你项目很多，在三家公司实习过，说一下三家公司分别做了什么，因为什么原因离职。
• 你认为你做前端开发的个人优势是什么？劣势是什么？(擅长UI，有四年素描、水粉培训经验，对前端有一定帮助，对前端有浓厚兴趣。劣势是对逻辑方面自我感觉没有特别高的天赋和兴趣，以后可能不想做技术专家，想转岗做产品经理)。
• 大学的专业选择，职业规划。
• 个人兴趣。
• 在公司对自己职业的短期规划。(至少3~5年内做技术开发，沉淀前端的技术，深入研究一个以上的框架，从学习框架到实际应用与总结，再到查看源码研究性能。对前端包括整个软件开发有整体的认识。)
• 聊对加班的想法。
• 聊对offer的选择，更看重什么因素(个人发展/薪酬/城市)，聊对工资的预期。
• 介绍公司的发展，定工资值，评级机制，培养机制，转岗机制等等。

搜狐前端面经

时间：2016年9月21日

地点：成都市 电子科技大学 品学楼B211、B210

一轮：

• 自我介绍。
• 财富锦囊文章列表页所做的优化。
• 有没有做DOM回收处理？
• JS模块化(AMD/CMD/commonJS规范)
• commonJS怎么用的？
• JS继承。
• Bootstrap优缺点。
• HTTP怎么操作Cookie。
• 如何实现jquery的选择器？
• jquery插件扩展方法。
• 合并两个有序链表。
• 快速排序。

二轮：

• 定宽高浮层水平垂直居中。
• 不定宽高浮层水平垂直居中。
• 页面里有两个标签使用了同一id，js获取的是哪个？(第一个)
• 如果我想获取第二个id，应该怎么做？(心里想还有这种问题，笑着说还真没这么写过，然后想抖个机灵：用其他的句柄，不用这两个相同的id不就行了。刚要开口时候忽然灵机一动，说先根据id获取第一个元素，然后修改这个id名字，再根据之前的id名字获取就可以获取到第二个了。)
• 我的问题问完了，你还有什么问题吗？(到这里才面试了不到十分钟，感觉我的回答没出什么错误怎么时间这么短)。
• 聊了聊搜狐这边面试的机制，一面很多问题问过了，二面不再问了。
• 聊搜狐的发展。(称赞搜狐的创新)
• 聊UI设计，思维方式，创新思维。

百度前端面经

时间：2016年9月19日（一面）、9月22日（二面） 地点：成都市金牛区 西门智选假日酒店

一轮：

• 自我介绍，(犯了致命问题，我说自己比较偏css，结果整个面试各种问css，很多概念没明确都答错了)。
• 用js获取html文档里所有的标签个数(标签名未知)，获取后从大到小排序。(这里我想用childNodes遍历，建一个对象存储，键值对为：标签名-标签个数，结果后面的排序懵了，记得js高级程序设计里有一个sort方法的函数参数，可以根据对象属性值排序，当时紧张一时没想起来怎么写，这段是让我手写的，我写了一半。)
• 面试官看我没写出来，说那你说说常用的排序算法吧。(我说快速排序，并把快速排序的实现原理说了一下，面试官让我写，问我多久能写出来，我说五分钟，面试官说好那不用写了。)
• JSONP的原理和使用步骤。
• CSS都有哪些选择器？
• CSS的选择器优先级关系？
• 盒模型，div的实际宽度包不包括padding？
• 两列布局，一列定宽一列自适应。(双飞翼布局与圣杯布局)。
• 两列布局除了双飞翼和圣杯布局之外还可以怎么做？(我回答flex，他又追问flex具体如何实现，禁止扩展和缩小宽度分别是什么属性？shrink和grow)。
• 一个div里面嵌套了一个div，外面div不设宽高，背景色为蓝色，内层div设置宽高100px且左浮动，背景色为红色，问用户看到的div是什么颜色。
• float的定义，float的影响如何清除。(只答上了clear:both的两种方式，后来回去查资料发现还有overflow:auto等方法，共计八种)。
• 三个div，一层嵌套一层，名字分别为123，鼠标点击最里面的3，发生了什么事情？(我回答出了DOM事件流的过程)
• 事件委托怎么做？有什么好处？(好处这里回答不完整，回去翻书发现好处有很多)。
• 弹出层的实现，要求水平垂直居中，遮罩背景半透明，兼容IE6。(rgba和opacity兼容不到IE8，旧IE我不知道如何兼容，后来回去后查到是有IE专属的透明度的属性alpha)。
• 弹出层的点击隐藏/显示事件，如果一开始不出现浮层的DOM应该怎么做？(回答的js生成浮层的DOM标签)。
• js闭包的定义，闭包的适用场景，了解多少说多少。
• js继承的概念，了解多少说多少。

二轮：

• hasOwnProperty是什么意思。(考察js继承)
• 写一个函数，传入日期字符串，为一个出生日期，返回距离生日还有多少天。(思路说对了，写的时候很多date函数没有记住，写得有点乱)
• 前端性能优化。(老问题了，从优化DOM操作、减少网络请求和压缩资源文件大小方面回答)
• 浏览器输入一个地址到呈现页面发生了什么。(老问题了，DNS解析过程，TCPIP原理，HTTP协议与浏览器解析引擎处理html、css、js文件的顺序与页面生成布局与渲染)
• 变量声明与提升(给了一段js问输出结果，写对了答案但是没解释清楚，其实就是变量声明与作用域的问题)。
• 事件委托概念，手写事件委托。
• 闭包的概念，手写一个闭包。
• H5的了解，canvas的了解。
• H5的动画如何做？
• 文件上传做过吗？(File Api)
• CSS3的了解：
• animation的了解，写一个animation动画，一条线的钟摆效果。
• transform的属性(translate2D与3D平移，角度旋转，缩放)。
• transition渐变。
• 实现一个tab标签切换的效果，每个标签页点击才发起ajax加载，缓存时间为10分钟，少于10分钟不重新加载，写一下。(说了思路，面试官要求写一下，写出来了)
• 实现一个分页效果。(这里我说了思路，设置分页参数请求ajax，面试官说不对，类似于jquery的pager，我说那个我没用过，不清楚具体的需求)。

网易前端面经

时间：2016年9月23日

地点：成都市金牛区

一轮：

• H5移动适配的方式。(flexible)
• 前端性能优化。
• Hybird开发原理，调用形式。
• 雪碧图如何做移动适配。
• 各种数据类型及其区别。
• 正则匹配的惰性匹配，匹配的顺序。
• JS垃圾回收，引用计数的内存泄漏问题。
• remove DOM能不能回收。
• 新框架的了解。
• React了解多少。(虚拟DOM优点，单向数据传递优点)。
• Node/Express的了解，use是做什么的。

二轮：

• 实现一个函数，传入数组，起始位置和结束位置，将两个位置之间的数组项逆序，输出原数组。如何优化。
• 做过哪些UI组件，如何定一个插件的API。
• jquery扩展插件的形式。
• jsonp跨域实现原理，怎样使用。
• DOM事件流。
• JS事件冒泡与事件委托，哪些事件不冒泡。
• 给定一个字符串是一段js代码，如何执行这段代码。
• 聊使用过的框架。

后记

• 面试了很多场，见过很多面试官，自我感觉除了提高自己实力外，面试之前要捡一捡概念性的东西，平时用的少，但一定要记牢。
• 面试还是有很多运气成分在里面，和面试官短则十几分钟，长不过一小时左右的时间，短时间内对我们能力、性格、发展等做出判断还是不容易的，如果和面试官聊得来，面试效果会非常好。除了实力过硬对答如流之外，良好的沟通交流能力也很重要，主动一些，介绍自己擅长的领域。面试时候展现出积极思考，善于思考的一面来。
• 我也问了一些面试官，基本上评价应届生的标准都是，考察技术能力(在一定的学习时间内对某一领域知识掌握的广度和深度)和发展潜力(面对一些新问题的思维方式，能否当场灵活解决)，招聘进来的人不一定现在多么牛，要保证接下来的两三年以上的时间会很牛。至于数据结构、算法等知识，对于前端来说在实际项目中很少用，面试时问到这些知识点主要考察在校学习能力，接受逻辑思维的能力。

总结一下面试常问的问题：

布局：

• 盒模型(标准盒模型与IE盒模型)。
• 选择器与选择器的优先级。
• CSS3新特性(border-radius,animation,transform,transition…)。
• 两/三列布局，其中一列自适应宽度。
• 元素的水平垂直居中。
• position/float的属性值的理解。
• 块级元素与行内元素。
• img标签与background-image区别。
• html5新特性。
• 页面重排重绘规则。

JS：

• 数据类型及其区别。
• 数组字符串方法。
• 函数作用域与作用域链。
• 闭包。
• 继承。
• DOM事件流，事件委托。
• 原生DOM操作。
• 本地缓存cookie，sessionstorage，localstorage。
• ajax原生实现。
• jquery选择器，一部分方法。

网络：

• TCPIP原理。
• HTTP协议，协议头的属性了解多少。
• HTTP状态码。
• 跨域同源策略。
• jsonp跨域原理。

数据结构/算法：

• 排序算法，栈/队列操作。(我不太擅长这块，一般面试也很少问我这些)

通用问题：

• 前端性能优化，浏览器输入网址到页面呈现的过程。(不要背书!不要背书!不要背书!最好结合自己的实际项目娓娓道来，不要给人死记硬背的感觉)。
• 后端语言的掌握情况(Node/php/Java)
• 遇见一个问题/bug如何解决？
• 如何学习前端的？
• 你还有什么问题问我吗？