此文轉載自 https://juejin.im/post/5e664bdd6fb9a07cd80f3192，作者：mapbar_front

?

個人近期面試情況

今年二月以來，我的面試除了一個用友的，基本其他都被斃了，可以說是非常殘酷的。其中有很多自己覺得還面的不錯的崗位，比如百度、跟誰學、好未來等公司。說實話，打擊比較大。

情況基本上是從三月開始好起來的，這個時間點，可能疫情快過去了，國家也開啟了接近40萬億的基礎建設計劃，在這個時間斷，面試的幾個代表性的公司，包括騰訊、餓了么、寶寶樹、曠世科技等等，基本都成了。

最終，就在三月9號，餓了么剛給我確認了p7的職位。也算自己到了另一個奮斗的階段了。對自己的經歷，做一個面試總結。

我的面試準備

面試其實我是屬于一邊面試，一邊準備的過程，但是無論如何，一定要做到基礎扎實、比較好的自我介紹，以及描述自己的職業故事。

1、基礎知識的準備

這一塊，其實很重要，很多問題，必須輕松的理解，就和呼吸一樣自然。

因為這一塊的掌握程度，就決定了一個前端工程師，能不能達到高級的程度。

拋磚引玉，比如面向對象、原型鏈、閉包、es6、html5、css3，它們是前端的基礎，需要爛熟于心。比如連閉包都解釋不明白的，真的該好好下功夫在這些基礎上。。

對于前端框架，基本的特性，生命周期、組件、傳值交互、路由、redux、vuex等等，基本都沒有使用上的疑惑。比如面試官可能問，actions 和 mutations 有什么區別之類的。

這一塊，能問的問題幾乎是無窮多的，哪怕同一個知識點，問法不一樣，不真正理解的話，實在是過不去高級那一關。

2、好的自我介紹

自我介紹，很多人其實做的不好，其實這是面試官對面試者的第一印象。

如果我是一個面試官，我基本能從自我介紹中，得知這么一些信息：

1、這個人是不是一個邏輯清晰的人？

2、這個人的性格是積極向上的，還是稍顯自卑的？

3、這個人能不能很好的表達自我？

這些問題很重要，按照這個思路，其實你反過來就可以向面試官表現自我。

1、學校、專業

2、技術棧

3、職業履歷

4、最近一家公司的貢獻

千萬不要和面試官說，和產品、后臺很好的配合，完成公司的項目之類。因為完全是廢話！

自我介紹一般是兩分鐘左右，你確定你能兩分鐘，把上面四個問題給面試官講清楚？并且你還要突出一些重點，比如說，我比較擅長react，做過XXX優化之類，有過XX年的項目經驗之類。

自我介紹的本質：用最短的話，向面試官灌輸你的優點，并且讓面試官在當前大致的范圍內考察你。如果你說你熟悉vue，一般面試官都會問vue相關的多一點，應該不會和你死磕react。

3、如何“講故事”

這是一個比較重要的點。重要的是，這個故事要有看點，表示了你和其他人不一樣在哪。

比如我，我會說，我之前在公司，做了我們前端的項目標準化工作，做了我們內部的組件庫建設，集成了我們自己的腳手架工具。

這是我覺得，我和其他大多數前端不一樣的點，面試官的焦點就會集中在，什么是項目標準化，定義了哪些維度的標準？組件庫的建設，解決了什么問題？腳手架的出現，又解決了什么問題？

任何一個人，都是唯一的，任何一個項目，也是不同的，作為面試者的我們，重要的是，要把這些重點要素提取出來，形成自己的“故事”。

比如，我獨立承擔了公司的xxx項目。遇到了哪些挑戰，我如何在不利的條件下成長起來的。

比如，我通過xxx渠道，研究了多少個項目的架構工作。

一定要相信，因為你，什么才發生了變化。其實大多數人是一個被動的狀態，不知道自己有什么用，自己在團隊中的定位，自己的職責是什么。在工作中，我希望每個人相信自己的是有用的，然后尋找你可以發力的點，去做真正的改變。如果你在找工作，那就好好思考，自己確實在團隊中，承擔了什么。

面試該注意的點

面試的核心是什么？一定要記住，那就是溝通！而我們做技術的，其實最大的硬傷，多半是溝通，至少對于我自己，就是有這個問題的。

溝通的意義，一方面，是你要讓別人聽懂你表達的東西；另一方面，是你要聽懂別人的話。

1、說話得注意，讓別人懂你

直接舉個例子，我在面試美團的時候，說話一直結巴，其實我也不知道為什么，平時說話都是正常的，在特殊的場合，就出現這個問題，雖然把話說完了，但是顯然，美團第一面，就pass了。當時是在家中視頻面試，我的室友，不好意思直接說我，就給我錄音，我聽了10分鐘左右，確實不盡人意。。

