【面試說(shuō)】2020三元同學(xué)春招阿里淘系、阿里云、字節(jié)跳動(dòng)面經(jīng) & 個(gè)人成長(zhǎng)經(jīng)驗(yàn)分享

本人今年 211 本科大三下，掘金六級(jí)博主，最近投實(shí)習(xí)，一共投了三家，阿里的淘系和阿里云，字節(jié)跳動(dòng)的抖音，當(dāng)然都是找人內(nèi)推的，結(jié)果簡(jiǎn)述如下:

1. 淘系二面通過(guò)，但入系統(tǒng)只能選擇一個(gè)，后來(lái)選擇了阿里云；
2. 阿里云走完了五輪面試，現(xiàn)在等 offer ；
3. 字節(jié)跳動(dòng)抖音三輪技術(shù)面+一輪HR，現(xiàn)在已經(jīng)收到了前端架構(gòu)組的 offer。

首先把面經(jīng)分享給大家，由于技術(shù)水平和經(jīng)歷的不同，我不敢保證我的面經(jīng)問(wèn)題對(duì)你有任何的參考性，但確實(shí)都是在真實(shí)的面試場(chǎng)景中遇到的，我所做的只是保證真實(shí)性和完整性。

淘寶兩輪

淘寶一面

3月12日晚 淘寶一面(35min)

• 首先自我介紹，怎么學(xué)習(xí)前端的
• 能不能說(shuō)說(shuō)瀏覽器的緩存(靈魂之問(wèn)，一時(shí)想不起來(lái)了，尷尬，尋求提示)
• cache-control 有哪些字段？設(shè)置 max-age: 0 跟瀏覽器緩不緩存有關(guān)系嗎？s-max-age 的作用？
• 強(qiáng)緩存和協(xié)商緩存的順序
• 能不能說(shuō)說(shuō) Cookie 有哪些字段？(我說(shuō)了 domain、path、httpOnly、sameSite的三種取值)
• 還有嗎？關(guān)于 https 的一個(gè)字段(擦，不知道，過(guò)吧)
• 說(shuō)說(shuō)箭頭函數(shù)和普通函數(shù)的區(qū)別(說(shuō)了寫(xiě)法，原型，this，還有呢？愣了一會(huì)，尋求提示)
• 箭頭函數(shù)可以 new 嗎 ？說(shuō)一說(shuō) new 的原理。
• 箭頭函數(shù)的 this 是聲明時(shí)確定還是運(yùn)行時(shí)確定？(運(yùn)行時(shí)確定吧)
• TCP 三次握手
• 你應(yīng)該對(duì) React 原理很了解嗎？(我打斷了，React 原理不熟，問(wèn)我 Vue 吧，后來(lái)問(wèn)了一個(gè) diff 就完事了)
• 從輸入U(xiǎn)RL到頁(yè)面展示發(fā)生了什么？(我說(shuō)了大概 2 分鐘 DNS 解析過(guò)程，被喊停，然后繼續(xù)講HTML解析，CSS解析，合成圖層、合成線程調(diào)用光柵化線程池，生成位圖后瀏覽器進(jìn)程間通信過(guò)程，顯卡緩存與顯示器的關(guān)系，大概說(shuō)10-15分鐘吧)
• 怎么進(jìn)行優(yōu)化？(說(shuō)了一種批量操作，別的好像忘了，他提示我 DOM 離線操作也可以)
• 重繪和回流了解嗎？
• 有沒(méi)有了解過(guò)前端一些前沿的方向(說(shuō)了flutter，dart，看過(guò)你們團(tuán)隊(duì)的 serverless 文章)
• 了解過(guò) WebAssembly 嗎？(沒(méi)有啊)
• 了解過(guò) PWA ?(我個(gè)人覺(jué)得要涼，然后問(wèn)我 PWA 原理是怎么樣的呢？說(shuō)了下大概Service Worker吧，不太熟)

最后，主管告訴我，基礎(chǔ)還是非常扎實(shí)的，通過(guò)的概率還是很高，希望能選擇淘系團(tuán)隊(duì)。

淘寶二面

3月17號(hào) (52min) 淘寶二面

• 介紹一下你的項(xiàng)目(我說(shuō)了一下技術(shù)棧，遇到的挑戰(zhàn)和解決方案)
• 你只學(xué)了一年半，就有這么多關(guān)注量了，你是怎么做到的？
• 你覺(jué)得你基礎(chǔ)怎么樣？(JS 很扎實(shí)，Vue 翻完源碼，React 略懂原理)
• 你覺(jué)得 React 和 Vue 有什么共通之處？
• 說(shuō)一下瀏覽器渲染過(guò)程(說(shuō)的很詳細(xì)，面試官說(shuō)可以，細(xì)節(jié)把握的很professional)
• 說(shuō)一下對(duì)于前端技術(shù)的發(fā)展過(guò)程(從刀耕火種的年代說(shuō)起，到后來(lái)的jq，angular，react，vue 三大框架，gulp、grunt、rollup、webpack 打包工具，然后到未來(lái)的一些方向，比如 PWA, 跨端，serverless，微前端，webassemblely，加入了我自己的理解)
• 你覺(jué)得前端除了完成頁(yè)面交互稿之外，還能做其他的什么事情？(首先是性能優(yōu)化，其次是處理數(shù)據(jù)，然后是工程化)
• 你覺(jué)得工程化的理解是怎樣的？(從代碼的角度，編譯、壓縮、規(guī)范，從人的角度，團(tuán)隊(duì)協(xié)作、統(tǒng)一產(chǎn)出標(biāo)準(zhǔn))
• 你覺(jué)得你選擇阿里云或者淘寶，你選擇的標(biāo)準(zhǔn)的什么？
• 還有什么想問(wèn)我的嗎？(問(wèn)了一些轉(zhuǎn)正和部門(mén)相關(guān)的事情)

