前端面试总结2

转自：http://zhangwenli.com/blog/2015/04/01/2015-front-end-engineer-interview/

简历

再忙也要好好准备的第一件事，固然是简历。

半年前参加黑客马拉松，以为好玩就作了个在线版的简历，在知乎上安利了一下后，居然小火了一把，至今已得到了超过 16000 次浏览。此次准备简历的时候，简单更新了一下在线版的简历，而后用 PhotoShop 作了一页打印版的简历。以前也有考虑用 Word 作好再导出成 PDF，可是 Mac 下的 Word 实在用起来太捉急了，对齐微调什么的搞得我抓狂了，最终仍是折中一下用了 PhotoShop 作，缺点就是导出的 PDF 没有超连接了，实在有点遗憾。

这里就不教你们怎么作这样的简历了，由于对基本没什么 PhotoShop 经验的同窗来讲，作这样的一份简历实在是太费工夫了，不如找个简单大气的模板，把时间花在擅长的地方吧！

网上应该也有很多简历教程了，我想提醒一些细节：

1. 确保联系方式正确且显著（看到过网上有人说简历写错电话邮件，一直没收到联系……）
2. 简历的确不须要花哨，但必定要让人有记忆点（若是你很牛，你的简介能够只有一句“I made Python”，不然请不要太排斥形式上的记忆点。）
3. 检查清楚拼写（这条最容易被忽视！不少人给我看的简历都是空格随意空、半角全角乱用、字体上下不统一等等，会给人作事很不严谨认真的印象。简历如此，代码天然也如此。）
4. 尽量选用简洁优雅的字体和语言（直接看到宋体的中文和 Times New Roman 给个人感受就是随便开了个 Word 都没改字体；避免冗长乏味的描述，用关键字直击重点。）

光是这几条就有大部分人作不到了。记住，简历写的不只仅是你的实力，更是你的态度。

GitHub

GitHub 是一个须要长期经营的地方，不是你面试前能够突击出来的。还在犹豫要不要经营一个活跃 GitHub 帐号的读者能够参见我在知乎上的回答。

刷书

红宝书原本看了一大半了，三周内还刷了犀牛书、蝴蝶书、《WebKit技术内幕》和一些不怎么好的书。我原本读书速度比较快，去年读了 130 本书，这三周牺牲了读闲书的时间，原本又没什么娱乐时间，因此读掉这几本技术书并不算夸张。

内推

正式的实习生招聘有这么多人，茫茫的简历海中被错过实在是太惋惜啦！对公司来讲，各家也都想早点再早点抢到优秀的人才，因此利用好内推是共赢的啦~

能够找在公司工做的学长学姐内推。或者像我这样把简历共享在网上，等大神们来内推~~

虽然作技术的人太张扬总让人怀疑是否是华而不实，但有时候适当地宣传一下本身，让更多机会看到本身，也并非一件很糟糕的事。做为一个 ESFJ，我会很在乎别人的认同确定。幸而作学生干部的那段峥嵘岁月让我学会了低调作人、高调作事，其中的平衡也就本身意会吧~ 成果就是，一年前我在 Gmail 里建了一个标签专门标记各类实习、工做邀请，如今已经快满 50 个啦~ 微博上粉丝上千好像也是由于知乎上分享了简历开始的，也所以结实了各路大神~ 被大神随便转发一下又涨粉了……朋友圈都是竹尖儿工做室业务上的人，豆瓣上都是 Chrome 插件使用者的粉丝，简直找不到能够发比较私人的消息的地方了！

 

 

扯远了……总之，最后选择了阿里巴巴和百度的内推。

阿里巴巴

从 2015 年 3 月 8 日收到阿里内推邮件，到 3 月 31 日正式收到阿里巴巴实习生录用喜报，总共历时三周。

第一轮

时间：2015.3.13

电话技术面试

第一轮技术面试很是简单，就是问各类状况下应该用什么东西实现，好比“CSS 3 如何实现旋转图片”回答“transform: rotate”就不问下去了。

具体问题以下：（正文是我当时的回答，另附过后查阅相关资料的补充或修正）

CSS 3 如何实现旋转图片

transform: rotate

写 CSS 的工具