我聽了10分鐘的錄音，給我自己的評價就是，說話都費勁，以后一起工作，那還不把我累死。

以后，所有的面試，我都把關注點，從我如何說，變成了，如何讓別人很愉快的聽懂我說的話。

第一、我向面試官說的所有的話，都是成體系的。

第二、我向面試官說的所有的話，都是邏輯清晰的。

第三、我向面試官說的所有的話，我都先停頓兩秒以上，思考清楚了再說話。

當然了，這一塊，可能是我個人的特例，但是基本的語句通暢、邏輯清晰，在程序員中，做到的應該不多。

2、學會傾聽，讓你懂別人

很多情況下，其實面試官在表達的時候，很可能我們自己沒聽懂面試官的意思，這個時候，就會特別的尷尬。

我一般會這么做，我會說，剛才您說的問題，我來描述一遍xxxxxxx。描述完之后，你再問面試官，您表達的是這個意思嗎？一般而言，面試官會進行更詳細的舉例和描述。

我在面試餓了么的時候，二面的面試官，一開始就問了一個業務比較復雜的問題，所以一開始，我其實完全沒明白，面試官說的是什么東西，但是我通過自己的方式，引導面試官說的更多，然后到某個程度，達成一個共識，這就是比較愉快的一個交流。

無論是學會說話，還是學會傾聽，其實核心的問題，就是讓雙方的交流，在一個頻道上，因為對于領導，面試面試，其實就是找同類人！

必會的面試題目

前端一些核心的經典問題，感覺永遠都不會過時，反正我個人遇到的頻率非常高，不過個人不會詳細解讀這些問題，只做一個拋磚引玉。

1、前端瀏覽器輸入URL后發生什么？

普通前端會回答，dns解析，獲取html文件，解析DOM，渲染頁面這么一個流程。

其實過程復雜的很，比如一個dns解析階段，它分為哪幾步？解析的ip一定是一樣的嗎？每次都會進行dns解析嗎？可能還需要了解cdn托管的一些問題。

比如html文件獲取，它是如何傳輸的？如何建立鏈接的？三次握手、四次揮手是什么？http協議端口是什么？為什么直接能訪問一個html文件？

....

2、前端性能優化？

大多數前端，基本會說，減少http請求、壓縮合并js以及css、圖片懶加載的技術、防止回流和重繪、css放頭部、js放底部。

以上的說法對嗎？完全正確！可是在這個過程中，我覺得缺少一種思考。

比如減少http請求，可以從哪些維度上減少呢？比如合并http請求？比如合并資源？比如圖片懶加載？http還有其他維度的優化嗎？cookie優化？http請求和資源加載的區分優化？在webview中呢？和普通的瀏覽器的優化技術，又有什么區別？

......

3、前端如何做性能監控、異常監控？

性能監控，異常監控，基本在小公司，是沒有實踐基礎的，可是在差不多的大廠中，他們會關注這個問題。

首先是性能監控，應該從這么幾個維度來說：一個是http的方面，在后端log日志，流入kafka，然后在kafka消費數據，可以準確的監控到哪些接口有異常？異常率是多少？ 另一個方面，是前端的 Performance 的api，在用戶的實時使用的過程中，就會產生數據，這樣就能實現頁面性能監控。

前端異常監控，首先要明白什么是異常，html、css這些東西，無非就是一個展示的問題，還不至于讓頁面白屏的事情發生，所謂的異常監控，其實就是js的異常監控。在前端領域，window.onerror是進行js異常的監聽事件。并且要知道，它在IE中，是不支持的，所以IE的監控，要使用try catch 的方式進行捕獲，比如我們可能還要注意到，遇到異步的時候，這個如何做try catch的異常捕獲。

最后一個是前端sdk埋點，直接開發一個js文件，統計用戶的UV/PV分析等等，比如用戶的轉化率之類的，這一塊個人沒有什么特別的實踐，各位可以在網上百度看看。

4、前端安全方面

這是一個高級前端必問的問題，說的是一個前端對整個前端安全的系統認知。

我們必須理解這么幾個方面：sql注入、xss、csrf、cookie安全、密碼安全等等。

sql注入，要理解sql注入的場景，它的原理是什么，當前的數據庫的解決方案是什么？

xss攻擊，常見的攻擊場景，什么類型的網站容易被xss攻擊，整個流程的原理是什么？

csrf攻擊，其實就是一個釣魚網站，要理解為什么會收到攻擊，應該采取什么策略進行防御。

cookie安全，要理解為什么用token，優勢等。

密碼安全，主要是用戶登陸，用戶數據提交，加密，存入數據庫的一整個流程。

其次，其實還有http和https的問題等等。

5、http、https、http1.0、1.1、2.0、3.0的區別

http這一塊，其實是一個非常復雜的體系，要深挖的東西特別多。