總體而言，面試官基本沒(méi)問(wèn)什么基礎(chǔ)，考察對(duì)前端的思考和個(gè)人的一些思考，跟我講這方面的能力還是不錯(cuò)的。

后來(lái)流程選擇了阿里云，接下來(lái)我們看阿里云的部分。

阿里云五輪

阿里云一面

3.10晚 阿里云一面：

• HTTPS 的握手過(guò)程講一講。(講了很久很細(xì)，面試官知道我理解，喊停了)
• HTTPS 和 HTTP 的緩存有什么區(qū)別？(懵了)
• DOM API 掌握怎么樣？(不是很熟)
• Element 和 Node 的區(qū)別(假裝想了一會(huì)，不知道)
• XSS 攻擊 Cookie相關(guān)的字段(HttpOnly, 解釋了一下作用)
• CSRF 攻擊，解釋一下 Cookie 的 SameSite 字段 (說(shuō)了下，覺(jué)得可以，過(guò))
• chrome 最新的 xxx 特性是如何防范 CSRF 攻擊 (這個(gè)真沒(méi)聽(tīng)說(shuō)過(guò))
• fetch 和 xhr 有什么區(qū)別？(fetch 不熟)
• 好，解釋一下 xhr 的 cors 過(guò)程(簡(jiǎn)單請(qǐng)求，非簡(jiǎn)單請(qǐng)求兩種情況，說(shuō)了下)
• React 閉包陷阱有什么好的解決辦法嗎？(說(shuō)實(shí)話，簡(jiǎn)歷上寫(xiě)了，實(shí)際上理解不深，只說(shuō)了一種)
• useReducer 可以解決你知道嗎？(當(dāng)時(shí)真的不清楚，主要忘了閉包陷阱的表單場(chǎng)景，尷尬)
• 看了你的小冊(cè)子，能不能講講React.memo 和 JS 的 memorize 函數(shù)的區(qū)別(memorize函數(shù)當(dāng)時(shí)不知道，以為是什么高深的算法，后來(lái)才發(fā)現(xiàn)就是cache函數(shù)，換了個(gè)名字而已。反正當(dāng)時(shí)說(shuō)不會(huì))
• 特意考了一題對(duì)React.memo的理解(擦，還是考React.memo, 三個(gè)場(chǎng)景，中間一個(gè)場(chǎng)景答錯(cuò)了，非常減分。這道題出的還是很有水平)
• WeakMap 和 Map 的性能有什么差別?(前者對(duì) GC 更加友好，保持弱引用)
• 換個(gè)說(shuō)法吧，如果這個(gè)立即執(zhí)行函數(shù)中有遞歸函數(shù)，兩者性能有區(qū)別嗎？(沒(méi) GET 到面試官的點(diǎn)啊，過(guò)了吧這題)
• 如果是在立即執(zhí)行函數(shù)中，兩者的性能有區(qū)別嗎？(楞了一會(huì)，說(shuō)強(qiáng)弱引用還是會(huì)有GC的區(qū)別，沒(méi)影響)
• 能不能說(shuō)說(shuō) AMD 和 ESModule 有什么區(qū)別？(AMD 不熟，說(shuō)ESModule，介紹了import、export以及導(dǎo)出引用的特點(diǎn))
• 那么你能不能告訴我 ESModule 對(duì)于 Tree-Shaking 有什么優(yōu)勢(shì)呢？(會(huì)做一些編譯階段的優(yōu)化吧)
• async await 經(jīng)過(guò)編譯后和 generator 有啥聯(lián)系？(問(wèn)了兩遍，還是不知道問(wèn)的啥，直接說(shuō)了async await 原理，他說(shuō)你講了太深，問(wèn)的不是這個(gè)，過(guò)吧過(guò)吧)
• 有什么想要問(wèn)我嗎？

反問(wèn)的問(wèn)題:

1. React 閉包陷阱如何用 useReducer 解決？(面試官又說(shuō)了一遍)
2. 能不能說(shuō)一說(shuō)您正在做的業(yè)務(wù)中，遇到什么挑戰(zhàn)，有什么解決思路？(說(shuō)了很多，看的出來(lái)，阿里的大神都是特別有想法、有創(chuàng)意，最后也給我指引了一些未來(lái)的方向， 比如前端未來(lái)的容器化，對(duì)于中臺(tái)頁(yè)面的構(gòu)建進(jìn)行服務(wù)級(jí)別的調(diào)用，而不是去一個(gè)個(gè)組件去寫(xiě)，了解一下后端的安全容器概念，另外推薦我去看一看螞蟻金服的微前端框架的實(shí)現(xiàn)。深深的佩服，開(kāi)了眼界，收獲很大!)

