進(jìn)入大廠的面試經(jīng)驗(yàn)詳細(xì)總結(jié)（P7 拿 offer）

個(gè)人近期面試情況

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

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

最終，就在三月9號，餓了么剛給我確認(rèn)了p7的職位。也算自己到了另一個(gè)奮斗的階段了。對自己的經(jīng)歷，做一個(gè)面試總結(jié)。

我的面試準(zhǔn)備

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

1、基礎(chǔ)知識的準(zhǔn)備

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

因?yàn)檫@一塊的掌握程度，就決定了一個(gè)前端工程師，能不能達(dá)到高級的程度。

拋磚引玉，比如面向?qū)ο蟆⒃玩湣㈤]包、es6、html5、css3，它們是前端的基礎(chǔ)，需要爛熟于心。比如連閉包都解釋不明白的，真的該好好下功夫在這些基礎(chǔ)上。。

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

這一塊，能問的問題幾乎是無窮多的，哪怕同一個(gè)知識點(diǎn)，問法不一樣，不真正理解的話，實(shí)在是過不去高級那一關(guān)。

2、好的自我介紹

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

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

1、這個(gè)人是不是一個(gè)邏輯清晰的人？

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

3、這個(gè)人能不能很好的表達(dá)自我？

這些問題很重要，按照這個(gè)思路，其實(shí)你反過來就可以向面試官表現(xiàn)自我。

1、學(xué)校、專業(yè)

2、技術(shù)棧

3、職業(yè)履歷

4、最近一家公司的貢獻(xiàn)

千萬不要和面試官說，和產(chǎn)品、后臺很好的配合，完成公司的項(xiàng)目之類。因?yàn)橥耆菑U話！

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

自我介紹的本質(zhì)：用最短的話，向面試官灌輸你的優(yōu)點(diǎn)，并且讓面試官在當(dāng)前大致的范圍內(nèi)考察你。如果你說你熟悉vue，一般面試官都會問vue相關(guān)的多一點(diǎn)，應(yīng)該不會和你死磕react。

3、如何“講故事”

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

比如我，我會說，我之前在公司，做了我們前端的項(xiàng)目標(biāo)準(zhǔn)化工作，做了我們內(nèi)部的組件庫建設(shè)，集成了我們自己的腳手架工具。

這是我覺得，我和其他大多數(shù)前端不一樣的點(diǎn)，面試官的焦點(diǎn)就會集中在，什么是項(xiàng)目標(biāo)準(zhǔn)化，定義了哪些緯度的標(biāo)準(zhǔn)？組件庫的建設(shè)，解決了什么問題？腳手架的出現(xiàn)，又解決了什么問題？

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

比如，我獨(dú)立承擔(dān)了公司的xxx項(xiàng)目。遇到了哪些挑戰(zhàn)，我如何在不利的條件下成長起來的。

比如，我通過xxx渠道，研究了多少個(gè)項(xiàng)目的架構(gòu)工作。

一定要相信，因?yàn)槟悖裁床虐l(fā)生了變化。其實(shí)大多數(shù)人是一個(gè)被動(dòng)的狀態(tài)，不知道自己有什么用，自己在團(tuán)隊(duì)中的定位，自己的職責(zé)是什么。在工作中，我希望每個(gè)人相信自己的是有用的，然后尋找你可以發(fā)力的點(diǎn)，去做真正的改變。如果你在找工作，那就好好思考，自己確實(shí)在團(tuán)隊(duì)中，承擔(dān)了什么。

面試該注意的點(diǎn)

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

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

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

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

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

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

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

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

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

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

2、學(xué)會傾聽，讓你懂別人

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

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

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

無論是學(xué)會說話，還是學(xué)會傾聽，其實(shí)核心的問題，就是讓雙方的交流，在一個(gè)頻道上，因?yàn)閷τ陬I(lǐng)導(dǎo)，面試面試，其實(shí)就是找同類人！

必會的面試題目

前端一些核心的經(jīng)典問題，感覺永遠(yuǎn)都不會過時(shí)，反正我個(gè)人遇到的頻率非常高，不過個(gè)人不會詳細(xì)解讀這些問題，只做一個(gè)拋磚引玉。

1、前端瀏覽器輸入U(xiǎn)RL后發(fā)生什么？

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

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

比如html文件獲取，它是如何傳輸?shù)模咳绾谓㈡溄拥模咳挝帐帧⑺拇螕]手是什么？http協(xié)議端口是什么？為什么直接能訪問一個(gè)html文件？

....

2、前端性能優(yōu)化？

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

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

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

......

3、前端如何做性能監(jiān)控、異常監(jiān)控？

性能監(jiān)控，異常監(jiān)控，基本在小公司，是沒有實(shí)踐基礎(chǔ)的，可是在差不多的大廠中，他們會關(guān)注這個(gè)問題。

首先是性能監(jiān)控，應(yīng)該從這么幾個(gè)緯度來說：一個(gè)是http的方面，在后端log日志，流入kafka，然后在kafka消費(fèi)數(shù)據(jù)，可以準(zhǔn)確的監(jiān)控到哪些接口有異常？異常率是多少？另一個(gè)方面，是前端的 Performance 的api，在用戶的實(shí)時(shí)使用的過程中，就會產(chǎn)生數(shù)據(jù)，這樣就能實(shí)現(xiàn)頁面性能監(jiān)控。

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

