原文鏈接地址：Nealyang/personalBlog

?

市面上有很多關(guān)于面試的文章，但是基本都是從應(yīng)聘者的角度去分析問題的，從招聘官的角度去分享的著實(shí)不多。本文將從我的個人招聘經(jīng)歷分享下關(guān)于前端一面的一些思考和自己的感悟。以下所有感悟皆為筆者個人感悟，不代表任何。有不妥之處，歡迎指出

?

其實(shí)不得不說，找工作，真的七分實(shí)力，三分運(yùn)氣。不同的面試官有不同的看重點(diǎn)，所以千萬不要為一次的滑鐵盧而丟失信心。

面試環(huán)節(jié)

?

關(guān)于面試題的答案講解，本文將不做非常詳細(xì)的分析。

?

自我介紹

基本面試這是必然的開場，筆者在公司也稍微面試過不少人吧，高峰期基本每晚都要面試一兩個，聽過了各種各樣的開場介紹。這里簡單說下筆者作為面試官比較喜歡和不喜歡的介紹吧。

我叫 xxx，畢業(yè)于(目前就職于) xxx，來自 xxx，技術(shù)棧 xxxx，喜歡 xxx。。。

類如上述的自我介紹，其實(shí)很多都在簡歷上寫明了，甚至很多是我并不關(guān)心的。

我只關(guān)心你能力和我職位的匹配度。所以諸如此類的簡介，筆者更是希望能夠簡短。筆者作為面試的時候，更喜歡聽到的是「我做過什么牛 x 的項(xiàng)目，這個項(xiàng)目有多難，如何攻克的，以及這個項(xiàng)目做完你收獲到了什么，甚至這個項(xiàng)目做完，該項(xiàng)目對團(tuán)隊、部門甚至公司而言，帶來哪方面的提高」。或者可以介紹你在校「獲得了什么獎項(xiàng)，意味著什么、成長了什么?！?/strong>

如上的介紹，其實(shí)就能夠讓面試官眼前一亮，因?yàn)槟芸吹侥銓@個項(xiàng)目的思考、以及這個項(xiàng)目對你的歷練。

劃重點(diǎn)：我們都知道下一個面試環(huán)節(jié)是知識點(diǎn)提問，所以這里的難，可以適當(dāng)?shù)膾伋黾夹g(shù)的難點(diǎn)在哪。「引起面試官的興趣，從而去提問」 。「面試的節(jié)奏我們要學(xué)會自己掌握，別老是被面試官牽著走」

走到這一步，基本有如下兩個分支：

• 面試官對你的這個項(xiàng)目(獎項(xiàng))比較感興趣，會接著問下去，然后問其中技術(shù)的實(shí)現(xiàn)細(xì)節(jié)。（所以這里自己千萬不要吹牛x，然后補(bǔ)不回來）
• 面試官不是很感興趣（很可能是面試官的技術(shù)盲區(qū)，比如我就這樣。哈哈），然后問自己準(zhǔn)備的一些面試題。。。

這里需要說明的，在筆者面試應(yīng)聘 p7 的同學(xué)的時候，會更喜歡到你對這個項(xiàng)目的思考，諸如會問一下題目：

• 現(xiàn)有的技術(shù)方案、行業(yè)對比
• 你覺得你做過的項(xiàng)目或發(fā)起過的優(yōu)化里面最有價值是的哪個？為什么？對業(yè)務(wù)的幫助是什么？
• 你做的東西可以復(fù)用于其他團(tuán)隊嗎？
• 橫向與市場已知的 xxx 解決方案，你們的優(yōu)勢在哪？

?

上述的這些思考，其實(shí)目前我也達(dá)不到。但是，這不一定要求面試官一定要達(dá)到這個水準(zhǔn)，項(xiàng)目的思考維度也還沒有這么的深入。沒吃過豬肉還沒見過豬跑嘛。

?

面試題