另外，一面并沒(méi)有發(fā)揮我的優(yōu)勢(shì)，問(wèn)的問(wèn)題跟我不太match，甚至有些問(wèn)題都沒(méi)有聽(tīng)懂，雖然看的出來(lái)面試官比較欣賞我，但個(gè)人覺(jué)得情況很不樂(lè)觀。掛了也就掛了吧，我覺(jué)得掛了也正常。

后續(xù): 3 月 11 號(hào)下午內(nèi)推我的大佬來(lái)信，了解到昨天面我的是團(tuán)隊(duì)中公認(rèn)技術(shù)最牛的專(zhuān)家，面試官給的評(píng)價(jià)是，雖然有一些問(wèn)題，但是整體表現(xiàn)不錯(cuò)，在應(yīng)屆生里面已經(jīng)可以了。好好等下輪。

阿里云二面

3.19 晚 阿里云二面(37min)

(ps：等的太久了，都沒(méi)緊張的感覺(jué)了)

二面主管問(wèn)我先面試還是先筆試，因?yàn)橛袃蓚€(gè)流程。我說(shuō)先面試吧。

• 首先自我介紹
• 為什么要做你這個(gè)開(kāi)源項(xiàng)目？后臺(tái)數(shù)據(jù)哪來(lái)的？
• 有 nodejs 相關(guān)的開(kāi)發(fā)經(jīng)驗(yàn)嗎？(果斷說(shuō)沒(méi)有，避免給后面挖坑)
• HTTP 的 GET 和 POST 請(qǐng)求有什么區(qū)別？(我說(shuō)了 4 個(gè)區(qū)別)
• 說(shuō)一說(shuō) CSRF 和 XSS 攻擊？(說(shuō)了一堆，他說(shuō)你講的太細(xì)了，是不是最近看過(guò)之類(lèi)的文章，我說(shuō)沒(méi)有)
• HTTP 緩存能不能說(shuō)一下？(強(qiáng)緩存，協(xié)商緩存，中間扯到代理了，講了一堆，他說(shuō)可以了)
• 你知道 JS 的語(yǔ)言標(biāo)準(zhǔn)是如何制定的嗎？(確實(shí)不熟，說(shuō)下去自己查查)
• 你用過(guò)哪些 ES 最新的語(yǔ)法，越新越好
• 你對(duì) babel 了解嗎？能不能說(shuō)說(shuō)幾個(gè) stage 代表什么意思？
• Vue 的響應(yīng)式對(duì)數(shù)組是如何處理的？(重寫(xiě)數(shù)組方法，手動(dòng)派發(fā)更新)
• Object 為什么可以自動(dòng)派發(fā)更新？
• 假如我在一個(gè)for循環(huán)中改變當(dāng)前組件依賴(lài)的數(shù)據(jù)，改變一萬(wàn)次，會(huì)有什么效果？(講到批量更新和 nextTick 原理，他表示可以)
• 假如讓你設(shè)計(jì)一個(gè)適配 PC、手機(jī)和平板的項(xiàng)目，你有哪些布局方案？(首先是vh、vw，然后用淘寶出品的 lib-flexible 庫(kù)進(jìn)行 rem 適配，還有一種 flex + px 的適配方式)
• CSS 當(dāng)中以 @ 開(kāi)頭的屬性有哪些？(我說(shuō)了@media, @keyframes，后來(lái)提醒我還有@import，我補(bǔ)充這個(gè)是串行加載 CSS)
• 了解過(guò)前端當(dāng)前的發(fā)展趨勢(shì)嗎，比如一些新的技術(shù)方向。(說(shuō)了對(duì)PWA的看法，為什么會(huì)涼，flutter、electron、微前端，serverless)
• 了解過(guò)云計(jì)算嗎？能不能講一講云計(jì)算的發(fā)展方向和前景？(沒(méi)了解過(guò))
• 有什么興趣愛(ài)好？
• 對(duì)自己的職業(yè)規(guī)劃是怎樣的？(說(shuō)了一大堆，他笑了笑，說(shuō)今天就到這里吧，明天筆試)

第二天主管告訴我不需要筆試了，筆試取消，直通三面。

阿里云三面

3.20 阿里云三面(57min)

聊了狠多，但是聊的很輕松，沒(méi)有編程題，而且和個(gè)人經(jīng)歷強(qiáng)相關(guān)，就不整理題目了。

阿里云四面

3.24 阿里云四面(40min)

讓人自閉的一場(chǎng)交叉面。

• 自我介紹
• 為什么選擇前端？(說(shuō)了很多，他叫我用一句話總結(jié))
• 你的職業(yè)規(guī)劃是怎樣的？
• 項(xiàng)目中遇到了哪些挑戰(zhàn)？
• 說(shuō)說(shuō)你對(duì)前端架構(gòu)的認(rèn)識(shí)，如何設(shè)計(jì)出一個(gè)架構(gòu)方案(說(shuō)實(shí)話，我頂不住，沒(méi)研究過(guò))
• 在一個(gè)大型項(xiàng)目中，如何定位發(fā)生內(nèi)存泄露的代碼？(沒(méi)有實(shí)踐過(guò))
• Last-Modified 和 Etag 有什么區(qū)別？
• Cache-Control 和 Last-Modified 的區(qū)別
• 后端語(yǔ)言對(duì) nodejs 更熟還是 Java 更熟？(Java)
• 說(shuō)說(shuō) String, StringBuilder 和 StringBuffer 的區(qū)別
• 跨域有哪些方案？
• React 受控組件和非受控組件的區(qū)別