LESS、SASS

JavaScript 倒计时

setTimeout

setTimeout 和 setInterval 的区别

setTimeout 指定在某时间段后调用一次，setInterval 调用屡次

用 setTimeout 如何调用屡次

在回调函数里再次调用 setTimeout

JavaScript 怎么处理异常

throw 和 catch

JSON 和 XML 的优缺点

JSON 和 JavaScript 的 Object 关联更大，没有特殊需求就用 JSON。XML 应该是有特殊需求的时候再用的吧？

参考：http://www.lingdublog.com/134.html

JavaScript 如何实现继承

prototype （居然只要回答一个词就算过关，没问下去了……简直像通关密码！）

对闭包的理解

在程序语言范畴内的“闭包”指的是函数把其中的变量做用域都“包”在该函数的做用域内，造成一个“包”，外部函数没法访问内部变量。因此严格意义上来讲，JavaScript 中的函数都是闭包。但咱们常说的闭包，一般是指为了让外部函数访问到内部函数中变量，使内部函数返回一个函数，在其中操做内部变量。

Like most modern programming languages, JavaScript uses lexical scoping. This means that functions are executed using the variable scope that was in effect when they were defined, not the variable scope that is in effect when they are invoked. In order to implement lexical scoping, the internal state of a JavaScript function object must in- clude not only the code of the function but also a reference to the current scope chain. (Before reading the rest of this section, you may want to review the material on variable scope and the scope chain in §3.10 and §3.10.3.) This combination of a function object and a scope (a set of variable bindings) in which the function’s variables are resolved is called a closure in the computer science literature. (This is an old term that refers to the fact that the function’s variables have bindings in the scope chain and that therefore the function is “closed over” its variables.)

Technically, all JavaScript functions are closures: they are objects, and they have a scope chain associated with them. Most functions are invoked using the same scope chain that was in effect when the function was defined, and it doesn’t really matter that there is a closure involved. Closures become interesting when they are invoked under a different scope chain than the one that was in effect when they were defined. This happens most commonly when a nested function object is returned from the function within which it was defined. There are a number of powerful programming techniques that involve this kind of nested function closures, and their use has become relatively common in JavaScript programming. Closures may seem confusing when you first en- counter them, but it is important that you understand them well enough to use them comfortably.

摘自 JavaScript, The Definite Guide

RESTful 的操做名

增删改查？

应该是 GET, POST, DELETE 等，当时有点不知道在问什么……

HTTP 40四、30二、500、403 状态名是什么意思

404：文件找不到；302：不知道；500：服务器错误；403：权限错误。

302 Found 是HTTP协议中的一个状态码（Status Code）。能够简单的理解为该资源本来确实存在，但已经被临时改变了位置；或者换个说法，就是临时的存在于某个临时 URL 下。一般会发送 Header 来暂时重定向到新的新位置。

摘自 http://zh.wikipedia.org/wiki/HTTP_302

一面小结

上面的问题虽然有没答出来的，可是好比问到 LESS、SASS 什么不具体问下去的阵仗也把我震惊了，大概一面主要就是来排除那些彻底的初学者的吧，想必申请阿里的人必定不少~

以上总共只用了 5 分钟，而后到了我提问的环节。其实大部分想问的事先都找到人问好了，没什么特别想知道的，就随便问了下下一轮面试过多久。回答说一两周，结果两天后就第二轮面试了……以前问提交完信息多久第一轮面试，回答说两三周，结果第三天就第一轮面试……后来我就不问第三轮过多久了，结果就等了两周……

网上有攻略教你问些面试官不能立刻回答出来的问题，我以为没有必要啦~ 问一个你本身都不想知道答案的问题，面试官还要费力帮你解释，尤为在一天要面试不少人的状况下，要是面试官也知道你的意图，那岂不是很减分嘛~ 因此尊重一下面试官啦，诚实地问你想问的问题就好~

第二轮

时间：2015.3.15

视频技术面试

面试官先打电话来问如今有没有空视频面试，当时是晚上八九点了吧……固然我以为提早告诉我一下会比较好些，但想一想面试官应该天天要面试这么多人也很麻烦，因此也情有可原。