如上面所說的，如果面試中應(yīng)聘者說到了筆者比較感興趣的技術(shù)方向、或者技術(shù)點(diǎn)，那么筆者就會直接問下去。如果說到了筆者不是很擅長的技術(shù)區(qū)域，那么我筆者就不會追問技術(shù)細(xì)節(jié)了。

整體一面的時間大概也就半小時左右，加上前后的介紹，基本題目就四五題吧。筆者面試沒有固定的題目，通常根據(jù)應(yīng)聘者的經(jīng)歷而問。這里舉例下在上面的介紹毫無亮點(diǎn)可言的時候（基本涼了一半），筆者喜歡問的一類題目吧。

基礎(chǔ)題目考核

JavaScript 面向?qū)ο蟮睦斫夂透形?span style="display: none;">

基本剛開始問題的題目都是比較簡單和考核基礎(chǔ)的，比如有的時候筆者第一題一般問：** JavaScript 面向?qū)ο蟮睦斫夂透形?*、題目非常的開放。給了你足夠大的舞臺表現(xiàn)自己。

說下這題在筆者面試別人時候的心里打分點(diǎn)：

• 首先，我肯定是需要你告訴我，什么是面向?qū)ο?，面向?qū)ο笥心男┨攸c(diǎn)，以及這些特點(diǎn)的解釋。
• JavaScript 如何實(shí)現(xiàn)這些特點(diǎn)，比如封裝、繼承、多態(tài)。如果關(guān)于上述三點(diǎn)，你能夠解釋到有多少種實(shí)現(xiàn)方式、優(yōu)缺點(diǎn)是什么。以及近幾年流行的解決方案是什么。這就是「加分」 ，比如對于繼承吧。類式繼承、構(gòu)造函數(shù)繼承、組合繼承、原型繼承、寄生組合繼承等等，說出大概的實(shí)現(xiàn)思路和優(yōu)缺點(diǎn)，再介紹下 extends 或者 mixin 的實(shí)現(xiàn)甚至你可以衍生到JavaScript 的模塊化發(fā)展甚至到為什么現(xiàn)在 TS 如此流行。那么可以說到這一環(huán)節(jié)解答的就非常棒了。
• 回答完 JavaScript 的面向?qū)ο?，是不是可以從此衍生下為什么需要面向?qū)ο?。以及?dāng)先對于軟件設(shè)計的高內(nèi)聚、低耦合的思考？來個對此題一個提綱挈領(lǐng)的總結(jié)？

綜上所述，其實(shí)不難看出，越是這種基礎(chǔ)且開放的題目，可以是一個陷阱，更可以是一個機(jī)會。因?yàn)橐坏李}真的可以全方面的感受到應(yīng)聘的基礎(chǔ)是否扎實(shí)。

后面的題目的筆者基本喜歡根據(jù)應(yīng)聘者的上一題的回答中甚至應(yīng)聘者隨口說到的知識點(diǎn)，繼續(xù)追問。但是限于此文為分享文章，這種形式很難演示。下面就繼續(xù)介紹下后續(xù)的題目。

瀏覽器輸入 url 到頁面的展現(xiàn)，具體發(fā)生了些什么可以展開說下么

斷于上述題目知識點(diǎn)。第二個問題筆者通常喜歡問一些考察可深可淺的一些題目，注入：瀏覽器輸入 url 到頁面的展現(xiàn)，具體發(fā)生了些什么可以展開說下么

基本回答都是

• 在瀏覽器地址欄輸入URL
• 瀏覽器解析URL獲取協(xié)議，主機(jī)，端口，path
• 瀏覽器組裝一個HTTP（GET）請求報文
• 瀏覽器獲取主機(jī)ip地址
• 打開一個socket與目標(biāo)IP地址，端口建立TCP鏈
• TCP鏈接建立后發(fā)送HTTP請求
• 服務(wù)器將響應(yīng)報文通過TCP連接發(fā)送回瀏覽器，瀏覽器接收HTTP響應(yīng)
• 根據(jù)資源類型決定如何處理（假設(shè)資源為HTML文檔）
• 解析HTML文檔，構(gòu)件DOM樹，下載資源，構(gòu)造CSSOM樹，執(zhí)行js腳本
• 最后展現(xiàn)出來給用戶