阿里云五面

3.26 阿里云終面(50min)

• 自我介紹
• 你自己在社區(qū)做過(guò)什么具有推動(dòng)性的事情？
• 你能不能說(shuō)說(shuō)自己比較擅長(zhǎng)的數(shù)據(jù)結(jié)構(gòu)有哪些?
• 在學(xué)校參加過(guò)競(jìng)賽嗎？
• 你希望公司的環(huán)境是怎么樣的？
• 為什么不投騰訊？(阿里面的已經(jīng)很累了，秋招再投吧)
• 阿里云和抖音你更想去哪里？
• 你還有什么問(wèn)題？

字節(jié)跳動(dòng)三輪技術(shù)+一輪HR

三元同學(xué)2020字節(jié)跳動(dòng)抖音架構(gòu)組前端實(shí)習(xí)生面經(jīng)(已到offer)

個(gè)人經(jīng)驗(yàn)分享

面經(jīng)就分享到這里了，可能是因?yàn)樵谏鐓^(qū)比較活躍，在面試之前很容易地拿到了內(nèi)推資格，并且在一輪輪的面試憑借這部分經(jīng)歷得到了面試官的賞識(shí)，所以一路下來(lái)感覺(jué)難度并不大，還算是非常順利的，至少目前所有的面試中沒(méi)有一輪掛掉。

在我微信公眾號(hào)【前端三元同學(xué)】的后臺(tái)中也能夠看到有些同學(xué)的留言，不少人要我分享一下學(xué)習(xí)前端的一些方法和經(jīng)驗(yàn)，以前我是非?？咕艿?，因?yàn)槲矣X(jué)得自己并沒(méi)有這個(gè)資格，但現(xiàn)在經(jīng)歷了這一輪輪面試的檢驗(yàn)，我覺(jué)得現(xiàn)在是時(shí)候回顧和分享一波了。主要分兩個(gè)方面來(lái)講吧，一個(gè)是前端技術(shù)的學(xué)習(xí)，另一個(gè)是面試當(dāng)中需要注意的一些case。

學(xué)習(xí)經(jīng)歷及經(jīng)驗(yàn)

個(gè)人經(jīng)歷

回想我大一的時(shí)候，讀的是機(jī)電工程，后來(lái)在大一下的時(shí)候轉(zhuǎn)到了學(xué)校的計(jì)算機(jī)專(zhuān)業(yè)，從此開(kāi)始了科班生的生涯。接觸前端也大概是在大一下學(xué)期，在一個(gè)叫萬(wàn)門(mén)大學(xué)的地方偶然發(fā)現(xiàn)了一套 JS 的視頻，看著感覺(jué)不錯(cuò)，想深入這個(gè)領(lǐng)域，但后來(lái)發(fā)現(xiàn)越往后面學(xué)越需要一些計(jì)算機(jī)科班的專(zhuān)業(yè)基礎(chǔ)，于是我當(dāng)時(shí)果斷轉(zhuǎn)到了計(jì)算機(jī)。因此這一步選擇算得上偶然，也是一個(gè)必然。

大二上學(xué)校的課程壓力比較大，不溫不火地學(xué)了一個(gè)學(xué)期，中途有過(guò)做全棧的想法，報(bào)了個(gè) Python Web 培訓(xùn)班，但是學(xué)的不好，后來(lái)直接放棄了，決定還是回過(guò)頭來(lái)好好把前端搞扎實(shí)吧，重新學(xué)了一遍 JS，然后看了看 JQuery，研究了里面選擇器實(shí)現(xiàn)的源碼，然后去學(xué) Vue，當(dāng)然也跟著網(wǎng)上的教程做了一些項(xiàng)目，比如慕課網(wǎng)上黃軼老師的餓了么項(xiàng)目和炸雞音樂(lè)Web App，還有 Dell Lee 的 Vue去哪兒網(wǎng)實(shí)戰(zhàn)，一步步做完感覺(jué)對(duì)自己實(shí)戰(zhàn)能力的提升還是很大的，起碼能自己獨(dú)立倒騰一個(gè)項(xiàng)目出來(lái)了。

大二下學(xué)期我開(kāi)始接下了人生當(dāng)中第一個(gè)外包項(xiàng)目，也參加了計(jì)算機(jī)設(shè)計(jì)大賽，賺來(lái)了三千多的第一桶金，也拿到了中南賽區(qū)二等獎(jiǎng)的證書(shū)。這一切在外人看來(lái)其實(shí)是相當(dāng)不錯(cuò)的經(jīng)歷了，但對(duì)我而言，我一直能夠感受到一種強(qiáng)烈的危機(jī)，由于項(xiàng)目一直在趕時(shí)間，很多時(shí)候秉著能出來(lái)效果就行的心態(tài)來(lái)做，很多細(xì)節(jié)并沒(méi)有我想象中做的那么完美，而且框架里面偶爾會(huì)出一些問(wèn)題，但是我并沒(méi)有時(shí)間去理解其中的原理。我覺(jué)得這并不是我要追求的東西。這種心態(tài)，說(shuō)的好聽(tīng)點(diǎn)叫追求極致，難聽(tīng)點(diǎn)，就是強(qiáng)迫癥。

