前言春节前离开，过年已经一周了。把简历扔到网上后，我收到了近70份面试邀请，我选择了几个知名公司，比如国美、京东、美团、百度彩票等，去面试了一些中小公司。这个星期一，我采访了11家公司。除了阿里好像倒闭了，其他十家基本都发了口头或者正式的offer，我也不打算再面试了。是的，破社保也是一件麻烦的事情，我打算选择其中之一。面试过程中，有一些面试题，也有一些直接聊天。说实话，有些面试题其实是背书，百度就能回答的东西不适合做面试题。比如某个css属性的用法，某个js函数的作用等等。个人比较倾向于把实际工作中可能遇到的问题场景，以及各种技术坑当面试题，一是看他有多少经验，二是防止他手机搜做笔试题的时候打电话出结果。但是一般来说，基本上每个公司都会问同样的问题。可能不同业务的公司问的问题侧重点不一样。有的侧重于移动端适配css布局浏览器兼容IEhack，有的侧重于JS。逻辑面向对象设计模式检查等。如果你有三五年左右的开发经验，这些问题你基本都遇到过，下面做一个总结。手写事件模型和事件代理/委托是最常被问到的问题。首先需要在js中描述【事件的三个??阶段】。如果你没听说过三阶段，那基本没什么用。.分别是捕获阶段、目标阶段和冒泡阶段，低版本的IE不支持捕获阶段。那么你可能会问IE和W3C绑定和解除绑定事件的不同方法有什么区别，参数是什么，事件对象e有什么区别等等。如果以上都没有问题，那你可能会问一下【事件代理/委托】的原理和优缺点，它是通过事件冒泡机制实现的。优点是1.可以节省大量内存使用，减少事件注册。比如把table上的所有td点击事件都代理起来就很棒了。2、可以实现在添加新的子对象时，不需要再给它们绑定事件。它特别适合动态内容。事件代理的应用应限于上述要求。如果对所有事件都使用proxy，可能会导致事件误判，即把不应该触发事件的事件绑定到事件上。事实上，我看到有人将页面中的所有事件绑定到文档委托。这是极不明智的。所谓烈酒虽好，可别贪了~以后对方可能会让你手写原生js【实现事件代理】，要求兼容浏览器。其实就是评估IE下对事件对象e和对应属性名的理解程度。其实这个时候如果说在IE下使用target、currentTarget、srcElement和this，基本可以略过。如果以上都ok，那很有可能会要求你【实现事件模型】，即写一个类或模块，一绑定一触发器，实现绑定事件和触发器事件分别。核心需求是可以为某个事件名绑定多个事件响应函数，然后当该事件名被触发时，会按照绑定顺序依次触发对应的响应函数。如果这个需求对于做过C#的人来说很熟悉，那简直就是C#中的[delegate]（委托）。代表和活动几乎是一家人。回到上面提到的话题，大致的实现思路是创建一个类或者一个匿名函数，在bind和trigger函数的外层创建一个字典对象来存放注册事件和响应函数的列表。绑定的时候，如果字典没有则创建一个，key是事件名，value是一个数组，里面包含了当前注册的响应函数。如果字段中有，则直接将其推入数组即可。调用Trigger依次触发事件响应函数。但是还有很多细节，比如触发响应函数时的上下文应该是什么，触发响应函数的参数列表应该是什么，是否需要将调用trigger的参数列表传递给响应函数，也应该考虑。arguments对象应该被转换成纯数组就可以了，等等。有的面试官会问事件是怎么派发的，也就是事件广播（dispatchEvent）等，这里就不展开了。相关事件的考核点大概只有这么多。前端性能优化是陈词滥调。不管是园内还是园外，前端优化的东西太多了，角度和方向也有很多。网络性能优化，加快访问速度，浏览器并行加载数量，如何实现原生JS异步加载，CDN加速原理，如何发布不同的静态资源到多个域名服务器，如何批量重写url发布后这些静态字段的路径，以及使用什么工具进行项目打包，css打包后如何将相对路径转换为绝对路径，使用什么工具进行项目模块依赖管理，如何优化cookie等。说的很多，尽量按照你做过的优化，不然面试官随便选一个去研究都可能卡住。与其这样，还不如不讲闭包原理和应用这道题的经典。几乎所有的面试官都会问这个问题，什么情况下会出现closure，为什么？需要闭包，需要什么场景，闭包关闭了谁，如何释放关闭的变量内存，闭包的优缺点是什么等等。关于closure，有的就是上面提到的问题，有的是直接closureinterview的问题。有很多关于概念的在线搜索。闭包面试题可以参考我之前写的一篇文章：大部分人都会做错的经典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(typeofthis!=="function"){//最接近ECMAScript5//internalIsCallablefunctionthrownewTypeError("Function.prototype.bind-whatistryingtobeboundisnotcallable");}varaArgs=Array.prototype.slice.call(参数,1),fToBind=this,fNOP=function(){},fBound=function(){returnfToBind.apply(thisinstanceoffNOP?this:oThis||this,aArgs.concat(Array.prototype.slice.call(arguments)));};fNOP.prototype=this.prototype;fBound.prototype=newfNOP();returnfBound;};}Handwritten数组快速排序/去重无论是排序还是去重，都是计算机的基础知识。虽然写了快速排序和去重的实现方式很多，但是算法是我的弱项，这里就不展开了。不过对于准备面试的童鞋来说，准备常用的算法还是比较重要的，大部分公司还是比较看重这样的基础知识的。完善JS的定义利用js的特征定义来完善这个知识点衍生出来的面试题相当多，比如下面的等(function(a){console.log(a);vara=10;functiona(){};}(100))这是我做过的定义改进中最简单的一道题。推荐看我上一篇文章：一道经常被低估的前端JS面试题，那篇文章基本可以做对。就题目而言，这类面试题基本平平无奇，没什么悬念。跨域关于跨域，分为iframe跨域和纯跨全局请求。关于跨域，可以看园子里的这些文章：JavaScript跨域总结及解决方案Cross-domain-knowledge10waysofcross-domainresourcesharing其实正统的跨域解决方案大致有，JSONP，AccessControl只要说到跨域就一定要说JSONP，那么就一定要说JSONP的实现原理，还有你需要在项目中使用JSONP，这里简单说下HTML中所有带src属性的标签都可以跨域，比如iframe,img,script等。所以可以把需要跨域的请求改成用script脚本加载，服务器返回执行字符串，但是这个字符串是在window全局范围内执行的，需要返回到你的代码范围内，这里需要临时创建一个全局回调函数，并传给后台，最后整合实际请求的数组，返回给前端，让浏览器调用直接返回您的原始代码以回调的形式流动。基本上说到这里，就没什么好说的了。url查询参数解析成字典对象的问题，在很多公司的面试题中都出现过。当然，也是因为太典型了。解决方法无非就是拆分字符或者使用正则匹配来解决。我个人强烈推荐使用正则匹配，因为url允许用户随意输入。如果使用字符拆分的方式，如果有任何地方没有考虑容错，就会导致整个js报错。Regex没有这个问题，只匹配正确的配对，过滤掉所有不合法的，简单方便。实现代码：functiongetQueryObject(url){url=url==null?window.location.href:url;varsearch=url.substring(url.lastIndexOf("?")+1);varobj={};varreg=/([^?&=]+)=([^?&=]*)/g;search.replace(reg,function(rs,$1,$2){varname=decodeURIComponent($1);varval=decodeURIComponent($2);val=String(val);obj[name]=val;returnrs;});returnobj;}函数节流对于常见的场景，比如网页滚动的时候，滚动的时候经常会有动画效果，所以要注册onscroll事件，如何减少触发次数，优化性能，同时不卡顿的满足效果要求，一是优化事件中的代码，减少代码量，二是做函数节流。大多数节流都是使用时间来节流，即如果时间间隔小于某个数，则不会调用，但同时保证一个最小的调用间隔。（否则拖拽类的节流是没有效果的），节流也可以用调用次数来做，但是必须考虑到最后一个调用需要执行。可以参考：浅谈javascript的函数节流设计模式。这方面有很多关于观察者模式、责任链模式、工厂模式的问题。它们主要用在js开发组件中，会经常涉及到。纯页面业务逻辑可能不会涉及太多。比如前端UI组件怎么设计，应该暴露哪些方法，应该提供哪些接口，应该提供哪些事件。哪部分逻辑流程要开放给用户自己写，如何实现组件之间的通信，如何实现高内聚低耦合，如何实现组件的高复用等。CSS垂直居中方式可以看从我上面提到的面试题来看，大部分都是关于JS的，主要是因为CSS不是我的强项，但也有几道是经常出现的，就是经典的垂直居中题。这个问题可以细分为垂直居中的元素是否有负高度，是文本还是块，文本是单行还是多行等，这个可以百度下载。解决方案有N种，主要看应用场景的限制。.自适应布局的问题可以分为固定左右自适应宽度、固定上下固定中间自适应高度等布局需求。关于左右自适应，解决方案不少于10种，看dom结构是否要求并列或嵌套，是否允许父元素，是否允许CSS3，是否有背景色，是否两列等高，等等，自适应高度的解决方案有点少，主要是靠CSS3的calc属性，innerpadding，绝对定位后拉伸，动态js计算等解决方案，这也要看哪个应用场景可以被用到移动端适配也被问到移动端开发中的各种坑，比如2倍屏，3倍屏适配等等，我对移动端经验不多，所以就尝试一下尽量按照我的经验去做。描述的很清楚，前端就不多说了。除了技术，因为我领导过一个小团队，所以我花更多的时间来谈论项目、团队、如何管理、如何处理团队内部的问题、如何跨团队协作等等。这部分纯属工作经验，会根据你做过的项目不同而有所不同。总之，大部分聊天都比较愉快。京东评级为T3，美团评级为P6。我不知道这是什么水平，但大多数公司被评为中等和最先进的发展水平。.就是这样。工作4年了，只混到这种程度，似乎真的很不合理。