基本如果應(yīng)聘者只回到了上述步驟，很多關(guān)鍵步驟（前端應(yīng)該了解的知識點(diǎn)）沒有提及，那么基本涼涼一半了。這里簡述下筆者感覺，這其中你應(yīng)該具體展開說明的。

• 瀏覽器發(fā)送請求，是否需要查看緩存？是否請求資源在緩存中并且新鮮，跳轉(zhuǎn)到轉(zhuǎn)碼步驟？如果資源已經(jīng)緩存，是否新鮮？如何檢查？怎么判斷、http1.0 和 http1.1 的區(qū)別是什么，這些字段的優(yōu)先級是怎么樣子的。
• 瀏覽器解析 url 獲取協(xié)議，過程是什么？DNS 遞歸查詢可否介紹下？
• 建立 TCP 鏈接的三次握手是否可以介紹下
• 服務(wù)器接受到請求，是否需要檢查緩存？檢查什么字段？什么樣的緩存會需要服務(wù)端檢查？
• 服務(wù)端發(fā)送 TCP 鏈接，瀏覽器接受 http 相應(yīng)后，根據(jù)什么來決定是否需要關(guān)閉連接？關(guān)閉 TCP 的四次揮手是什么？
• 瀏覽器是否需要檢查狀態(tài)碼，有哪些狀態(tài)碼？（筆者高頻考碼：304、200）
• 在解析的時候，具體如何解析、是否有順序。（重繪重排高頻考題就在這里）
• 總結(jié)如上、我們是否可以給出一些基本的網(wǎng)站優(yōu)化手段？？？

「上述題目的每一步展開，都將會是下一個面試題?！?/strong>

具體的知識點(diǎn)介紹，不是此文主要講解內(nèi)容，這里就不多言了。

解決問題能力考查

其實(shí)上面兩(大)題后，基本基礎(chǔ)、網(wǎng)絡(luò)、瀏覽器、js 執(zhí)行、優(yōu)化都已經(jīng)考核到。對于 p6 的一個 job model 還有一項(xiàng)是對于問題的解決能力。

其實(shí)這里一般都是出一道問題，然后你給出一些你的實(shí)現(xiàn)思路，這里就不做距離了，因?yàn)樘_放！

比如：

• 諸如我現(xiàn)在需要監(jiān)聽那種頻繁發(fā)生的事件，你有那些優(yōu)化么
• 埋點(diǎn)的實(shí)現(xiàn)思路
• 非遞歸的二叉樹遍歷
• 文件上傳斷點(diǎn)、續(xù)傳
• 設(shè)計模式的應(yīng)用場景考核

等等

切記：這類題目，一定不要說不會、不知道。哪怕真的不知道，也要給出大概的解答思路和實(shí)現(xiàn)思路。哪怕不對！「一定要講出自己的思考過程」。

進(jìn)階題目考核

在面試 p6、p7 的時候，一般后面還會跟一道進(jìn)階題目（根據(jù)應(yīng)聘者具體情況而定）。

沒有開放性的答案其實(shí)，所以這里筆者就不細(xì)述有哪些思考和想聽到的點(diǎn)了。只要你說的對就行其實(shí)

• VUE 雙向綁定原理
• VUE/React diff 算法的大概思路
• 現(xiàn)有的狀態(tài)管理的實(shí)現(xiàn)
• webpack中 loader、plugin 的實(shí)現(xiàn)思路
• 簡易版 webpack 的實(shí)現(xiàn)
• KOA、Express 中間件的實(shí)現(xiàn)
• React fiber 的理解和原理
• 前端構(gòu)建工具的、vue-cli、create-react-app 的原理和實(shí)現(xiàn)思路
• 等等。。。。。