在這種心態(tài)的驅(qū)使下，完成了外包和比賽后，我馬上了投入了更深一步的學(xué)習(xí)?！禞avaScript高級(jí)程序設(shè)計(jì)》好好再翻一遍，ES6 重新好好學(xué)一遍，看了一遍珠峰周?chē)[天的 JavaScript 視頻，在 CSDN 上做了相關(guān)的筆記(我覺(jué)得不算博客)，以及在慕課網(wǎng)上學(xué)習(xí)了webpack的課程，React的入門(mén)視頻，一路狂奔，學(xué)了很多。

也正是大二下學(xué)期期末的時(shí)候，我開(kāi)始了在掘金發(fā)表第一篇文章，標(biāo)志著寫(xiě)博客的經(jīng)歷正式開(kāi)始。讓我驚喜的是，發(fā)表出來(lái)的第一篇博客就被掘金社區(qū)的公眾號(hào)轉(zhuǎn)載了，我喜出望外，感覺(jué)特別驚喜，于是準(zhǔn)備繼續(xù)寫(xiě)下去，不斷規(guī)劃和輸出新的內(nèi)容。

很快，大二下結(jié)束后，暑假就到來(lái)了。在這個(gè)時(shí)間有些小伙伴已經(jīng)出去找實(shí)習(xí)了，但我深知自己離 offer 還有一些差距，于是又感受到了一絲危機(jī)。我曾經(jīng)問(wèn)過(guò)自己: ?如果我要去找實(shí)習(xí)，會(huì)遇到哪些問(wèn)題？

• 首先，項(xiàng)目自己覺(jué)得深度不夠，拿不出手。
• 其次，計(jì)算機(jī)基礎(chǔ)并不扎實(shí)，數(shù)據(jù)結(jié)構(gòu)和算法掌握的并不好，計(jì)算機(jī)網(wǎng)絡(luò)也沒(méi)基礎(chǔ)。
• 最后，前端技術(shù)的一些原理知之甚少，更別說(shuō)框架源碼了。

因此，在大三前的暑假開(kāi)始，我開(kāi)始給我的未來(lái)實(shí)習(xí)布道。首當(dāng)其沖的就是自己去做一個(gè)讓自己滿意的項(xiàng)目，這個(gè)項(xiàng)目必須足夠的精致，同時(shí)不是為了應(yīng)付任何人。這個(gè)項(xiàng)目采用 React 來(lái)做的，當(dāng)時(shí)是統(tǒng)一用的 class 組件，后來(lái)想試用一下 hooks 特性，發(fā)現(xiàn)真香，直接用 hooks 重構(gòu)了。這個(gè)項(xiàng)目也就是我那本掘金小冊(cè)項(xiàng)目的前身。當(dāng)我把代碼放到 Github 上的時(shí)候，沒(méi)幾天的時(shí)間就收獲了上百了個(gè) star，讓我感到特別意外，而不久之后就有同學(xué)在 issue 區(qū)留言，覺(jué)得是一個(gè)不錯(cuò)的練習(xí)項(xiàng)目，能不能弄個(gè)教程出來(lái)。接下來(lái)我嘗試著這個(gè)項(xiàng)目更大的價(jià)值，事實(shí)上我也做到了，寫(xiě)成了小冊(cè)放到社區(qū)，反響還不錯(cuò)。

關(guān)于計(jì)算機(jī)基礎(chǔ)，我在大三上學(xué)期花了不少的精力學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)和算法，首先學(xué)完了慕課網(wǎng) bobo ?老師的數(shù)據(jù)結(jié)構(gòu)從入門(mén)到進(jìn)階、算法與數(shù)據(jù)結(jié)構(gòu)綜合提升以及玩轉(zhuǎn)算法面試這三門(mén)課程，夯實(shí)了所有的基礎(chǔ)之后，開(kāi)始鋪天蓋地地刷 leetcode，一學(xué)期刷了 100 多道算法題。對(duì)于計(jì)算機(jī)網(wǎng)絡(luò)，當(dāng)時(shí)確實(shí)沒(méi)有時(shí)間學(xué)了，就把這部分的計(jì)劃放在了寒假。

最后是前端技術(shù)的深入學(xué)習(xí)，分為 3 個(gè)方向精進(jìn)，JS 基礎(chǔ)、瀏覽器和框架。