http進行非對稱加密，得到https，這個過程是怎么樣的？什么是CA證書？整個網站進行驗證的流程是什么？

http各個版本的區別是什么？解決了哪些問題？比如頭部縮減的優化，那你了解這個優化的具體策略嗎？縮減了什么？又增加了什么？要深挖細節。

http的底層協議？tcp/ip協議的三次握手，四次揮手，具體是怎么通信的？什么叫滿啟動？甚至延伸到整個網絡協議的領域，什么是socket？udp是干什么的？dns解析？ftp？以及不常用的其他協議？

如果再進行擴展，計算機網絡的7層結構？每一層做了什么事情？計算機組成原理，如何解析我們的代碼等等。

......

深度解讀

這一部分，我大致分了幾個模塊，源碼、可視化、跨平臺、工程化、混合app交互、設計模式，其實每一個都值得前端去研究。

作為個人，其實也算是我定了幾個方向，自己以后要努力的地方。

1、源碼

最好要讀一讀某個框架的源碼，最不濟，也看看別人寫的源碼解讀的文章，現在的趨勢，基本是以react、vue為主。

以vue為例，你得懂vue框架的整個周期，比如vue的初始化，發生了什么？vue的模板解析，是如何進行的？如何形成AST？render函數的生成？什么是依賴收集？什么是patch？數據更新策略等等。

你也要懂得在這個過程中，混入mixins、$options，vuex、router他們各自如何通過這些api，實現各自的功能？

源碼的維度，可以試著從vue的體系、react體系、loadash、zepto這些庫中下手，因為我們就是從這些框架以及js庫，走過來的。

2、可視化

地圖、echats、canvas、webgl、d3.js、three.js！

上面是個人想要研究的關于可視化的一個個主題，雖然可視化不是本人的專長，可是因為之前在地圖相關的公司待過，也算是沾了可視化的一點光。在面試餓了么的過程中，就提到了一個特殊的使用場景，就是關于地圖的線路繪制，大批量數據的推送，以及性能相關的問題。

以后，普通前端的技能，比如vue、react等等，大家都會，沒有什么差異化的競爭，前端市場趨于飽和，更需要的是在某些方面專精的人才。

3、跨平臺

flutter、react-native、weex、electron

這是目前市場上，針對跨平臺的一些解決方案，每一個框架，大致方向上，都解決了一定程度上的多端開發能力。

首先需要明白的是，多端開發并不是萬能的，也有一些我們開發中的痛點，無論rn、還是weex，都是給前端提供一些特殊的組件，實現開發能力。但是業務是多樣的，需要也是多變的，對于沒有提供的組件，或者api，我們前端開發人員，有些功能是沒辦法實現的。

對于多端框架，更重要的是理解層面的東西，比如electron，就是要理解它的本質，就是使用node塑造一個桌面應用的容器，然后內部是一個webview。

從面試的角度，面試官重視的不是這個東西怎么用的問題，一般會問一些內部原理，比如小程序和公眾號的對比？底層實現方式？比如rn的編譯解析過程是什么？如何把js編譯為真正的ios、android應用。比如flutter的渲染機制，和rn這些渲染方式有什么不同？和普通的web網頁又有什么區別？

跨平臺技術，flutter最近比較火，從找工作的角度，其實可以學學。electron這些桌面應用，本身不難，但是學過和沒有學過，其實本身就是一種差異。

4、工程化

工程化這一塊，是個人比較感興趣的一個方向。自己也做過一些實踐，但是只能說是工程化中的冰山一角。

拋磚引玉，提一些我們可以探討的點。

1、前端項目標準？

表現為庫的選擇？文件劃分目錄的規定？pc、mobile多端實踐？ssr方案集成？

2、組件庫集成？

組件庫建設的目的？npm包的發布？

3、腳手架工具？

webpack編譯優化？webpack打包構建優化？自我腳手架的工具使用？

4、git提交規范commit-msg？代碼檢查規范eslint？

5、前端性能監控？前端異常監控？前端用戶埋點sdk？

6、rap？jenkins？

5、混合app交互

jsBridge、性能提升方面、x5內核

算是一個小的模塊吧，我們得明白，jsBridge是如何做到h5和原生應用的交互？

ios和h5的交互通信？window.webkit?是否同步？

android和h5的交互？細節和ios有什么不同？

webview在性能提升方面，可以做哪些？什么是離線包？

騰訊x5內核的優勢是什么？我們用了x5內核，可以避免什么問題？

6、設計模式

最后談談設計模式，算是一個高頻的面試題。

我們至少要知道以下這些設計模式的功能、代碼實現、使用場景問題。

單例模式、原型模式、工廠模式、觀察者模式、策略模式、代理模式等等。

最后祝大家面試愉快。

總結

以上是生活随笔為你收集整理的进入大厂的面试经验（P7）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。