第二轮面试首先对我作过的项目和对前端的关注方面进行提问，而后是比较典型的 JavaScript 语言特性方面的考察。

一些主观问题的答案略去，部分答案也经删减。

我的职业发展的规划？

（略）

你认为前端是作什么的？

在比较成熟的团队中，前端的主要职责是把设计师的设计稿实现出来，包括设计和交互。

经过后面的交流，我以为面试官期待的答案多是全部跟用户打交道的环节。如今再问我这个问题的话，我会从广义和狭义两方面来讲，狭义的前端是实现设计师的设计稿；广义的前端是全部跟用户打交道的环节。

在 Intel 作的是前端相关的？

（问题来源：简历中以前的实习经历）

不算那种典型的前端的工做，主要是 JavaScript 相关的库的开发。

如何了解前端流行的库？

GitHub 和 RSS

你是否肯定之后多年从事前端？

是

作 jWebAudio 的背景和用途？

（问题来源：简历中以前的实习经历）

（略）

对 jWebAudio 进一步的问题

（略）

Three.js 的书是本身写的仍是翻译的？

本身写的，当时学习的时候发现相关学习资料较少，尤为没有中文学习资料，因而打算本身写一本电子书，一方面帮助本身整理思路，另外一方面也能够帮助后来者加快学习速度。

碰到过的印象最深入的技术问题？

（我当时想不出啊好捉急……）

是否是了解 Angular、Backbone？

有在学 Angular.js，但由于刚刚学水平有限，因此没写在简历中。

有没有作过单页面的应用？

变卦

为何用 URL Hash？有别的办法吗？优劣是什么？

用 Hash 对应一个卦的六个爻，其实这里的 Hash 值的本意是定位到 HTML id 的锚点，但实际上页面中并无这一 id 的标签，只是用于 JavaScript 获取这一值。好比 http://zhangwenli.com/biangua/#010011 对应从下到上分别为阴阳阴阴阳阳的“涣”卦，这样分享这个 URL 直接能够对应到一个卦象。

别的方法包括：基于 Query String（http://zhangwenli.com/biangua/?q=010011）和基于 URI（http://zhangwenli.com/biangua/010011）。

基于 Query String 的方法和基于 Hash 的方法同样能够经过 JavaScript 获取到查询的值，只是前者的地址里有查询的字符串（q=），因此地址更长，而在这里又没有别的优点，因此后者优于前者。基于 URI 的方法更简洁，可是须要服务器支持，因为个人代码的服务器是放在 GitHub 上的静态页面，我无法控制 URI 相关部分。综上，Hash 在这一状况下是最佳选择。

模块化了解吗？

AMD、CMD

移动平台的开发经验？

响应式设计、Zepto；@media、viewport、JavaScript 正则表达式判断平台。

position 的几种值？

relative、absolute、fixed

面试官问我还有别的么，我一会儿想不起来了……可是若是问我默认是什么值的话，我知道是 static。

若是一个元素 absolute，它是相对谁说的？

若是它的父元素是非 static 值（这里本身说了 static，面试官上一题应该能够饶过我……），则相对父元素；不然相对是非 static 值的父元素的父元素……直到找到一个最近的非 static 值的祖先元素。若是都没有，则是相对 window 而言。

差点忘乎所以地跟面试官说，事实上，我以前就写过一篇博客详细讨论这个问题……

若是一个元素 absolute，没设 left、top，位置是哪里？

左上角。

正确答案是，至关于 static 的默认位置。左上角之因此不许确，是由于若是父元素在本元素以前若是还有子元素的话，那就不是左上角了。

width:100px; padding:50px; border:1px; margin:50px 问 border 之间的距离？

200px，可是 IE 某些版本多是 100px。应该指定 box-sizing，好比将其设为 box-sizing: border-box，则距离都是 100px。

var a=["a","b","c","d"] 每过 1 秒 alert 一下数组中的值