一方面是JS的學(xué)習(xí)，對(duì)我而言，JS 明明學(xué)了很多遍了，但是實(shí)際上忘的也很快的，我打算重讀一遍紅寶書(shū)，然后重新建立完整的 JS 知識(shí)體系。緊接著我開(kāi)始了《JS靈魂之問(wèn)》系列博客的創(chuàng)作，嘗試著去系統(tǒng)地整理 JS 的知識(shí)點(diǎn)，又必須要達(dá)到一定的深度，當(dāng)時(shí)對(duì)我來(lái)說(shuō)其實(shí)是一個(gè)相當(dāng)大的挑戰(zhàn)。在這個(gè)整理的過(guò)程當(dāng)中，我也逼著自己去參考了大量的資料和博客，說(shuō)實(shí)話學(xué)到了不少，更讓我意外的是，這個(gè)系列讓我從此在掘金大火，幫助了許許多多在 JS 進(jìn)階路上的前端。

在瀏覽器這塊，其實(shí)很多運(yùn)行原理之前也是一知半解，直到一個(gè)偶然的機(jī)會(huì)，發(fā)現(xiàn)了極客時(shí)間上一個(gè)口碑不錯(cuò)的專(zhuān)欄，專(zhuān)門(mén)講瀏覽器的，耐下心來(lái)讀完之后，感覺(jué)收獲還是挺大的，推薦大家去好好看看，解開(kāi)了之前很多關(guān)于瀏覽器原理的疑惑。

然后是前端框架，我后面逼自己去讀完了 Vue 源碼，原因很簡(jiǎn)單，為了面試，但沒(méi)想到的是，我目前遇到的面試對(duì)我源碼方面問(wèn)的并不深，只是非常常規(guī)的一些原理性的問(wèn)題，但無(wú)疑的是，通讀源碼這個(gè)指標(biāo)對(duì)面試的評(píng)估來(lái)講是相當(dāng)加分的，并且能夠讓自己站在一個(gè)更高的高度去應(yīng)對(duì)面試，遇到相關(guān)的面試問(wèn)題會(huì)非常從容。更重要的是，閱讀完源碼，對(duì)我個(gè)人對(duì)于 JS 的理解和 SDK 設(shè)計(jì)以及設(shè)計(jì)模式的理解更加深入了一步，這是我當(dāng)時(shí)沒(méi)有想到的，也是很長(zhǎng)一段時(shí)間讓我受益的財(cái)富?？赡苡腥藭?huì)問(wèn)你是怎么就做到的，關(guān)于源碼的閱讀方法，話題有點(diǎn)大，后面再介紹吧。

大三上就準(zhǔn)備了這么一些東西，順帶著整理了自己的博客，期末的時(shí)候已經(jīng)上架小冊(cè)、粉絲過(guò)萬(wàn)了。

緊接著到了寒假，我把數(shù)據(jù)結(jié)構(gòu)和算法重新復(fù)習(xí)了一遍，TCP 和 HTTP 好好系統(tǒng)學(xué)了一遍，同時(shí)看了一些 chromium 的源碼，復(fù)習(xí)了一波 Vue 源碼，感覺(jué)火候差不多了就開(kāi)始投遞簡(jiǎn)歷了，于是投了阿里和字節(jié)跳動(dòng)，便有上面的面經(jīng)了。

親身經(jīng)驗(yàn)分享

目前的經(jīng)歷分享就這些，可能會(huì)有些記流水賬的感覺(jué)，但正是這樣我覺(jué)得才足夠真實(shí)，因?yàn)閷?duì)前端而言，不可能照著一個(gè)系統(tǒng)的學(xué)習(xí)路徑按部就班，然后達(dá)到一個(gè)很高的水平，這種美化過(guò)的經(jīng)歷說(shuō)出來(lái)連我自己都不信，誰(shuí)的人生不是這么誤打誤撞過(guò)來(lái)的呢？那你可能就會(huì)問(wèn)了，你憑什么能夠把基礎(chǔ)學(xué)的那么扎實(shí)，通過(guò)這些大廠的面試呢？

我覺(jué)得有兩點(diǎn)，一點(diǎn)是外在的因素，一點(diǎn)是內(nèi)在的因素。

對(duì)外在的方面，我在輸入一些信息的同時(shí)，會(huì)加入自己的思考和推敲，然后用自己的方式來(lái)輸出，整理成博客，這使得我能夠?qū)χR(shí)體系本身有更加深刻的理解，同時(shí)也能在忘記這部分知識(shí)點(diǎn)之后，重新回顧的時(shí)候能夠很快撿起來(lái)，節(jié)省了非常多復(fù)習(xí)的時(shí)間。

對(duì)內(nèi)在的方面，我覺(jué)得自驅(qū)力是一個(gè)比較重要的因素，即自己驅(qū)動(dòng)自己學(xué)習(xí)的能力。其實(shí)說(shuō)起來(lái)容易，做起來(lái)是非常難的，因?yàn)橥饨绲恼T惑實(shí)在是太多，而且學(xué)習(xí)本身就是脫離舒適區(qū)的活動(dòng)，是一種反人性的活動(dòng)，本身就是讓人不舒服的，因此很多人不愿意主動(dòng)學(xué)習(xí)，這是完全可以理解的。那我為什么會(huì)有這種強(qiáng)烈的自驅(qū)力呢？

因?yàn)槲C(jī)感，危機(jī)感隨之帶來(lái)了恐懼。

為什么這么說(shuō)？

