分享一位同學(xué)的阿里、百度前端面經(jīng)
【第一部分 面試前的準(zhǔn)備】
從決定找工作開始，我其實(shí)經(jīng)歷過(guò)一系列思想斗爭(zhēng)，最開始想的是，等自己完全準(zhǔn)備充分之后，再開始投簡(jiǎn)歷面試。然而，由于惰性，我發(fā)現(xiàn)自己很難判斷什么時(shí)候是完全準(zhǔn)備好的時(shí)候。
這次換工作的第一次面試，當(dāng)時(shí)的心態(tài)就是報(bào)著學(xué)習(xí)的態(tài)度，總要邁出第一步，也許當(dāng)你放低了自己的預(yù)期，實(shí)際面試過(guò)程中可能也就不會(huì)那么緊張和不自然了，我當(dāng)時(shí)報(bào)的期望就是通過(guò)面試查找自己有哪些不足，以及了解一下市場(chǎng)上的真實(shí)需求。我的目標(biāo)很明確，就是要通過(guò)大廠面試。這次現(xiàn)場(chǎng)面試，讓我一下就找到了狀態(tài)，決定全力準(zhǔn)備面試。
依稀記得當(dāng)時(shí)自己一共投了7家公司，當(dāng)時(shí)有四家公司（此時(shí)沒(méi)有阿里和美團(tuán)）覺(jué)得有意向，還想進(jìn)一步了解我一下，商量之后再和我約時(shí)間。后序接到面試邀約電話時(shí)，我意識(shí)到，自己還需要再準(zhǔn)備一下。這里有個(gè)心得是，當(dāng)你覺(jué)得自己還需要再準(zhǔn)備一下的時(shí)候，可以誠(chéng)懇地和HR或者面試官約定時(shí)間，通常時(shí)間為1周左右，一般面試官也會(huì)理解。你可以說(shuō)自己很珍惜這次面試機(jī)會(huì)，需要再好好準(zhǔn)備一下。
然后，我為接下來(lái)的面試做了如下準(zhǔn)備：
1）閱讀了《瀏覽器原理與工作實(shí)踐》專欄中關(guān)于瀏覽器渲染原理等內(nèi)容
2）當(dāng)時(shí)和一些同學(xué)組織了leetcode刷題小組，大概每周至少3-5題的刷題速度。每周參與線上刷題分享的活動(dòng)，刷題活動(dòng)共持續(xù)大概1-3個(gè)月左右，這期間穿插著面試、總結(jié)和差缺補(bǔ)漏。
基本上以上準(zhǔn)備，讓我面試前增加了不少信心。
【第二部分 面試題目】
美團(tuán)、阿里的具體面試題目，我按照「前端基礎(chǔ)知識(shí)、前端框架的底層原理、性能優(yōu)化、計(jì)算機(jī)網(wǎng)絡(luò)、算法、前端工程化、項(xiàng)目經(jīng)驗(yàn)」這七大部分來(lái)給大家總結(jié)：
前端基礎(chǔ)知識(shí)，主要從前端四大模塊 HTML\CSS\JavaScript\DOM, BOM 方面以及前端框架如React\Vue 等準(zhǔn)備。
CSS：
大概會(huì)有1-2個(gè)問(wèn)題，主要考察各個(gè)常見(jiàn)布局的實(shí)現(xiàn)，比如垂直水平居中、雙欄布局、隨窗口變化的正方形、網(wǎng)格布局等等，一般需要手寫代碼，這里推薦張?chǎng)涡窭蠋煹?CSS 世界，多看幾遍足夠應(yīng)對(duì)面試。
HTML：
在我面試的過(guò)程中這個(gè)問(wèn)的不多，之前 winter 老師有一道面試題，說(shuō)說(shuō)你常用的 HTML 標(biāo)簽，然后由這道問(wèn)題可以延伸出很多細(xì)節(jié)，進(jìn)而考察你對(duì) HTML 知識(shí)的掌握。
JavaScript：
考察 JavaScript 的細(xì)節(jié)問(wèn)題是最多的，通常包括但不限于：
1）JavaScript的基本類型
2）setTimeout、Promise、async/await 三者之間異步解決方案的區(qū)別？
3）宏任務(wù)和微任務(wù)，通常會(huì)給出一段代碼，讓你給出輸出結(jié)果，并解釋？
4）解釋 JavaScript 的單線程模型，以及為什么這樣設(shè)計(jì)？setTimeout 的延時(shí)為何做不到精確？
5）手寫實(shí)現(xiàn) Promise?
6）原型鏈知識(shí)的考察，形式也是給出一段代碼，讓你給出輸出結(jié)果，并解釋?
7）說(shuō)說(shuō)你用過(guò)的 ES6 語(yǔ)法的功能點(diǎn)，對(duì) ES2017-9 的新增功能點(diǎn)是否有關(guān)注？
8）解釋 JavaScript 的閉包？解釋 this 指針指向的問(wèn)題以及常用改變 this 指針指向的函數(shù)? apply, bind, call 三者之間的區(qū)別？
9）JavaScript 繼承的幾種方式及優(yōu)缺點(diǎn)？
10）實(shí)現(xiàn)節(jié)流或者防抖代碼？
11）fetch 是否可以共享 Cookie?兩個(gè) then 分別對(duì)應(yīng)著什么？
12）手寫代碼實(shí)現(xiàn)紅綠燈效果，紅燈3秒，綠燈1秒，黃燈2秒，循環(huán)重復(fù)?
13）JavaScript 是如何操作 Cookie 的？
DOM API：
這方面也很少被問(wèn)到，印象中有這幾道：
1）如何翻轉(zhuǎn) DOM？冒泡和捕獲機(jī)制，實(shí)際應(yīng)用有哪些？
2）冒泡和捕獲機(jī)制，以及實(shí)際應(yīng)用？
前端框架的底層原理
我們以 React 為例，經(jīng)常會(huì)考察內(nèi)容包括：
1）setState 的內(nèi)部實(shí)現(xiàn)？
2）什么是虛擬 DOM，引入虛擬 DOM 的目的，虛擬 DOM 一定能解決性能問(wèn)題么？
3）React Hooks 有哪些了解？
4）react redux 的底層原理？如何完成異步請(qǐng)求？介紹自己常用哪些 redux 中間件？以組合函數(shù)的方式手寫代碼實(shí)現(xiàn)中間件的級(jí)聯(lián)功能？
5）react 的 diff 算法了解么？
6）react 的 fiber 算法了解么？
7）react pureComponent 和 Component 有何區(qū)別？
8）react 的生命周期，新版和舊版都需要了解
9）react 的單向數(shù)據(jù)流如何理解？
10）如何設(shè)計(jì)組件？
11）react memo？
12）react 無(wú)盡列表是如何實(shí)現(xiàn)的？
性能優(yōu)化
1）瀏覽器的渲染原理是一定會(huì)被問(wèn)到的？
2）瀏覽器輸入一個(gè) url 之后的過(guò)程，以及過(guò)程中應(yīng)用了哪些緩存，如何優(yōu)化？
3）script 標(biāo)簽和 link 標(biāo)簽的先后順序?qū)?yè)面加載的影響？
4）async 和 defer 的區(qū)別？
5）react native（因?yàn)槲业暮?jiǎn)歷中有寫到使用過(guò) RN）有哪些坑？
計(jì)算機(jī)網(wǎng)絡(luò)
1）解釋 TCP/IP 的三次握手和四次揮手？
2）解釋跨域問(wèn)題以及前端常用的解決方案？
3）CORS 的細(xì)節(jié)，哪些是簡(jiǎn)單請(qǐng)求？哪些是非簡(jiǎn)單請(qǐng)求？
4）解釋 HTTPS? 解釋 HTTP/2？
5）HTTP 報(bào)文的格式？
算法
1）手寫冒泡排序？
2）給定兩組數(shù)，分別以鏈表方式存儲(chǔ)，求和？注意進(jìn)位
3）數(shù)組去重？
4）微信紅包是如何實(shí)現(xiàn)的？
5）給定一組數(shù)，求和函數(shù)是帶延時(shí)的網(wǎng)絡(luò)請(qǐng)求，如何在最快的時(shí)間內(nèi)計(jì)算出這組數(shù)據(jù)的和？
前端工程化
1）webpack 如何拆分大文件？
2）webpack 打包的過(guò)程?
3）webpack 的基本配置？
項(xiàng)目經(jīng)驗(yàn)
這部分大概很多同學(xué)都很關(guān)心，到底應(yīng)該怎么寫自己的項(xiàng)目經(jīng)驗(yàn)。出場(chǎng)率最高的問(wèn)題也是介紹一下你做得最出色的項(xiàng)目？
首先最重要的是，實(shí)事求是。
這方面我認(rèn)為主要考察候選人在工作中所承擔(dān)的角色，以及平時(shí)工作中是否注意積累和總結(jié)，其實(shí)大多數(shù)人平時(shí)是不善于總結(jié)的，我自己也是，所以平時(shí)注意寫“詳歷”是對(duì)自己很有幫助的。
關(guān)于祥歷如何寫，極客時(shí)間《面試現(xiàn)場(chǎng)》專欄中有提到，我覺(jué)得非常好，分享給大家
詳歷的結(jié)構(gòu)如下:
開頭，“有段經(jīng)歷，正好遇到了這個(gè)問(wèn)題……”。（講清問(wèn)題背景）
發(fā)展，“一般的做法是做不到的，因?yàn)椤薄＃ㄖv問(wèn)題的復(fù)雜性和挑戰(zhàn)）
高潮，“我一開始用到……后來(lái)……”。（講解決方案的形成過(guò)程）
結(jié)局，“成果是……”。（講結(jié)果、影響、意義）
所謂“詳歷”，是相對(duì)于“簡(jiǎn)歷”更詳細(xì)的工作經(jīng)歷和能力的總結(jié)，用故事的方式，記錄工作的成果、職位、經(jīng)驗(yàn)和能力發(fā)展，相當(dāng)于你的工作檔案，用于回顧個(gè)人工作經(jīng)歷，撰寫簡(jiǎn)歷，也是回答面試問(wèn)題的經(jīng)歷素材庫(kù)。這些素材體現(xiàn)你的個(gè)人經(jīng)驗(yàn)、技能、潛力、動(dòng)機(jī)。詳歷是你個(gè)人工作經(jīng)歷的故事匯編，是你能力的索引，是給你自己參考用的，隨著經(jīng)歷的增加而越來(lái)越充實(shí)；而簡(jiǎn)歷是給面試官看的，最好因職位而異。
詳歷主要有三個(gè)作用：有助于職業(yè)規(guī)劃，可視化技能體系、經(jīng)驗(yàn)分布和成長(zhǎng)路徑。是定制簡(jiǎn)歷的母版。提供面試素材。當(dāng)被問(wèn)到“這個(gè)項(xiàng)目最大的提高是什么”，或者“你失敗的一次溝通是怎樣的”，你可以從準(zhǔn)備好的詳歷中，快速選取恰當(dāng)?shù)墓适拢v給面試官。
【第三部分 面試流程，以及美團(tuán)、阿里面試有什么不同的體會(huì)】
（待大亮補(bǔ)充，比如：）
可能很多同學(xué)都想知道大廠的面試流程，這里我也簡(jiǎn)要分享一下：
總的來(lái)說(shuō)大廠對(duì)于候選人的基礎(chǔ)知識(shí)要求還是非常嚴(yán)格的，當(dāng)然也更看重候選人的潛力和心智，因?yàn)樵诖髲S看來(lái)知識(shí)是死的，只要時(shí)間足夠，通常都可以掌握，但是潛力和心智狀態(tài)，卻和每個(gè)人的成長(zhǎng)軌跡和閱歷有關(guān)。
一面面試官通常是你未來(lái)的同事。面試主要考察候選人的基礎(chǔ)知識(shí)，我遇到的面試官都非常nice，會(huì)寒暄幾句，幫助你脫離緊張的情緒，然后進(jìn)入正式面試環(huán)節(jié)。我記得看過(guò)一個(gè)TED的演講，內(nèi)容是關(guān)于緊張，里面講就算你真的緊張的不行，也不必?fù)?dān)心，因?yàn)槿丝偸潜容^在意自己的，所以就算你覺(jué)得自己非常緊張了，在面試官眼中你表現(xiàn)得也沒(méi)有你想象的那么緊張。
二面面試官通常是你未來(lái)的直級(jí)leader。這里阿里和美團(tuán)不一樣的點(diǎn)在于，當(dāng)時(shí)阿里主要考察了我對(duì)于過(guò)往項(xiàng)目的掌握程度，以及我在項(xiàng)目中的角色，然后和我聊了很多個(gè)人成長(zhǎng)方面的心得和看法；美團(tuán)則側(cè)重考察了我一面面試官?zèng)]有問(wèn)到的基礎(chǔ)知識(shí)點(diǎn)，這里其實(shí)每個(gè)公司可能都不太一樣。
三面面試官通常是你整個(gè)部門的leader，主要從職業(yè)發(fā)展和候選人背景方面進(jìn)行考察，過(guò)程中也會(huì)穿插著考些算法題，不過(guò)都不難，主要考察候選率的編程能力的。美團(tuán)到這里就結(jié)束了，之后就是HR和你聊聊薪水，個(gè)人背景，跳槽原因等等。
阿里比較特殊，會(huì)多一輪交叉面試，四面是HRG和集團(tuán)技術(shù)大佬混合面試，我個(gè)人覺(jué)得主要考察候選人的溝通、應(yīng)變及潛力等等，沒(méi)太問(wèn)技術(shù)相關(guān)的問(wèn)題，可能我比較幸運(yùn)吧
想說(shuō)的是如果想求職阿里，就要做好打持久戰(zhàn)的準(zhǔn)備，阿里的面試周期比較長(zhǎng)，1-2個(gè)月也是很正常的，所以要做好心理準(zhǔn)備，如果面試完沒(méi)有收到阿里的郵件，應(yīng)該就通過(guò)面試了，沒(méi)有消息就是最好的消息。美團(tuán)就很快，當(dāng)然也看部門是否急需招人，我面試的部門當(dāng)天就走完了全部流程。
【第四部分 其他 Tips】
下面這些 Tips，都是我平常自己準(zhǔn)備面試會(huì)遵循的，希望也可以幫助到你。
簡(jiǎn)歷編寫，如何過(guò)初步篩選
網(wǎng)上優(yōu)化簡(jiǎn)歷的方法論很多，我就不多展開了，我列舉一下我的簡(jiǎn)歷框架，希望能給你一些啟發(fā)
1）盡量一頁(yè)紙展示自己的內(nèi)容。
2）總體分為7個(gè)模塊：個(gè)人信息、教育及工作背景、技能清單、項(xiàng)目經(jīng)驗(yàn)、開源項(xiàng)目、個(gè)人博客、自我評(píng)價(jià)，其中開源項(xiàng)目和個(gè)人博客部分可有可無(wú)，如果有，自然是加分項(xiàng)。
3）技能清單里面，寫清楚自己熟悉的語(yǔ)言、框架，甚至能證明你有某方面能力的證書。這里需要注意的是，千萬(wàn)別寫“精通”，除非你這門語(yǔ)言或者框架的締造者，一般來(lái)說(shuō)精通一門語(yǔ)言或者框架確實(shí)很難。
4）項(xiàng)目部分，我的書寫方式是 工作+結(jié)果。挑選項(xiàng)目中我參與的比較重要的部分，然后描述清楚工作內(nèi)容和我的產(chǎn)出結(jié)果，盡量數(shù)字化自己的成果，比如項(xiàng)目時(shí)間、代碼量、提高百分比等。再者，項(xiàng)目部分一定要真實(shí)，你需要對(duì)你寫的內(nèi)容了如指掌并且負(fù)責(zé)，否則面試官可能會(huì)認(rèn)為你人品有問(wèn)題。
5）自我評(píng)價(jià)部分，通常來(lái)說(shuō)，適當(dāng)包裝自己的優(yōu)點(diǎn)即可。如果某個(gè)企業(yè)你十分心儀，也可以參考對(duì)方的企業(yè)文化，重點(diǎn)匹配自己的內(nèi)容即可。另外，你寫的優(yōu)點(diǎn)最好能用1-2個(gè)例子來(lái)佐證，比如我寫了自己自驅(qū)力強(qiáng)，阿里面試官問(wèn)到我的時(shí)候，我就介紹了自己主動(dòng)學(xué)習(xí)，參與前端訓(xùn)練營(yíng)的培訓(xùn)、買了很多專欄并學(xué)習(xí)、關(guān)注了很多技術(shù)博客，并寫文章總結(jié)等等。
怎么談薪資
如果到了談錢的時(shí)候，首先恭喜你前期的努力終于快見(jiàn)到回報(bào)了。我們程序員通常都比較內(nèi)向，不善于談這些，我也一樣，但談錢其實(shí)沒(méi)有什么不好意思的。你可能跟我一樣，有著錯(cuò)誤的心理認(rèn)知：自己少要點(diǎn)，公司看到我們要的不多，可能會(huì)考慮給 Offer。實(shí)際上，當(dāng)你幾輪面試過(guò)后，你應(yīng)該可以判斷出自己是否有可能拿到 Offer的。這時(shí)候，你可以先調(diào)研一下行業(yè)薪資水平，然后再結(jié)合自己的水平給出自己的預(yù)期，這種情況下，你拿到的 Offer才可能不至于讓自己委屈。有時(shí)候，不敢多要也是正常的，多面試幾次，多拿到幾個(gè) Offer，底氣自然也就足了。
養(yǎng)精蓄銳
面試前吃飽飯也是很重要的，記得有次面試一個(gè)大廠，沒(méi)吃早飯，然后坐地鐵1個(gè)小時(shí)，3輪面試3.5個(gè)小時(shí)，三面的時(shí)候自己的專注力和精力能明顯感覺(jué)到是跟不上的，這樣也是會(huì)影響自己臨場(chǎng)發(fā)揮的
【最后的心得】
以上就是我的面試經(jīng)歷分享了，最后，還有幾點(diǎn)心得來(lái)跟大家分享：
臨時(shí)抱佛腳搜面經(jīng)、背題，通常來(lái)說(shuō)是沒(méi)用的，但是我們通過(guò)面試查找不足，然后努力補(bǔ)足短板，及時(shí)總結(jié)是很有必要的。在找工作的過(guò)程中我每面試一家公司，都會(huì)寫面試總結(jié)，記錄面試遇到的題目，回憶自己回答好和不好的地方。
面試過(guò)程中，對(duì)于完全不知道的答案的題目，回答不知道也沒(méi)有什么。面試是一個(gè)綜合考察的過(guò)程，不會(huì)因?yàn)槟阋粌蓚€(gè)題目回答不夠好就將你淘汰，而且面試過(guò)程中如果遇到不太明白細(xì)節(jié)的問(wèn)題，可以和面試官老師做進(jìn)一步溝通，這也是你展示自己溝通能力的好機(jī)會(huì)，千萬(wàn)別自己悶頭苦想。試想想如果項(xiàng)目中遇到不會(huì)的，也會(huì)是需要虛心請(qǐng)教的，不然悶頭苦干只會(huì) delay 項(xiàng)目進(jìn)度。
在我看來(lái)，每一次面試都是一次絕佳的學(xué)習(xí)機(jī)會(huì)，尤其是大廠的面試官老師無(wú)論是經(jīng)驗(yàn)、閱歷以及專業(yè)知識(shí)，都能很好的給我正向反饋。在面試百度時(shí)，二面面試官就和我聊了很多人生選擇以及個(gè)人成長(zhǎng)方面的思考，面試阿里時(shí)也是二面面試官和我聊了很多工作方法論方面的思考，這些對(duì)我來(lái)說(shuō)，比熟記幾個(gè)知識(shí)點(diǎn)更有價(jià)值和意義。
點(diǎn)個(gè)『在看』支持下?