for (var j = 0; j < 4; ++j) { setTimeout(function() { (function(i) { alert(a[i]); })(j); , 1000); }

虽然意识到要用闭包了，可是仔细看看就知道这确定是同时调用四次，而不是每过一秒啊，并且，大括号都没闭合好么！正解：

for(var j = 0; j < 4; j++) { (function(i) { setTimeout(function() { alert(i); }, (i + 1) * 1000); })(j); }

Ajax 请求须要作哪些事？

（这个我没怎么讲清楚……大多数都用 jQuery 调 Ajax，原生的看是看到过，没怎么记住……）

http://hsj69106.blog.51cto.com/1017401/325922

如何加快页面加载速度？

减小 HTTP 访问次数、CDN、minify、服务器增长缓存、CSS 放前面 JS 放后面、图片压缩、CSS Sprite（我以前一直觉得是 Spirit

 

）等。

 

为何要减小 HTTP 访问次数？

浏览器进程请求连接的数目是有限的，若是有不少 HTTP 请求，有些就得等着；另外，创建 HTTP 连接的开销比较大，须要三次握手之类，而相对地，一次链接中文件大小的边际成本就很小。

二面小结

阿里的二面我以为应该算比较典型的前端面试题吧，仍是暴露了很多个人基础不扎实的问题。

以上总共 40 分钟。

第三轮

时间：2015.3.22

电话技术面试

三面说是技术面试，结果问的都不是具体的技术问题，应该算是考量诸如自主学习能力之类的软实力吧！

一上来问我前两轮面试学到了什么？喏，上面整理的都是我学到的，我三面前都整理好了，可是我怎么跟面试官说呢？具体要我说什么我真的说不出来，当时大概也是紧张了……我一直以为本身反应还挺快的，这么多年主持经验应该挺会随机应变的呀~ 当时多是面试官语气听起来有点压迫感吧，确实没发挥好。

而后谈起我主页的“和光同尘”，说到老子思想什么的，我说我不想作改变世界的程序员，由于那些所谓号称要改变世界的程序员，大多也只是为了自我实现，而不是真的在乎给人类提供一个更好的将来。而大多数人并无足够的智慧看到怎样的世界才是更好的，看起来改变世界变得更好，其实却多是相悖的，blabla……他大概就是说，仍是须要一些有梦想的人把这个世界变得更好吧。而后就聊聊聊……固然啦，这种也没什么对错，就是随便聊聊吧，反正我感受一直没聊到一个频道上。

而后他说了句很厉害的话，让我特别佩服：为何喜欢道家思想的你会处处分享你的做品呢？

 

（由于我虚伪啊~）

 

而后聊设计，说到竹尖儿套餐方案为何要居中。我跟他解释说由于对称美，他表示不能接受多行文字居中，影响阅读速度。我知道对于正文居中固然不合理，可是对于套餐这样的内容我以为彻底是合理的，若是说影响阅读速度，那我能够跟你说菜单设计心理学，故意减慢阅读速度。反正他就是不接受，还以为我没有从善如流这件事让他很介意。我就不跟他争了咯，人家是面试官大人呀~ 我说我保留个人见解，不想跟他就这个话题再聊下去了，他还在说这是设计问题什么的……

其实当时说到这里我真的已是泪流满面了（literally），他倒没指责我或者什么的，虽然一直跟他聊不到一块儿，但整个过程当中他也是没有过失的，是我本身太容易哭了……固然，不能让面试官知道我哭啊，太不专业了！我只好一边抹泪一边掩盖哭腔回答他啊……就这么讲了一个多小时！

若是他是我上司，要我把工做中的某个东西改为靠左对齐，那我表达观点后若是他不接受，我必定立马就改为左对齐。但这是我本身的项目，是我本身的设计，对于我以为没有道理的说法，抱歉我很难接受。我能够在面试的时候，再也不跟他争论，保留我本身的见解，过后我也尝试改为左对齐看了效果，我以为不能接受我就不会改。这一点，但愿他可以理解。我知道他除了是程序员，也是一个颇有见地的设计师，设计师不必定能聊到一块儿，不必定能达成共识，可是必定能够理解另外一个设计师的偏执。

第四轮

时间：2015.3.22

电话 HR 面试

HR 给我打了两个电话没接到，当时在洗澡……回拨由于超过晚上十点，不知道分机号打不进去。后来等了几分钟又打来了，给她解释了一下为何没接到，HR 也挺谅解的，应该没以为我高冷……

20 分钟的电话，问了些为何喜欢前端、作的最能体现本身能力的项目是什么、作这个项目有什么意义之类比较正常的问题吧，没什么特别的。

后续

2015 年 3 月 31 日正式收到录用喜报，暑假准备去杭州无线咯！

这一路也挺横生枝节的，谢谢帮我内推的 @逗B码农死小马，之后的衣食父母 @寒冬winter，和最先联系我并一路给予帮助的 @勾三股四。

百度

大概是从一个月前发布了在线简历开始吧，百度 EFE 前端团队经理 祖明 在微博上邀请我过去“聊聊”。我想多准备准备再过去就一直拖着，天地良心真不是暗渡阿里仓的缓兵之计啊~ 而后祖明特别逗，常常在我彻底不相关的微博下面留言“来咱们这实习吧来咱们这实习吧”~

 

 

拖着拖着阿里那边都差很少了，我想再不去就有把百度当备胎的嫌疑了，那这误会就实在解释不清了……之因此选择暑假去阿里，主要是由于这是最后一个有长段完整时间能够去外地的，开学以后要想去杭州实在是不大现实。最后想一想反正再准备也无法一秒钟变大神了，仍是赶忙去吧！

祖明说要给我安排最厉害的大神给我面试，原本只当恭维之词，结果然的把我虐惨了……

第一轮

时间：2015.3.20

电话技术面试

描述最具备表明性的项目

变卦（技术、艺术、创意的结合）

“变卦”实现代码方面的提问

（略）

jWebAudio 实现方面的提问

（略）

除了简历中的项目，还有什么项目经验？

本科研究课题是景深模糊渲染，使用 WebGL Three.js 着色器实现。

是否是对可视化比较感兴趣？

（表达了对 echarts 的兴趣~）

从浏览器输入 URL 到页面渲染发生了什么事？

1. 浏览器接收用户输入
2. 解析域名对应 IP，发送到服务器（被打断：谁解析 IP？答：DNS。）
3. 向服务器请求网页
4. 服务器返回网页请求
5. 浏览器把获得的网页数据从字节流变成一个个 token
6. 生成 DOM tree
7. 渲染页面
8. 同时异步加载网页中 CSS、JavaScript 等外部资源

这部分我是照记忆中《WebKit技术内幕》的回答的，摘录以下。

1. 当用户输入网页 URL 的时候，WebKit 调用其资源加载器加载该 URL 对应的网页。
2. 加载器依赖网络模块创建链接，发送请求并接收答复。
3. WebKit 接收到各类网页或者资源的数据，其中某些资源多是同步或异步获取的。
4. 网页被交给 HTML 解释器转变成一系列的词语（Token）。
5. 解释器根据词语构建节点（Node），造成 DOM 树。
6. 若是节点是 JavaScript 代码的话，调用 JavaScript 引擎解释并执行。
7. JavaScript 代码可能会修改 DOM 树的结构
8. 若是节点须要依赖其余资源，例如图片、CSS、视频等，调用资源加载器来加载它们，可是它们是异步的，不会阻碍当前 DOM 树的建立，直到 JavaScript 的资源加载并被 JavaScript 引擎执行后才继续 DOM 树的建立。

摘自《WebKit技术内幕》

另外，网上看到颗粒度很是细的回答，表示不明觉厉！

如何验证上述 CSS、JavaScript 是异步加载的？

打开 console 看 network？

我如今想一想，面试官大概是想说，我前面说的“同时异步加载网页中 CSS、JavaScript 等外部资源”是错的。

在 network 中看到不少 JavaScript 是并行发的，可是这就叫异步加载吗？

不能，在默认状况下 JavaScript 的加载是阻塞的，前面的 JavaScript 请求没有处理、执行完，是会阻塞 DOM tree 的解析等的，须要 JavaScript 代码彻底获取到并执行完毕才继续。

一个更漂亮的回答应该再扯一点 defer、async 呀！

CSS 的加载是异步的吗？表如今什么地方？

是的，表如今不阻塞 DOM tree 的解析，而且能够同时加载多个 CSS 文件。

这个答案应该是错误的。

By default CSS is treated as a render blocking resource, which means that the browser will hold rendering of any processed content until the CSSOM is constructed. Make sure to keep your CSS lean, deliver it as quickly as possible, and use media types and queries to unblock rendering.

In the previous section we saw that the critical rendering path requires that we have both the DOM and the CSSOM to construct the render tree, which creates an important performance implication: both HTML and CSS are render blocking resources.

Finally, note that “render blocking” only refers to whether the browser will have to hold the initial rendering of the page on that resource. In either case, the CSS asset is still downloaded by the browser, albeit with a lower priority for non-blocking resources.

摘自 Render Blocking CSS

JavaScript 的多个模块怎么组织？

放在多个文件、文件夹中。

如何管理多个文件？

RequireJS。

这里我应该说一句其实对 RequireJS 了解很少的，只知道个大概……不然就会像下面同样被问惨了，猜猜好像挺有把握的，但又不想给面试官留下不懂装懂的印象……纠结~

RequireJS 里 a 文件依赖于 b 文件，b 文件依赖于 c文件，加载顺序如何？

先加载 c，再 b，再 a。

JavaScript 哪部分掌握得很差？

闭包、做用域。

问这个问题好机智啊~ 我诚实地暴露了本身的弱点，方便面试官能够一针见血地问啊……也是醉了……

 

 

函数的 this 各类指向

在不使用 call()、apply() 的状况下，this 指向当前做用域，好比函数中的 this 指向函数，全局的 this 指向 window。

这个回答大错特错好么！其实面试前两天刚在《Secrets of the JavaScript Ninja》里面看到相关内容，总结得很是清楚，当时只道是寻常地看了过去……

 

Invocation as a function

function ninja(){}; ninja();

When invoked in this manner, the function context is the global context—the window object.

Invocation as a method

var o = {}; o.whatever = function(){}; o.whatever();

When we invoke the function as the method of an object, that object becomes the function context and is available within the function via the this parameter.

Invocation as a constructor

function creep(){ return this; } new creep();

Invoking a function as a constructor is a powerful feature of JavaScript, because when a constructor is invoked, the following special actions take place:

• A new empty object is created.
• This object is passed to the constructor as the this parameter, and thus becomes the constructor’s function context.
• In the absence of any explicit return value, the new object is returned as the constructor's value.

Invocation with the apply() and call() methods

function juggle() { var result = 0; for (var n = 0; n < arguments.length; n++) { result += arguments[n]; } this.result = result; } var ninja1 = {}; var ninja2 = {}; juggle.apply(ninja1,[1,2,3,4]); juggle.call(ninja2,5,6,7,8); assert(ninja1.result === 10,"juggled via apply"); assert(ninja2.result === 26,"juggled via call");

To invoke a function using its apply() method, we pass two parameters to apply(): the object to be used as the function context, and an array of values to be used as the invocation arguments. The call()method is used in a similar manner, except that the arguments are passed directly in the argument list rather than as an array.

摘自《Secrets of the JavaScript Ninja》

下面代码的 this 是什么？

function a() { function b() { console.log(this); } b(); } a();

b。

若是仔细读了上一题的解释，很容易理解这里的答案应该是 window。

简历中看到对 jQuery 比较了解，有看它的源码吗？

最近有在看《jQuery 技术内幕》，以为挺有帮助的，若是让我直接去读源码的话，本身无法理解这么多门道。

如下代码两次 alert 的结果分别是什么？为何？

var a = "Hello"; function b() { alert(a); var a = "World"; alert(a); } b();

"Hello" 和 "World"。由于函数内部的 a 不是函数，因此不会 hoist 到函数顶部，所以在第一次执行的时候没有覆盖全局的变量。若是这里是 function a(){}，则两次都是内部 a 的值。

这里我也是有误解的，《Secrets of the JavaScript Ninja》里有提到这一问题，可是我当时只是只知其一;不知其二觉得本身懂了。我记忆中的“变量声明形式不会 hoist”，实际上是针对函数说的，是说用函数表达式形式定义的函数不会 hoist 到顶部，区别于函数语句定义会 hoist。函数内的变量都会被 hoist 到顶部，在第一次 alert 以前，a 已是 undefined 了，只是这时候还没被赋值为 "World"。因此，两次输出的结果分别是 undefined 和 "World"。

你理解的 Web 前端将来的发展

我认为随着 HTML、CSS 等的发展，网页上能作的事情愈来愈丰富了，包括更酷炫的前端呈现方式、音视频的处理，更趋向于可以作 Native 应用能作的事情了，可能之后 Web 和 Native 的边界会愈来愈模糊。

除了 Web Audio 还对 HTML5 哪部分比较熟？

在 Intel 实习期间有接触过 WebRTC。

WebRTC 相比 Web Socket 有什么好处？

WebRTC 是专为网页上的音视频沟通定制的解决方案；Web Socket 更通用一些，固然也能实现 WebRTC 的功能，可是通用的灵活度每每意味着须要写更多的代码来实现，因此若是是音视频交流的话，固然使用 WebRTC 更合适。

我以为我说得太泛泛了，愧对 Intel 的各位前辈了……

盒模型

（相似阿里）

CSS selector 优先级

分为 id > class > 标签 > 伪类 四类，计算每一个类别中的选择器个数，而后先比较 id 个数，越多越优先，在 id 个数相同的状况下，再比较 class 个数，以此类推。

带有 !important 的优先级最高，都带 !important 的再以以前的顺序计算优先级。

inline > internal > external

面试前正好跟室友讨论过这个问题，她还写了博客，快戳快戳~

一面小结

此次面试是暴露我最多问题的一次！固然啦，在不被淘汰的状况下，暴露问题多也是件好事，能够发现本身的问题也是一件颇有价值的事。面试官果真是大神呢~

特别让我感动的一点是，面试官会在问完问题以后，给我解释全部答错的题，这也是我第一次碰到的状况呢！想到祖明最近牵头 IFE 的事，以为他们已经从挖掘人才走到了培养人才的一步，钦佩的同时也十分感激~

第二轮

时间：2015.3.26

现场面试

从学校到百度要两个多小时呢，惋惜祖明不在上海啊，给我面试的是 pissang。

面试官一上来先自我介绍，让我以为很新鲜~ 给我看了酷炫的 Echarts-X。

而后介绍作个的各类项目同上，再也不赘述。

单输出有向无环图的顺序遍历

（问到这题是由于简历中项目 jWebAudio 涉及 Web Audio 各类 node 的链接的数据结构）

主要就是用栈，我懒得具体画了。

jWebAudio 的接口设计

按 jQuery 插件的标准接口设计来的。

WebGL 世界坐标系、物理坐标系、窗口坐标系

（我就画了画，我也不知道这应该说什么……）

写过 shader 代码吗？

有，本科的研究课题是景深模糊渲染，用到 WebGL 的 shader。（略）

研究生阶段的研究课题

自动化的“脸萌”：人脸卡通画自动生成。（略）

如今流行的低模效果，对人脸怎么实现？

先用 Active Shape Models 算法定位到人脸轮廓和关键人脸部件边缘，而后沿着轮廓找到三角形的一条边，再用必定的随机算法随机到另一个点，依次类推。三角形的颜色用三角形区域内出现频率最多的颜色填充（当时我在想 Matlab 里有个对应的词印象很深入的啊，怎么想都想不起来了：mode）。

矢量处理有接触过吗？

若是是指矢量编辑软件的话，我对 InkScape 掌握得很是熟（我对前端都很差意思说掌握得很是熟~）。若是是指编程方面的话，对 SVG 有必定了解。

如何判断圆和直线相交？

(Ax + By + C) / sqrt(A * A + B * B) 计算圆心到直线距离，而后与半径比较。

碰撞检测的 AABB

投影到两个互相垂直的直线上，若是有交点须要进一步判断是否相交，若是没有交点能够肯定必定不相交。

二面小结

这个也不是典型的前端面试会问的题目，由于我以前对 echarts 表现出兴趣，面试官又是专门搞这个的，因此问了这类的题目。应该说无论是此次面试仍是 echarts 须要的技术栈，我本身以为仍是挺吻合的吧~ 并且确实作这种酷炫的东西挺有意思的！只是我都没体验过正规的前端工程师干的活，因此必定得先去阿里无线体验下！