結(jié)束環(huán)節(jié)

半小時，基本只能問四五題這樣，說實(shí)話，題目的考核大概能占參考度的 90%，還有 10%可能就是言語和感覺了。那么對于結(jié)束的時候，說下不好的感覺：

?

最后，你有什么要問我的嘛

?

?

我想咨詢下，我能不能通過這次面試，我對工資無所謂，我愿意學(xué)習(xí)，特別希望能夠進(jìn)入 xxx 跟大牛一起學(xué)習(xí)，歷練。

?

講真，這類的話聽過很多次了。如果在看的你也命中了這個。我想說，其實(shí)公司招我們進(jìn)來，是搬磚的，不是給我們學(xué)習(xí)的。學(xué)習(xí)是你自己的需要，不是為了公司學(xué)的。說這類的話，太給自己降價了！

說說筆者應(yīng)聘的時候，一般結(jié)束的你有什么要問我的嘛的回答

• 我比較在意自己的技術(shù)方向和職業(yè)發(fā)展，能夠簡單介紹下如果我面試上貴公司職位，我以后的工作內(nèi)容和在團(tuán)隊的價值么？
• 想了解下公司對于前端的重視程度以及在大前端時代，團(tuán)隊對于技術(shù)的思考

大概就是筆者會問，我這個職位是干嘛的？在公司有么有價值？跟我自己的職業(yè)、技術(shù)規(guī)劃是否吻合？

這樣！面試官會覺得，恩~這小子有思考~~~再者，如果面試官給你介紹的非常非常詳細(xì)，那么其實(shí)從側(cè)面就說明，他對你很滿意了！已經(jīng)到了面試官開始極力展現(xiàn)自己的時候了~~

就比如：醫(yī)生，我老婆懷的是男孩還是女孩啊？「不能問！?。∵@是政策」

但是：醫(yī)生，我這孩子出生我給他起名字叫王剛蛋你看合適不？_恩。。。不太合適_ 基本可能懷的是女孩了

最后

其實(shí)我想說，面試，不僅僅看運(yùn)氣和實(shí)力，其實(shí)有的時候也是一場心理的博弈。

你的每一次回答都可能引出下一道面試題。有意識無意識的留點(diǎn)回答漏斗也是一種帶節(jié)奏的方式。

如果面試官提出一個問題，你都抓不住他的考點(diǎn)，那基本要涼~~

其次，我想說，上面我說的開放性基礎(chǔ)題的回答，大家千萬不要誤解為「回答的多就是好」。千萬不要一個題目回答了半個小時，沒必要！「點(diǎn)到為止」，證明自己考慮到、有這個知識儲備即可，不要回答的讓面試官都煩了。

然后，對于如何拿到面試的敲門磚：簡歷。沒有那么多可說，也不是沒得說。

簡而言之：面試官篩選簡歷是非常枯燥的一件事情。基本是一眼帶過，不會在簡歷上撇超過 40s。

所以：

• 簡歷要整潔，簡潔、簡潔。真的別密密麻麻都是字，沒那么多耐心看的。
• 重點(diǎn)突出，可以加粗或者顏色標(biāo)識。比如：「自己開源類 React 框架」
• 簡歷是一份介紹更是一個成績單，既然是成績單，成績一定要吐出：「開源項(xiàng)目 15k star」 、 「推動公司技術(shù)建設(shè)」 等等
• 不得不說，名校和大廠的背景。很吸睛。

最后，秋招開始了，祝福所有找工作的同學(xué)，都能順順利利拿到 offer！加油~

學(xué)習(xí)交流

關(guān)注 每日獲取好文推薦。還可以入群，一起學(xué)習(xí)交流呀~~