以前聽(tīng)《得到》APP上的梁寧老師講過(guò)，人性其實(shí)只有兩大痛點(diǎn): 一個(gè)是愉悅，一個(gè)是恐懼。愉悅感可以讓人沉浸在一件事情當(dāng)中干一萬(wàn)小時(shí)，成為高手，而恐懼帶來(lái)的動(dòng)力更加顯著。對(duì)產(chǎn)品來(lái)說(shuō)，要么就讓用戶爆爽，要么就去幫助他抵御恐懼，否則就不是一個(gè)優(yōu)秀的產(chǎn)品。那么對(duì)于個(gè)人的成長(zhǎng)而言，你做一件事情，沒(méi)有找到任何愉悅的感覺(jué)，也沒(méi)有產(chǎn)生過(guò)任何恐懼，那么他基本上在這個(gè)領(lǐng)域一事無(wú)成。

換句話說(shuō)，如果一件事情讓你非常瘋狂地去做，要么這件事讓你爆爽，要么它幫助你抵御恐懼。

對(duì)我來(lái)講，真正驅(qū)動(dòng)我的是后者。危機(jī)意識(shí)讓我挖掘出真正的痛點(diǎn)，發(fā)現(xiàn)自己的恐懼所在，從而帶來(lái)強(qiáng)大的自驅(qū)力。如果說(shuō)僅僅是學(xué)一些東西來(lái)炫耀一番，或者只是去迎合外界的期望，這種動(dòng)力可以有，但僅僅只是暫時(shí)的。當(dāng)你走出舒適區(qū)，面對(duì)外界無(wú)數(shù)誘惑的時(shí)候，真正能 carry 你繼續(xù)學(xué)習(xí)的是你內(nèi)心的痛點(diǎn)。

我覺(jué)得明白這一點(diǎn)，比所謂的學(xué)習(xí)路徑、學(xué)習(xí)方法重要得多。因?yàn)榇蠖鄶?shù)時(shí)候我們不是缺少學(xué)習(xí)資料，或者沒(méi)有掌握什么高效的學(xué)習(xí)方法，只是因?yàn)槟銊?dòng)力不足、容易懈怠罷了。每個(gè)人情況都各不相同，但我覺(jué)得想要成長(zhǎng)，挖掘自己真正的痛點(diǎn)是最重要的一件事情。

面試經(jīng)驗(yàn)分享

準(zhǔn)備階段

在面試之前，可能很多人會(huì)跟我一樣感到焦慮，覺(jué)得自己還沒(méi)準(zhǔn)備好，想多復(fù)習(xí)一些東西，可越復(fù)習(xí)越感覺(jué)自己不會(huì)的東西更多，從而遲遲不敢出去面試。這其實(shí)是個(gè)悖論，原因就在于技術(shù)本身就是學(xué)不完的，此時(shí)我們需要好好調(diào)整一下自己的心態(tài)，做兩手準(zhǔn)備:

• 劃清知識(shí)體系和邊界
• 給自己安排一個(gè)截止日期(deadline)

準(zhǔn)備時(shí)間是有限的，我們需要做的就是利用有限的時(shí)間達(dá)到最大效益的產(chǎn)出，因此盡量地做一些復(fù)習(xí)鞏固和查漏補(bǔ)缺，發(fā)揮自己的優(yōu)勢(shì)，而不要去為了面試學(xué)新技術(shù)，或者深挖自己從未涉獵的領(lǐng)域。我根據(jù)自己目前的實(shí)際水平，制定了這樣一份面試知識(shí)體系:

其實(shí)當(dāng)時(shí)有些知識(shí)并沒(méi)有完全掌握，但是又需要出去面試，所以給了自己一個(gè)截止日期，在 3 月 10 號(hào)之前，盡全力準(zhǔn)備，到了 deadline，無(wú)論如何都要投簡(jiǎn)歷出去。這樣，后面的一系列面試就順理成章了，沒(méi)有拖得太久，同時(shí)準(zhǔn)備的還不錯(cuò)。

另外，關(guān)于前端基礎(chǔ)知識(shí)以及計(jì)算機(jī)基礎(chǔ)，我已經(jīng)在博客里面做了系統(tǒng)的梳理，下面給大家一些已經(jīng)產(chǎn)出的內(nèi)容，讓大家可以完整地學(xué)習(xí):

CSS篇:

剖析一些經(jīng)典的CSS布局問(wèn)題，為前端開(kāi)發(fā)+面試保駕護(hù)航

JS 篇：

(建議收藏)原生JS靈魂之問(wèn), 請(qǐng)問(wèn)你能接得住幾個(gè)？(上)

原生JS靈魂之問(wèn)(中)，看看你是否熟悉JavaScript？

原生JS靈魂之問(wèn)(下), 沖刺進(jìn)階最后一公里(附個(gè)人成長(zhǎng)經(jīng)驗(yàn)分享)

瀏覽器篇:

(1.6w字)瀏覽器與前端性能靈魂之問(wèn)，請(qǐng)問(wèn)你能接得住幾個(gè)？

計(jì)算機(jī)網(wǎng)絡(luò)篇:

(建議收藏)TCP協(xié)議靈魂之問(wèn)，鞏固你的網(wǎng)路底層基礎(chǔ)

（建議精讀）HTTP靈魂之問(wèn)，鞏固你的 HTTP 知識(shí)體系

