2016十家公司前端面试小记
春节前离职了，年后来了有一周了，把简历丢到网上后大概收到了将近七十多个面试邀请，挑了几个稍微知名一些的公司如国美京东美团百度彩票等和一些中 小型公司去面试，这星期一共面了11家公司，除了阿里似乎没戏了其他的十家基本都发了口头或是正式offer，也不打算再面了，社保断了也是个麻烦事，打 算从这其中挑一个就可以了。
面试过程中有做面试题的，也有直接聊的，实话讲有些面试题其实就是背书，随便一百度就能出答案的东西其实不太适合用于面试题中。例如某某css属性 的用法，js某函数的作用等等。个人倾向于将实际工作中可能会遇到的问题的场景，以及各种技术的坑作为面试题，这样一则可以看出他的经验多少，二则也可以 防止他做笔试题的时候手机搜索结果。
不过总体来讲基本上每家问的问题也差不多，可能不同业务的公司问的问题的侧重点不太一样，有点侧重于移动端适配css布局浏览器兼容IE hack，而有的侧重于JS逻辑面向对象考察等，如果你有三到五年左右的开发经验这些问题基本也都遇见过，就算是做个总结吧。
手写事件模型及事件代理/委托
这个算是被问到的最多次数的问题了，首先要求描述下js里面的【事件的三个阶段】，如果没听说过三个阶段，那基本上就没戏了。分别是捕获，目标，冒 泡阶段，低版本IE不支持捕获阶段。然后可能问到IE和W3C不同绑定事件解绑事件的方法有什么区别，参数分别是什么，以及事件对象e有什么区别等等。
如果上述都没问题，接下来可能会问【事件的代理/委托】的原理以及优缺点，这是靠事件的冒泡机制来实现的，优点是
1、可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒
2、可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适
事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件，事实上我见过有人把页面里的所有事件都绑定到document用委托的，这是极其不明智的做法。
所谓劲酒虽好，可不要贪杯哦~
之后对方可能要求你手写原生js【实现事件代理】，并要求兼容浏览器，其实就是考核对事件对象e的了解程度，以及在IE下对应的属性名。其实此时如果你说就是用target，currentTarget，以及IE下的srcElement和this，基本就可以略过了。
如果上述都ok的话，那么极有可能要求让你【实现事件模型】，即写一个类或是一个模块，有两个函数，一个bind一个trigger，分别实现绑定 事件和触发事件，核心需求就是可以对某一个事件名称绑定多个事件响应函数，然后触发这个事件名称时，依次按绑定顺序触发相应的响应函数。
这个需求如果对于做过C#的人来讲就再熟悉不过，他根本就是C#中的【委托】（delegate）。而委托与事件几乎是一家子。回到前面说的题目， 大致实现思路就是创建一个类或是匿名函数，在bind和trigger函数外层作用域创建一个字典对象，用于存储注册的事件及响应函数列表，bind时， 如果字典没有则创建一个，key是事件名称，value是数组，里面放着当前注册的响应函数，如果字段中有，那么就直接push到数组即可。 trigger时调出来依次触发事件响应函数即可。
不过还有很多细节，比如触发响应函数时的上下文应该是什么，触发响应函数的参数列表应该是什么，如果要求把调用trigger的参数列表都传到响应函数中还要考虑到吧arguments对象转化为纯数组才行等等。
还有一些面试官会问到事件如何派发也就是事件广播（dispatchEvent）等等，这里不再展开。
有关事件的考核点大概也就这么多了
前端性能优化
这个简直老生常谈，不管是园子里还是园子外，关于前端优化的东西太多太多了，不同角度不同方向也有很多，网络性能优化，加快访问速度，浏览器并行加 载数量，怎样实现原生JS异步载入，CDN加速的原理，如何将不同静态资源发布到多个域名服务器上，发布后这些静态字段的url路径改怎么批量改写，用什 么工具进行项目打包，css打包后的相对路径怎么转换为绝对路径，用什么工具进行项目模块依赖管理，怎么进行cookie优化等等，
这个说起来就很多了，尽可能的按照自己做过的优化来讲，否则面试官随便挑一项深究都可能会卡壳，与其这样还不如不讲
闭包原理及应用
这个问题的经典性，几乎所有面试官都会问到这个问题，什么情况下会发生闭包，为什么需要闭包，什么场景下需要，闭包闭了谁，怎么释放被闭包的变量内存，闭包的优点是什么，缺点是什么等等。
关于闭包，有的是上述提问，有的是直接做闭包面试题。关于概念网上一搜一大把，关于闭包面试题，可以参考我之前写过的一篇文章：大部分人都会做错的经典JS闭包面试题
不夸张的讲，如果这篇文章完全弄懂了，基本上没有可以难住的闭包的题目了。
手写Function.bind函数
首先会要求解释下这个函数的作用，以及在什么场景下需要用到它，最后手写一个Function.bind函数。
只要掌握核心几点就没问题：
1、Function.bind返回的也是一个函数，所以注定发生了闭包，
2、在返回的这个函数中去调用一个其他的函数，这其实本质上就是函数钩子(HOOK)
关于在JS里的函数钩子，我认为只需要维护以下三点即可：
1、保持函数的this指向
2、保持函数的所有参数都传递到目标函数
3、保持函数的返回值
有了以上这几点，这个函数就非常好写了，下面是MSDN上的标准Polyfill：
if&(!Function.prototype.bind)&{&&&Function.prototype.bind&=&function&(oThis)&{&&&&&if&(typeof&this&!==&&function&)&{&&&&&&&//&closest&thing&possible&to&the&ECMAScript&5&&&&&&&//&internal&IsCallable&function&&&&&&&throw&new&TypeError(&Function.prototype.bind&-&what&is&trying&to&be&bound&is&not&callable&);&&&&&}&&&&&&var&aArgs&=&Array.prototype.slice.call(arguments,&1),&&&&&&&&&fToBind&=&this,&&&&&&&&&fNOP&=&function&()&{},&&&&&&&&&fBound&=&function&()&{&&&&&&&&&&&return&fToBind.apply(this&instanceof&fNOP&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&?&this&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&:&oThis&||&this,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&aArgs.concat(Array.prototype.slice.call(arguments)));&&&&&&&&&};&&&&&&fNOP.prototype&=&this.&&&&&fBound.prototype&=&new&fNOP();&&&&&&return&fB&&&};&}&
手写数组快速排序/去重
不管是排序也好，还是去重也罢，都是计算机基础知识了，虽然快排写出来了，去重也用多种方式实现了，但是算法是我的弱项，这里就不展开了。不过对于准备面试的童鞋来讲，准备下常用算法还是比较重要的，大部分公司还是比较看重此类基础知识的。
JS的定义提升
利用js的特性定义提升这个知识点衍生出来的面试题相当之多，诸如以下等等
(function(a){&&&&&console.log(a);&&&&&var&a=10;&&&&&function&a(){};&}(100))&
这算是我做过的定义提升里面的最简单的题目了,建议可以看下我的上一篇文章:一道常被人轻视的前端JS面试题
基本上能做对那篇文章中所说的题目的话，此类面试题基本平趟无悬念
关于跨域大概可以分iframe的跨域，和纯粹的跨全域请求。
关于跨域的可以去看园子里的这几篇文章:
JavaScript跨域总结与解决办法
跨域资源共享的10种方式
其实正统的跨全域的解决方法大致也就，JSONP,Access Control和服务器代理这么三种
只要你聊到跨域，就必须聊到JSONP，那么就必须要讲一下JSONP的实现原理，以及你在项目中那个需求使用了JSONP，这里简单讲就是HTML里面所有带src属性的标签都可以跨域，如iframe，img，script等。
所以可以把需要跨域的请求改成用script脚本加载即可，服务器返回执行字符串，但是这个字符串是在window全局作用域下执行的，你需要把他 返回到你的代码的作用域内，这里就需要临时创建一个全局的回调函数，并把到传到后台，最后再整合实际要请求的数组，返回给前端，让浏览器直接调用，用回调 的形式回到你的原代码流程中。
基本讲到这也就没什么要再讲的了。
将url的查询参数解析成字典对象
这个题目不约而同的出现在了多家公司的面试题中，当然也是因为太过于典型，解决方案无非就是拆字符或者用正则匹配来解决，我个人强烈建议用正则匹 配，因为url允许用户随意输入，如果用拆字符的方式，有任何一处没有考虑到容错，就会导致整个js都报错。而正则就没有这个问题，他只匹配出正确的配 对，非法的全部过滤掉，简单，方便。
实现代码：
function&getQueryObject(url)&{&&&&&url&=&url&==&null&?&window.location.href&:&&&&&&var&search&=&url.substring(url.lastIndexOf(&?&)&+&1);&&&&&var&obj&=&{};&&&&&var&reg&=&/([^?&=]+)=([^?&=]*)/g;&&&&&search.replace(reg,&function&(rs,&$1,&$2)&{&&&&&&&&&var&name&=&decodeURIComponent($1);&&&&&&&&&var&val&=&decodeURIComponent($2);&&&&&&&&&&&&&&&&&&&&&&&&val&=&String(val);&&&&&&&&&obj[name]&=&&&&&&&&&&return&&&&&&});&&&&&return&&}&
对于常见的场景，如网页滚动时，经常会有滚动到哪时做什么样的动画效果，遂要注册onscroll事件，如何减少触发次数，到达优化性能，同时又满足效果要求不卡顿，一个是优化事件内代码，减少代码量，二就是做函数节流。
大部分节流都采用时间做节流，即时间间隔小于多少的不再调用，但同时保证一个最小调用间隔。（否则拖拽类的节流都将无效果），也可以用调用次数做节流，但要考虑最后一次调用需要要执行。
可以参考：浅谈javascript的函数节流
这方面被问到的比较多的有观察者模式，职责链模式，工厂模式
主要是应用于js开发组件中会经常涉及，纯粹的页面业务逻辑可能涉及不多。
比如如何去设计一个前端UI组件，应该公开出哪些方法，应该提供哪些接口，应该提供哪些事件。哪部分逻辑流程应该开放出去让用户自行编写，如何实现组件与组件之间的通信，如何实现高内聚低耦合，如何实现组件的高复用等等
css垂直居中方法
可以看到我提到上面大多数都是关于JS的面试题，主要是因为css并不是我的强项，但有几个出现频率很高，就是经典的垂直居中问题。
这个问题又可以细分为，被垂直居中的元素是否定高，是文字还是块，文字是单行还是多行文字等等
这个可以百度下，有N多种解决方案，主要还是看应用场景的限制。
自适应布局
这个问题可以划分为，左固定右自适应宽度，上固定下固定中间自适应高度等等布局要求。
关于左右自适应的，不低于10种解决方案，还要看dom结构要求是并列还是嵌套，是否允许有父级元素，是否允许使用CSS3，是否有背景色，是否要两列等高，等等
而关于自适应高度的解决方案就略少一些，大致也是靠，CSS3的calc属性，内padding，绝对定位后拉伸，动态js计算等等解决方案，同样也是要看应用场景能用哪个
移动端自适应
也被问到了很多移动端开发中的各种坑，比如2倍屏，3倍屏的自适应等，我移动端的经验略少，所以只是按照我做过的经验去尽可能的描述清楚，这里就不多说了
其他关于前端
除了技术以外，因为带过一个小团队，所以更多的时间都是去聊关于项目，关于团队，关于如何管理，关于如何处理团队内问题，如何跨团队协作等等。这部分纯属工作经验了，按照做过的不同项目也会有不同。
总之，大部分聊得还算比较愉快，京东评定的是T3，美团评定的是P6，我也不太清楚这算是个什么等级，不过大部分公司都是评定为中级最多中高级开发水平。大概就这样了，从参加工作到现在也有4年了，只混到这么个水平似乎也确实有些说不过去。
官方微博/微信
每日头条、业界资讯、热点资讯、八卦爆料，全天跟踪微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与，TechWeb官方微博期待您的关注。
↑扫描二维码
想在手机上看科技资讯和科技八卦吗？想第一时间看独家爆料和深度报道吗？请关注TechWeb官方微信公众帐号：1.用手机扫左侧二维码；2.在添加朋友里，搜索关注TechWeb。
Copyright (C)
All rights reserved. 京ICP证060517号/京ICP备号 京公网安备76号
TechWeb公众号
机情秀公众号曾经，我非常羡慕那些人见人爱的人，我也想要变成那样，可是后来我才明白人见人爱也是需要天赋的，后来我开始默默努力，我想，就算我不能让每个人都喜欢我，至少因为我做的努力能得到别人的尊重。
　　在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局等方面的不同，但是还是很不系统，所以这里做一个总结。
第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。
第二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。&
第三： 在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。
第四： 在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。
第五： &微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如通过微信分享文章，title、description、icon等图标的配置，这些还是要会的。
第六： 百度地图的一些API接口，也得去实现一下，这些对于移动端来说，LBS是一个非常重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。
第七： CSS3的动画一定要比较熟练，这在移动端用的还是比较多的。&
第八： 一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。
而未压缩的jquery是262kb， 压缩的jquey是83kb，可见两者的差别之大。
第九：最好能掌握一套完整的前端开发架构，比如模块化、打包、压缩、缓存、有条件的还可以做一下自动化测试等等，比较好用的有fis，另外，想要快速提升自己的前端开发技术，钻研前端架构这块是一个非常好的方向。
第十： 性能优化，包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需要特别注意。
第十一： 比如在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需要这300ms的延迟，所以可以使用hammer-time.js来移除这300ms的延迟。
本文整理自：
阅读(...) 评论()
一分耕耘，一分收获。66 条评论分享收藏感谢收起关于前端在PC端与移动端中的区别对比
1、PC考虑的是兼容性，移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器用的都是webkit内核，所以做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作的略微差异化；
2、事件处理部分，移动端需考虑触摸事件，另弹出的手机键盘该如何处理
3、移动端需实现布局自适应。可使用em（相对父元素字体的大小，即父元素font-size=18px，1em=18px）,rem（相对根元素字体大小）,vw
4、在动画处理上，PC端由于要考虑到IE的兼容性，通常用JS做动画的通用性会好一些，但相比3却牺牲了较大的性能，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单，效率又高
5、微信端文章分享的接口，title、description、以及icon图标的配置需要进行了解
6、百度地图的API
7、一般pc用jquery，移动端用zepto
&引用自纯CSS3使用vw和vh视口单位实现自适应（文章详细介绍了vw的使用）
视口（源自Peter-Paul Koch (江湖人称&PPK大神&)的理论）：
PC端：指浏览器的可视区域
移动端：则包括Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport。
视口单位（ Viewport units )中&视口&：
PC端：浏览器的可视区域
移动端：Layout Viewport（布局视口）
根据CSS3规范，视口单位主要包括以下4个：
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个