最后一個(gè)是前端sdk埋點(diǎn)，直接開發(fā)一個(gè)js文件，統(tǒng)計(jì)用戶的UV/PV分析等等，比如用戶的轉(zhuǎn)化率之類的，這一塊個(gè)人沒有什么特別的實(shí)踐，各位可以在網(wǎng)上百度看看。

4、前端安全方面

這是一個(gè)高級前端必問的問題，說的是一個(gè)前端對整個(gè)前端安全的系統(tǒng)認(rèn)知。

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

sql注入，要理解sql注入的場景，它的原理是什么，當(dāng)前的數(shù)據(jù)庫的解決方案是什么？

xss攻擊，常見的攻擊場景，什么類型的網(wǎng)站容易被xss攻擊，整個(gè)流程的原理是什么？

csrf攻擊，其實(shí)就是一個(gè)釣魚網(wǎng)站，要理解為什么會收到攻擊，應(yīng)該采取什么策略進(jìn)行防御。

cookie安全，要理解為什么用token，優(yōu)勢等。

密碼安全，主要是用戶登陸，用戶數(shù)據(jù)提交，加密，存入數(shù)據(jù)庫的一整個(gè)流程。

其次，其實(shí)還有http和https的問題等等。

5、http、https、http1.0、1.1、2.0、3.0的區(qū)別

http這一塊，其實(shí)是一個(gè)非常復(fù)雜的體系，要深挖的東西特別多。

http進(jìn)行非對稱加密，得到https，這個(gè)過程是怎么樣的？什么是CA證書？整個(gè)網(wǎng)站進(jìn)行驗(yàn)證的流程是什么？

http各個(gè)版本的區(qū)別是什么？解決了哪些問題？比如頭部縮減的優(yōu)化，那你了解這個(gè)優(yōu)化的具體策略嗎？縮減了什么？又增加了什么？要深挖細(xì)節(jié)。

http的底層協(xié)議？tcp/ip協(xié)議的三次握手，四次揮手，具體是怎么通信的？什么叫滿啟動(dòng)？甚至延伸到整個(gè)網(wǎng)絡(luò)協(xié)議的領(lǐng)域，什么是socket？udp是干什么的？dns解析？ftp？以及不常用的其他協(xié)議？

如果再進(jìn)行擴(kuò)展，計(jì)算機(jī)網(wǎng)絡(luò)的7層結(jié)構(gòu)？每一層做了什么事情？計(jì)算機(jī)組成原理，如何解析我們的代碼等等。

......

深度解讀

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

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

1、源碼

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

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

你也要懂得在這個(gè)過程中，混入mixins、$options，vuex、router他們各自如何通過這些api，實(shí)現(xiàn)各自的功能？

源碼的緯度，可以試著從vue的體系、react體系、loadash、zepto這些庫中下手，因?yàn)槲覀兙褪菑倪@些框架以及js庫，走過來的。

2、可視化

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

上面是個(gè)人想要研究的關(guān)于可視化的一個(gè)個(gè)主題，雖然可視化不是本人的專長，可是因?yàn)橹霸诘貓D相關(guān)的公司待過，也算是沾了可視化的一點(diǎn)光。在面試餓了么的過程中，就提到了一個(gè)特殊的使用場景，就是關(guān)于地圖的線路繪制，大批量數(shù)據(jù)的推送，以及性能相關(guān)的問題。

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

3、跨平臺

flutter、react-native、weex、electron

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

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

對于多端框架，更重要的是理解層面的東西，比如electron，就是要理解它的本質(zhì)，就是使用node塑造一個(gè)桌面應(yīng)用的容器，然后內(nèi)部是一個(gè)webview。

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

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

4、工程化

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

拋磚引玉，提一些我們可以探討的點(diǎn)。

1、前端項(xiàng)目標(biāo)準(zhǔn)？

表現(xiàn)為庫的選擇？文件劃分目錄的規(guī)定？pc、mobile多端實(shí)踐？ssr方案集成？

2、組件庫集成？

組件庫建設(shè)的目的？npm包的發(fā)布？

3、腳手架工具？

webpack編譯優(yōu)化？webpack打包構(gòu)建優(yōu)化？自我腳手架的工具使用？

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

5、前端性能監(jiān)控？前端異常監(jiān)控？前端用戶埋點(diǎn)sdk？

6、rap？jenkins？

5、混合app交互

jsBridge、性能提升方面、x5內(nèi)核

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

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

android和h5的交互？細(xì)節(jié)和ios有什么不同？

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

騰訊x5內(nèi)核的優(yōu)勢是什么？我們用了x5內(nèi)核，可以避免什么問題？

6、設(shè)計(jì)模式

最后談?wù)勗O(shè)計(jì)模式，算是一個(gè)高頻的面試題。

我們至少要知道以下這些設(shè)計(jì)模式的功能、代碼實(shí)現(xiàn)、使用場景問題。

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

最后祝大家面試愉快。這么好的文章快點(diǎn)個(gè)在看讓更多小伙伴看到吧！

分享前端好文，點(diǎn)亮?在看