數(shù)據(jù)結(jié)構(gòu)和算法:

(1.8w字)負(fù)重前行，前端工程師如何系統(tǒng)練習(xí)數(shù)據(jù)結(jié)構(gòu)和算法？(https://juejin.im/post/5e2f88156fb9a02fdd38a184)

前端工程方案:

從頭開(kāi)始，徹底理解服務(wù)端渲染原理(8千字匯總長(zhǎng)文)

前端項(xiàng)目實(shí)戰(zhàn):

[掘金小冊(cè)《React Hooks 與 Immutable 數(shù)據(jù)流實(shí)戰(zhàn)》](https://juejin.im/book/5da96626e51d4524ba0fd237)

以上均為原創(chuàng)，希望對(duì)你有所幫助，至少我面試前反復(fù)看這些，效率還是很高的。

接下來(lái)進(jìn)入面試的階段。

面試階段

從上面的面經(jīng)中可以看到不同方向、不同級(jí)別的面試官各自的偏好不一樣，因此對(duì)于不同的面試官，采取的策略也應(yīng)有所不同。但我更想分享的是一些具有共性的地方，這些策略可以適用于絕大部分的面試場(chǎng)景，讓自己獲得更大的競(jìng)爭(zhēng)優(yōu)勢(shì)。當(dāng)然，所謂的面試策略，都是基于你前期充分的準(zhǔn)備，不然都只是天方夜譚，毫無(wú)可行性。

策略一: 備好殺手锏

面試官一天可能要面5-6人，甚至十幾人，那么你是否想過(guò): 他憑什么對(duì)你印象更加深刻？

心理學(xué)有一個(gè)效應(yīng)叫峰終效應(yīng)，就是人在一個(gè)有限的活動(dòng)當(dāng)中，對(duì)一件陌生事物的看法大致由兩個(gè)時(shí)間點(diǎn)所決定: 一個(gè)是高潮點(diǎn)，一個(gè)是結(jié)尾的點(diǎn)。

對(duì)面試而言，我認(rèn)為同樣是適用，具體來(lái)講，和面試官的交流，其實(shí)也就是和一個(gè)陌生人的交流，如何來(lái)給他留下更深刻的印象？需要在高潮點(diǎn)展現(xiàn)自己，在結(jié)尾點(diǎn)保護(hù)自己，在面試的過(guò)程中適當(dāng)給面試官一些和別人不一樣的回答和見(jiàn)解，使之感到驚艷，而在結(jié)尾的時(shí)候，你說(shuō)的話其實(shí)更容易被面試官記住，這個(gè)時(shí)候由于面試已經(jīng)接近尾聲，你可能沒(méi)有當(dāng)時(shí)那么緊張，這個(gè)時(shí)候需要適當(dāng)?shù)闹?jǐn)慎一些，不要徹底放松，避免不小心說(shuō)出一些對(duì)自己處境不利的話。

其實(shí)，我更想強(qiáng)調(diào)的是前者，即如何將面試帶上一個(gè)高潮點(diǎn)，并且讓面試官感到驚艷。其實(shí)這并不是什么簡(jiǎn)單的事情，畢竟能驚艷的只是少數(shù)，那么如果才能做到這一點(diǎn)呢？

在面試前，不妨準(zhǔn)備好自己的殺手锏。什么是殺手锏？就是每當(dāng)面試官問(wèn)到相關(guān)的問(wèn)題的時(shí)候，你能夠有自信比 90% 的人理解得更深刻，回答更出色。以我自己為例，我準(zhǔn)備的殺手锏并不少，HTTPS 所有加密算法，chromium 進(jìn)程 IPC 原理，斐波拉契第 n 數(shù)的 logn 解法，瀏覽器渲染過(guò)程，vue 編譯器架構(gòu)，vue 雙向綁定，快排以及手寫(xiě) V8 排序......

在其它基礎(chǔ)知識(shí)都 OK 的前提下，這些殺手锏是你技術(shù)上的核心競(jìng)爭(zhēng)力，這是你和其他人相比體現(xiàn)不可替代性的地方。當(dāng)然，時(shí)間有限，不可能每個(gè)角度都能研究很深入，但如果你不準(zhǔn)備，跟大家背一樣的答案，很難從人群當(dāng)中脫穎而出。

策略二: 適當(dāng)暗示

面試的過(guò)程其實(shí)就是一個(gè)和面試官互相試探的過(guò)程，一方面是他對(duì)你提問(wèn)，另一方面你需要給他一些信號(hào)，引導(dǎo)他去挖掘你的閃光點(diǎn)。

其實(shí)有兩個(gè)時(shí)機(jī)可以發(fā)一些暗示的信號(hào)，一個(gè)是自我介紹的環(huán)節(jié)，這個(gè)環(huán)節(jié)中可以向面試官展示出你之前深入研究過(guò)哪一塊的技術(shù)，指引他往那個(gè)方向問(wèn)，另一個(gè)是技術(shù)細(xì)節(jié)的提問(wèn)，可以在回答的時(shí)候適當(dāng)發(fā)揮，大部分面試官是愿意聽(tīng)你展開(kāi)的。

暫時(shí)先分享這么多吧，希望大家都能在春招當(dāng)中拿到自己滿意的 offer。