前端面試總結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 須要的技術棧，我本身以爲仍是挺吻合的吧~ 並且確實作這種酷炫的東西挺有意思的！只是我都沒體驗過正規的前端工程師乾的活，因此必定得先去阿里無線體驗下！