2020三元同學春招阿里淘系、阿里雲、位元組跳動面經 & 個人成長經驗分享 | 掘金技術徵文

本人今年 211 本科大三下，掘金六級博主，最近投實習，一共投了三家，阿里的淘系和阿里雲，位元組跳動的抖音，當然都是找人內推的，結果簡述如下:

1. 淘系二面通過，但入系統只能選擇一個，後來選擇了阿里雲；
2. 阿里雲走完了五輪面試，現在等 offer ；
3. 位元組跳動抖音三輪技術面+一輪HR，現在已經收到了前端架構組的 offer。

首先把面經分享給大家，由於技術水平和經歷的不同，我不敢保證我的面經問題對你有任何的參考性，但確實都是在真實的面試場景中遇到的，我所做的只是保證真實性和完整性。

位元組跳動三輪技術+一輪HR

3月17日下午 抖音架構組前端實習生 一二三面 + HR 歷時約 3.5 小時。

這份面經不僅僅列幾個題目就完事兒，中間摻雜了一些個人的一些表現以及和麵試官的互動，讓大家能更完整地感受到整個過程。另外，大廠面試嘛，你懂的，面試官喜歡從一個點切入往深了問，所以在會有非常多巢狀的問題，我覺得這才是真正的面試場景，而不是一條一條堆砌題目，跟做考試試卷一樣。

抖音一面(45min）：

• 自我介紹一下

• VueRouter 的原理你能不能說一下呢？(兩種路由方式說了一下)

  • 對於 History 路由而言，你覺得在服務端是如何做路由分發的呢？(愣住，面試官接下來跟我解釋了一波)

• 你說你看過 Vue 原始碼，能不能介紹一下 Vuex 的 Mutation 和 Action 的區別嗎？(mutation做同步操作，action一般用於非同步)

  • 為什麼要設計出 Mutation 和 Action 這兩個東西？(我開始不是很清楚，扯到 Redux，和麵試官交流後，一致同意 Action 作為業務邏輯的封裝更合適，提供了更大的自由度)

• 計算機網路看你寫過文章，我就不問了。(我: 笑...)問你一點作業系統的哈，能不能說說磁碟尋道演算法？(思考了一下，說了三種，FIFO，最短優先，電梯演算法)

  • 那你能不能說一說最短尋道時間優先的缺點是什麼？(愣住，面試官耐心給我解釋其實會造成遠處的任務飢餓問題)

• 程式和執行緒的區別(解釋了一波，順便把Chrome為什麼從單程式轉成多程式架構說了一下)

  • 知道哪些程式間通訊(IPC)的方式？ (主從式、會話式、訊息-郵箱機制、管道、共享記憶體、Unix Domain Socket，然後跟他講我看過 Chromium IPC 的原始碼，核心裡面把以前的 ChannelPosix 換成了 ChannelMojo，從而達到執行緒安全的目的，順便解釋了下執行緒安全，面試官表示很欣賞，說這個都看過，看來你學了不少)

• 能不能說說從輸入 URL 到頁面渲染經歷了什麼？(被問過很多次了，DNS 解析過程，HTML詞法分析和語法分析，CSS解析， 合成圖層、合成執行緒呼叫光柵化執行緒池，生成點陣圖後瀏覽器程式間通訊過程，顯示卡快取與顯示器的關係，面試官說可以)

• 給你一道演算法題，盛水最多的容器。直接給我最優解吧。

  

  我花了 15 分鐘寫完了，結果能跑通。給他解釋了一下思路，他說這個演算法核心的思路是什麼？我說短板效應吧，他說其實是貪心。沒答上來，感覺比較尷尬，我靈機一動，說可能貪心已經潛移默化到我的思想裡面了吧，他大笑，說可以、很強，稍等一會兒去叫二面面試官。一面就這樣愉快地結束了。

抖音二面(1個小時)

這個面試官就比較高冷了，全程不露臉，說話語氣特別凝重，可能沉默 5 秒鐘然後問你一個非常嚴肅的問題。

• 簡單的自我介紹

• ES5寫一個陣列去重(剛開始寫了一個O(n^2)時間的)

  • 能不能優化？ (我問能不能用新空間，他說可以，然後寫了一個O(n)時間的)

  • 能不能區別開數字和字串？(想了想，最後還是用indexOf方式，最優的沒想出來，面完猛然想出來了，當時腦子有點亂)

• 講一講 HTTPS 加密(對稱加密有AES + CHACHA20, 分組模式以前有 CBC、CTR，TLS1.3 中只剩下 GCM，非對稱加密 RSA、ECDHE)

  • 怎麼握手的呢？(講了三個版本：傳統 RSA、TLS1.2、TLS1.3, 後面也講了 TLS1.3 的 Session ID、Session Ticket 以及 PSK)

    • HTTPS 如何保證資料是否被篡改？(說了下有簽名的過程)

      • 簽名是什麼原理(私鑰加密，公鑰解密，比對雜湊摘要)

        • 你知道哪些雜湊摘要演算法(Sha256, Sha384)

• 你能不能介紹一下你的專案(說了下專案遇到的挑戰，說了這幾點: 1. 怎麼解決閉包陷阱。2. 通過 EventLoop 解決 transform 失效的問題)

  • 能不能說說你對 EventLoop 的理解(巨集任務-微任務-UI渲染)

    • 如果要在UI渲染之前做一些事情你會怎麼辦？(我會啟動微任務執行吧)

    • requestAnimationFrame 在 EventLoop 中是一個什麼位置？(給他解釋顯示器和瀏覽器的 Vsync 訊號，然後rAF首先執行，他貌似不滿意，我請教了他一下，給我解釋實際上rAF會在UI渲染之前)

      • 分離圖層做動畫有什麼好處呢？(給他講了分層的原理，通過設定 CSS 的 will-change 可以轉換為一個圖層，呼叫 GPU 加速)

        • 分離圖層會發生重繪嗎？(會)那既然重繪，它的好處在哪裡？(不會影響其他的圖層)

• 你覺得你哪些技術比較厲害？(Vue 原始碼，瀏覽器，服務端渲染)

• 你說你看過 Vue 的原始碼，能不能說說 computed 屬性為什麼能夠在依賴改變的時候，自己發生變化？(我說 computed 和 watch 公用一個 Watcher 類，在 computed 的情況下有一個 dep 收集依賴，從而達到更新computed屬性的效果，順便跟他講了computed Watcher如何跟渲染Watcher關聯，以及 Vue 在二次收集依賴時用 cleanupDeps 解除安裝一些無用的 dep)

• 你覺得你的優勢是什麼？(1.深度思考的能力 2.善於分享 3.社群影響力)

• 你對 webpack 瞭解多少？(我說了下 webpack 的一些優化手段，打包時間方面，預編譯、快取、縮小構建目標，說了大概十個外掛，然後打包體積上，JS 和 CSS 的Tree-Shaking 怎麼配置)

  • 你覺得 CommonJS 為什麼不能做 Tree-Shaking ?

    • ESModule 既然是編譯時載入，那它可以做到執行時載入嗎，想過這個問題嗎？(愣了一會，說webpack 有動態 import 的方式)

      • 寫過 loader 和 plugin 嗎？(實話實說，沒有)那你知道兩者有什麼差異嗎？(先loader後plugin)

• 你對未來的發展是如何規劃的？(談了談我對五級工程師的看法，我的階段目標是到達最低的第五級)

  • 你覺得你在專業上的目標是怎樣的？(成為領域前20%)

• 有什麼想問我的？(問了下可能觸及的技術棧，以及抖音在開源方面的打算)

抖音三面(1個小時)

這位小哥還是比較和藹的，聊的很多東西跟具體的技術細節就關係不大啦。

• 你是如何接觸到前端的？為什麼要選擇前端？為什麼不去搞 c++ 底層系統研發、後端、人工智慧？(說了下我的看法，他表示認可)

• 對學校的課抱著什麼樣的心態？

• 做這個專案的初衷是什麼？裡面有用到專業上學到的知識嗎？

• 如果每次要生成不一樣的 ID，你怎麼來設計這個系統呢？(跟他聊了聊雜湊衝突如何解決，他表示可以)

• 在學校應該學過 C 吧，你覺得 C 語言在設計上有什麼好或者不好的地方呢？(提了下虛基類，實在想不起來這玩意啥用了，順帶說了下多繼承的問題)

  • 如果讓你用 JS 來實現多繼承的功能，你會怎麼來做呢，或者用什麼其他的方式？(說了下自己對於繼承的看法，以及這個設計不太好的地方，然後更喜歡組合式的方式)

    • 比如說你是你媽媽的兒子，同時也是公司裡的員工、學校裡的學生，你怎麼去設計出你這個例項呢？(將不同的角色功能進行組合，然後例項化)

• 對前端的知識體系如果要分類的話，你怎麼分類？(談了談未來前端發展的四個分支)

  • 如果基礎知識要細分的話，你怎麼來分？(說了下學習基礎知識的三部曲，第一級應用，第二級原理，第三級建設社群和貢獻程式碼，我覺得我目前在第二級到第三級之間)

• 有想過去做一個開源的工具嗎？(談了談自己對於開源的理解)

• 在學校有參加什麼社團嗎？(有，在學校的一個協會，帶組內的人一起學習)

• 有什麼想要問我的嗎？(聊了聊面試官自己的技術經歷，全程還是蠻愉快的)

HR 面:(30min)

• 做專案的初衷在什麼地方？

• 歌曲倍速播放的功能是怎麼實現的？為什麼要想到這個？

• 公司的業務可能會壓榨自己開源分享的時間，你會介意嗎？

• 公司內的一些程式碼不能開源，和你自己的開源分享衝突了，你怎麼辦？

• 你為什麼不早點去實習？現在才開始找實習？

• 看了你的 GPA ，還是蠻靠前的，你怎麼平衡學校的學業和技術的學習的？

• 怎麼看待別人在你部落格下面發一些懟你的評論？

• 在學校有社團經歷嗎？

• 自己平時有什麼興趣愛好？

• 和室友關係咋樣？

整體感受

面試了一下午，前面三面連續說了太久，到 HR 面的時候聲音已經嘶啞了，不過位元組的面試體驗還是非常好的，效率相當高。自我感覺還算不錯，主要是因為兩點:

1. 面試官問的問題都是引導性的，而不是死扣一個具體的知識點叫你填空，通常給一個非常寬泛的話題，讓你去發揮，因此給了自己非常大的發揮空間，不過這也和自己前期充分的準備有關係。
2. 面試官嘗試去問你一些更加深入的問題，直到把你問住，這是好事情，因為他的水平一般在你之上，能問出深度來，說明他很重視你。

3 月 20 號，抖音 offer 如約而至。

淘寶兩輪

淘寶一面

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

• 首先自我介紹，怎麼學習前端的
• 能不能說說瀏覽器的快取(靈魂之問，一時想不起來了，尷尬，尋求提示)
  • cache-control 有哪些欄位？設定 max-age: 0 跟瀏覽器緩不快取有關係嗎？s-max-age 的作用？
  • 強快取和協商快取的順序
• 能不能說說 Cookie 有哪些欄位？(我說了 domain、path、httpOnly、sameSite的三種取值)
  • 還有嗎？關於 https 的一個欄位(擦，不知道，過吧)
• 說說箭頭函式和普通函式的區別(說了寫法，原型，this，還有呢？愣了一會，尋求提示)
  • 箭頭函式的 this 是宣告時確定還是執行時確定？(執行時確定吧)
    • 箭頭函式可以 new 嗎 ？ 說一說 new 的原理。
• TCP 三次握手
• 你應該對 React 原理很瞭解嗎？(我打斷了，React 原理不熟，問我 Vue 吧，後來問了一個 diff 就完事了)
• 從輸入URL到頁面展示發生了什麼？(我說了大概 2 分鐘 DNS 解析過程，被喊停，然後繼續講HTML解析，CSS解析，合成圖層、合成執行緒呼叫光柵化執行緒池，生成點陣圖後瀏覽器程式間通訊過程，顯示卡快取與顯示器的關係，大概說10-15分鐘吧)
  • 重繪和迴流瞭解嗎？
    • 怎麼進行優化？(說了一種批量操作，別的好像忘了，他提示我 DOM 離線操作也可以)
• 有沒有了解過前端一些前沿的方向(說了flutter，dart，看過你們團隊的 serverless 文章)
  • 瞭解過 WebAssembly 嗎？(沒有啊)
  • 瞭解過 PWA ?(我個人覺得要涼，然後問我 PWA 原理是怎麼樣的呢？說了下大概Service Worker吧，不太熟)

最後，主管告訴我，基礎還是非常紮實的，通過的概率還是很高，希望能選擇淘系團隊。

淘寶二面

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

• 介紹一下你的專案(我說了一下技術棧，遇到的挑戰和解決方案)
• 你只學了一年半，就有這麼多關注量了，你是怎麼做到的？
• 你覺得你基礎怎麼樣？(JS 很紮實，Vue 翻完原始碼，React 略懂原理)
• 你覺得 React 和 Vue 有什麼共通之處？
• 說一下瀏覽器渲染過程(說的很詳細，面試官說可以，細節把握的很professional)
• 說一下對於前端技術的發展過程(從刀耕火種的年代說起，到後來的jq，angular，react，vue 三大框架，gulp、grunt、rollup、webpack 打包工具，然後到未來的一些方向，比如 PWA, 跨端，serverless，微前端，webassemblely，加入了我自己的理解)
• 你覺得前端除了完成頁面互動稿之外，還能做其他的什麼事情？(首先是效能優化，其次是處理資料，然後是工程化)
  • 你覺得工程化的理解是怎樣的？(從程式碼的角度，編譯、壓縮、規範，從人的角度，團隊協作、統一產出標準)
• 你覺得你選擇阿里雲或者淘寶，你選擇的標準的什麼？
• 還有什麼想問我的嗎？(問了一些轉正和部門相關的事情)

總體而言，面試官基本沒問什麼基礎，考察對前端的思考和個人的一些思考，跟我講這方面的能力還是不錯的。

後來流程選擇了阿里雲，接下來我們看阿里雲的部分。

阿里雲五輪

阿里雲一面

3.10晚 阿里雲一面：

• HTTPS 的握手過程講一講。(講了很久很細，面試官知道我理解，喊停了)
  • HTTPS 和 HTTP 的快取有什麼區別？(懵了)
• DOM API 掌握怎麼樣？ (不是很熟)
  • Element 和 Node 的區別(假裝想了一會，不知道)
• XSS 攻擊 Cookie相關的欄位(HttpOnly, 解釋了一下作用)
• CSRF 攻擊，解釋一下 Cookie 的 SameSite 欄位 (說了下，覺得可以，過)
  • chrome 最新的 xxx 特性是如何防範 CSRF 攻擊 (這個真沒聽說過)
• fetch 和 xhr 有什麼區別？(fetch 不熟)
  • 好，解釋一下 xhr 的 cors 過程(簡單請求，非簡單請求兩種情況，說了下)
• React 閉包陷阱有什麼好的解決辦法嗎？(說實話，簡歷上寫了，實際上理解不深，只說了一種)
  • useReducer 可以解決你知道嗎？ (當時真的不清楚，主要忘了閉包陷阱的表單場景，尷尬)
• 看了你的小冊子，能不能講講React.memo 和 JS 的 memorize 函式的區別(memorize函式當時不知道，以為是什麼高深的演算法，後來才發現就是cache函式，換了個名字而已。反正當時說不會)
  • 特意考了一題對React.memo的理解(擦，還是考React.memo, 三個場景，中間一個場景答錯了，非常減分。這道題出的還是很有水平)
• WeakMap 和 Map 的效能有什麼差別?(前者對 GC 更加友好，保持弱引用)
  • 如果是在立即執行函式中，兩者的效能有區別嗎？(楞了一會，說強弱引用還是會有GC的區別，沒影響)
    • 換個說法吧，如果這個立即執行函式中有遞迴函式，兩者效能有區別嗎？(沒 GET 到面試官的點啊，過了吧這題)
• 能不能說說 AMD 和 ESModule 有什麼區別？(AMD 不熟，說ESModule，介紹了import、export以及匯出引用的特點)
  • 那麼你能不能告訴我 ESModule 對於 Tree-Shaking 有什麼優勢呢？(會做一些編譯階段的優化吧)
• async await 經過編譯後和 generator 有啥聯絡？(問了兩遍，還是不知道問的啥，直接說了async await 原理，他說你講了太深，問的不是這個，過吧過吧)
• 有什麼想要問我嗎？

反問的問題:

1. React 閉包陷阱如何用 useReducer 解決？ (面試官又說了一遍)
2. 能不能說一說您正在做的業務中，遇到什麼挑戰，有什麼解決思路？(說了很多，看的出來，阿里的大神都是特別有想法、有創意，最後也給我指引了一些未來的方向， 比如前端未來的容器化，對於中臺頁面的構建進行服務級別的呼叫，而不是去一個個元件去寫，瞭解一下後端的安全容器概念，另外推薦我去看一看螞蟻金服的微前端框架的實現。深深的佩服，開了眼界，收穫很大!)

另外，一面並沒有發揮我的優勢，問的問題跟我不太match，甚至有些問題都沒有聽懂，雖然看的出來面試官比較欣賞我，但個人覺得情況很不樂觀。掛了也就掛了吧，我覺得掛了也正常。

後續: 3 月 11 號下午內推我的大佬來信，瞭解到昨天面我的是團隊中公認技術最牛的專家，面試官給的評價是，雖然有一些問題，但是整體表現不錯，在應屆生裡面已經可以了。好好等下輪。

阿里雲二面

3.19 晚 阿里雲二面(37min)

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

二面主管問我先面試還是先筆試，因為有兩個流程。我說先面試吧。

• 首先自我介紹
• 為什麼要做你這個開源專案？後臺資料哪來的？
• 有 nodejs 相關的開發經驗嗎？(果斷說沒有，避免給後面挖坑)
• HTTP 的 GET 和 POST 請求有什麼區別？(我說了 4 個區別)
• 說一說 CSRF 和 XSS 攻擊？(說了一堆，他說你講的太細了，是不是最近看過之類的文章，我說沒有)
• HTTP 快取能不能說一下？(強快取，協商快取，中間扯到代理了，講了一堆，他說可以了)
• 你知道 JS 的語言標準是如何制定的嗎？(確實不熟，說下去自己查查)
  • 你用過哪些 ES 最新的語法，越新越好
• 你對 babel 瞭解嗎？能不能說說幾個 stage 代表什麼意思？
• Vue 的響應式對陣列是如何處理的？(重寫陣列方法，手動派發更新)
  • Object 為什麼可以自動派發更新？
• 假如我在一個for迴圈中改變當前元件依賴的資料，改變一萬次，會有什麼效果？(講到批量更新和 nextTick 原理，他表示可以)
• 假如讓你設計一個適配 PC、手機和平板的專案，你有哪些佈局方案？(首先是vh、vw，然後用淘寶出品的 lib-flexible 庫進行 rem 適配，還有一種 flex + px 的適配方式)
• CSS 當中以 @ 開頭的屬性有哪些？(我說了@media, @keyframes，後來提醒我還有@import，我補充這個是序列載入 CSS)
• 瞭解過前端當前的發展趨勢嗎，比如一些新的技術方向。(說了對PWA的看法，為什麼會涼，flutter、electron、微前端，serverless)
• 瞭解過雲端計算嗎？能不能講一講雲端計算的發展方向和前景？(沒了解過)
• 有什麼興趣愛好？
• 對自己的職業規劃是怎樣的？(說了一大堆，他笑了笑，說今天就到這裡吧，明天筆試)

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

阿里雲三面

3.20 阿里雲三面(57min)

聊了狠多，但是聊的很輕鬆，沒有程式設計題，而且和個人經歷強相關，就不整理題目了。

阿里雲四面

3.24 阿里雲四面(40min)

讓人自閉的一場交叉面。

• 自我介紹
• 為什麼選擇前端？(說了很多，他叫我用一句話總結)
• 你的職業規劃是怎樣的？
• 專案中遇到了哪些挑戰？
• 說說你對前端架構的認識，如何設計出一個架構方案(說實話，我頂不住，沒研究過)
• 在一個大型專案中，如何定位發生記憶體洩露的程式碼？(沒有實踐過)
• Last-Modified 和 Etag 有什麼區別？
  • Cache-Control 和 Last-Modified 的區別
• 後端語言對 nodejs 更熟還是 Java 更熟？(Java)
  • 說說 String, StringBuilder 和 StringBuffer 的區別
• 跨域有哪些方案？
• React 受控元件和非受控元件的區別

阿里雲五面

3.26 阿里雲終面(50min)

• 自我介紹
• 你自己在社群做過什麼具有推動性的事情？
• 你能不能說說自己比較擅長的資料結構有哪些?
• 在學校參加過競賽嗎？
• 你希望公司的環境是怎麼樣的？
• 為什麼不投騰訊？(阿里面的已經很累了，秋招再投吧)
• 阿里雲和抖音你更想去哪裡？
• 你還有什麼問題？

個人經驗分享

面經就分享到這裡了，可能是因為在社群比較活躍，在面試之前很容易地拿到了內推資格，並且在一輪輪的面試憑藉這部分經歷得到了面試官的賞識，所以一路下來感覺難度並不大，還算是非常順利的，至少目前所有的面試中沒有一輪掛掉。

在我微信公眾號【前端三元同學】的後臺中也能夠看到有些同學的留言，不少人要我分享一下學習前端的一些方法和經驗，以前我是非常抗拒的，因為我覺得自己並沒有這個資格，但現在經歷了這一輪輪面試的檢驗，我覺得現在是時候回顧和分享一波了。主要分兩個方面來講吧，一個是前端技術的學習，另一個是面試當中需要注意的一些case。

學習經歷及經驗

個人經歷

回想我大一的時候，讀的是機電工程，後來在大一下的時候轉到了學校的計算機專業，從此開始了科班生的生涯。接觸前端也大概是在大一下學期，在一個叫萬門大學的地方偶然發現了一套 JS 的視訊，看著感覺不錯，想深入這個領域，但後來發現越往後面學越需要一些計算機科班的專業基礎，於是我當時果斷轉到了計算機。因此這一步選擇算得上偶然，也是一個必然。

大二上學校的課程壓力比較大，不溫不火地學了一個學期，中途有過做全棧的想法，報了個 Python Web 培訓班，但是學的不好，後來直接放棄了，決定還是回過頭來好好把前端搞紮實吧，重新學了一遍 JS，然後看了看 JQuery，研究了裡面選擇器實現的原始碼，然後去學 Vue，當然也跟著網上的教程做了一些專案，比如慕課網上黃軼老師的餓了麼專案和炸雞音樂Web App，還有 Dell Lee 的 Vue去哪兒網實戰，一步步做完感覺對自己實戰能力的提升還是很大的，起碼能自己獨立倒騰一個專案出來了。

大二下學期我開始接下了人生當中第一個外包專案，也參加了計算機設計大賽，賺來了三千多的第一桶金，也拿到了中南賽區二等獎的證照。這一切在外人看來其實是相當不錯的經歷了，但對我而言，我一直能夠感受到一種強烈的危機，由於專案一直在趕時間，很多時候秉著能出來效果就行的心態來做，很多細節並沒有我想象中做的那麼完美，而且框架裡面偶爾會出一些問題，但是我並沒有時間去理解其中的原理。我覺得這並不是我要追求的東西。這種心態，說的好聽點叫追求極致，難聽點，就是強迫症。

在這種心態的驅使下，完成了外包和比賽後，我馬上了投入了更深一步的學習。《JavaScript高階程式設計》好好再翻一遍，ES6 重新好好學一遍，看了一遍珠峰周嘯天的 JavaScript 視訊，在 CSDN 上做了相關的筆記(我覺得不算部落格)，以及在慕課網上學習了webpack的課程，React的入門視訊，一路狂奔，學了很多。

也正是大二下學期期末的時候，我開始了在掘金發表第一篇文章，標誌著寫部落格的經歷正式開始。讓我驚喜的是，發表出來的第一篇部落格就被掘金社群的公眾號轉載了，我喜出望外，感覺特別驚喜，於是準備繼續寫下去，不斷規劃和輸出新的內容。

很快，大二下結束後，暑假就到來了。在這個時間有些小夥伴已經出去找實習了，但我深知自己離 offer 還有一些差距，於是又感受到了一絲危機。我曾經問過自己: 如果我要去找實習，會遇到哪些問題？

• 首先，專案自己覺得深度不夠，拿不出手。
• 其次，計算機基礎並不紮實，資料結構和演算法掌握的並不好，計算機網路也沒基礎。
• 最後，前端技術的一些原理知之甚少，更別說框架原始碼了。

因此，在大三前的暑假開始，我開始給我的未來實習佈道。首當其衝的就是自己去做一個讓自己滿意的專案，這個專案必須足夠的精緻，同時不是為了應付任何人。這個專案採用 React 來做的，當時是統一用的 class 元件，後來想試用一下 hooks 特性，發現真香，直接用 hooks 重構了。這個專案也就是我那本掘金小冊專案的前身。當我把程式碼放到 Github 上的時候，沒幾天的時間就收穫了上百了個 star，讓我感到特別意外，而不久之後就有同學在 issue 區留言，覺得是一個不錯的練習專案，能不能弄個教程出來。接下來我嘗試著這個專案更大的價值，事實上我也做到了，寫成了小冊放到社群，反響還不錯。關於專案具體細節，詳情請點這裡檢視。

關於計算機基礎，我在大三上學期花了不少的精力學習資料結構和演算法，首先學完了慕課網 bobo 老師的資料結構從入門到進階、演算法與資料結構綜合提升以及玩轉演算法面試這三門課程，夯實了所有的基礎之後，開始鋪天蓋地地刷 leetcode，一學期刷了 100 多道演算法題。對於計算機網路，當時確實沒有時間學了，就把這部分的計劃放在了寒假。

最後是前端技術的深入學習，分為 3 個方向精進，JS 基礎、瀏覽器和框架。

一方面是JS的學習，對我而言，JS 明明學了很多遍了，但是實際上忘的也很快的，我打算重讀一遍紅寶書，然後重新建立完整的 JS 知識體系。緊接著我開始了《JS靈魂之問》系列部落格的創作，嘗試著去系統地整理 JS 的知識點，又必須要達到一定的深度，當時對我來說其實是一個相當大的挑戰。在這個整理的過程當中，我也逼著自己去參考了大量的資料和部落格，說實話學到了不少，更讓我意外的是，這個系列讓我從此在掘金大火，幫助了許許多多在 JS 進階路上的前端。

在瀏覽器這塊，其實很多執行原理之前也是一知半解，直到一個偶然的機會，發現了極客時間上一個口碑不錯的專欄，專門講瀏覽器的，耐下心來讀完之後，感覺收穫還是挺大的，推薦大家去好好看看，解開了之前很多關於瀏覽器原理的疑惑。

然後是前端框架，我後面逼自己去讀完了 Vue 原始碼，原因很簡單，為了面試，但沒想到的是，我目前遇到的面試對我原始碼方面問的並不深，只是非常常規的一些原理性的問題，但無疑的是，通讀原始碼這個指標對面試的評估來講是相當加分的，並且能夠讓自己站在一個更高的高度去應對面試，遇到相關的面試問題會非常從容。更重要的是，閱讀完原始碼，對我個人對於 JS 的理解和 SDK 設計以及設計模式的理解更加深入了一步，這是我當時沒有想到的，也是很長一段時間讓我受益的財富。可能有人會問你是怎麼就做到的，關於原始碼的閱讀方法，話題有點大，後面再介紹吧。

大三上就準備了這麼一些東西，順帶著整理了自己的部落格，期末的時候已經上架小冊、粉絲過萬了。

緊接著到了寒假，我把資料結構和演算法重新複習了一遍，TCP 和 HTTP 好好系統學了一遍，同時看了一些 chromium 的原始碼，複習了一波 Vue 原始碼，感覺火候差不多了就開始投遞簡歷了，於是投了阿里和位元組跳動，便有上面的面經了。

親身經驗分享

目前的經歷分享就這些，可能會有些記流水賬的感覺，但正是這樣我覺得才足夠真實，因為對前端而言，不可能照著一個系統的學習路徑按部就班，然後達到一個很高的水平，這種美化過的經歷說出來連我自己都不信，誰的人生不是這麼誤打誤撞過來的呢？那你可能就會問了，你憑什麼能夠把基礎學的那麼紮實，通過這些大廠的面試呢？

我覺得有兩點，一點是外在的因素，一點是內在的因素。

對外在的方面，我在輸入一些資訊的同時，會加入自己的思考和推敲，然後用自己的方式來輸出，整理成部落格，這使得我能夠對知識體系本身有更加深刻的理解，同時也能在忘記這部分知識點之後，重新回顧的時候能夠很快撿起來，節省了非常多複習的時間。

對內在的方面，我覺得自驅力是一個比較重要的因素，即自己驅動自己學習的能力。其實說起來容易，做起來是非常難的，因為外界的誘惑實在是太多，而且學習本身就是脫離舒適區的活動，是一種反人性的活動，本身就是讓人不舒服的，因此很多人不願意主動學習，這是完全可以理解的。那我為什麼會有這種強烈的自驅力呢？

因為危機感，危機感隨之帶來了恐懼。

為什麼這麼說？

以前聽《得到》APP上的樑寧老師講過，人性其實只有兩大痛點: 一個是愉悅，一個是恐懼。 愉悅感可以讓人沉浸在一件事情當中幹一萬小時，成為高手，而恐懼帶來的動力更加顯著。對產品來說，要麼就讓使用者爆爽，要麼就去幫助他抵禦恐懼，否則就不是一個優秀的產品。那麼對於個人的成長而言，你做一件事情，沒有找到任何愉悅的感覺，也沒有產生過任何恐懼，那麼他基本上在這個領域一事無成。

換句話說，如果一件事情讓你非常瘋狂地去做，要麼這件事讓你爆爽，要麼它幫助你抵禦恐懼。

對我來講，真正驅動我的是後者。危機意識讓我挖掘出真正的痛點，發現自己的恐懼所在，從而帶來強大的自驅力。如果說僅僅是學一些東西來炫耀一番，或者只是去迎合外界的期望，這種動力可以有，但僅僅只是暫時的。當你走出舒適區，面對外界無數誘惑的時候，真正能 carry 你繼續學習的是你內心的痛點。

我覺得明白這一點，比所謂的學習路徑、學習方法重要得多。因為大多數時候我們不是缺少學習資料，或者沒有掌握什麼高效的學習方法，只是因為你動力不足、容易懈怠罷了。每個人情況都各不相同，但我覺得想要成長，挖掘自己真正的痛點是最重要的一件事情。

面試經驗分享

準備階段

在面試之前，可能很多人會跟我一樣感到焦慮，覺得自己還沒準備好，想多複習一些東西，可越複習越感覺自己不會的東西更多，從而遲遲不敢出去面試。這其實是個悖論，原因就在於技術本身就是學不完的，此時我們需要好好調整一下自己的心態，做兩手準備:

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

準備時間是有限的，我們需要做的就是利用有限的時間達到最大效益的產出，因此儘量地做一些複習鞏固和查漏補缺，發揮自己的優勢，而不要去為了面試學新技術，或者深挖自己從未涉獵的領域。我根據自己目前的實際水平，制定了這樣一份面試知識體系:

其實當時有些知識並沒有完全掌握，但是又需要出去面試，所以給了自己一個截止日期，在 3 月 10 號之前，盡全力準備，到了 deadline，無論如何都要投簡歷出去。這樣，後面的一系列面試就順理成章了，沒有拖得太久，同時準備的還不錯。

另外，關於前端基礎知識以及計算機基礎，我已經在部落格裡面做了系統的梳理，下面給大家一些已經產出的內容，讓大家可以完整地學習:

CSS篇:

剖析一些經典的CSS佈局問題，為前端開發+面試保駕護航

趣味CSS3效果挑戰小彙總

JS 篇：

(建議收藏)原生JS靈魂之問, 請問你能接得住幾個？(上)

(建議精讀)原生JS靈魂之問(中)，檢驗自己是否真的熟悉JavaScript？

(2.4w字)原生JS靈魂之問(下), 衝刺?進階最後一公里(附個人成長經驗分享)

瀏覽器篇:

(1.6w字)瀏覽器靈魂之問，請問你能接得住幾個？

計算機網路篇:

(建議收藏)TCP協議靈魂之問，鞏固你的網路底層基礎

(建議精讀)HTTP靈魂之問，鞏固你的 HTTP 知識體系

資料結構和演算法:

(1.8w字)負重前行，前端工程師如何系統練習資料結構和演算法？

前端工程方案:

實現一個簡單的webpack

styled-components:前端元件拆分新思路

從頭開始，徹底理解服務端渲染原理(8千字彙總長文)

前端專案實戰:

掘金小冊《React Hooks 與 Immutable 資料流實戰》

以上均為原創，希望對你有所幫助，至少我面試前反覆看這些，效率還是很高的。

接下來進入面試的階段。

面試階段

從上面的面經中可以看到不同方向、不同級別的面試官各自的偏好不一樣，因此對於不同的面試官，採取的策略也應有所不同。但我更想分享的是一些具有共性的地方，這些策略可以適用於絕大部分的面試場景，讓自己獲得更大的競爭優勢。當然，所謂的面試策略，都是基於你前期充分的準備，不然都只是天方夜譚，毫無可行性。

策略一: 備好殺手鐗

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

心理學有一個效應叫峰終效應，就是人在一個有限的活動當中，對一件陌生事物的看法大致由兩個時間點所決定: 一個是高潮點，一個是結尾的點。

對面試而言，我認為同樣是適用，具體來講，和麵試官的交流，其實也就是和一個陌生人的交流，如何來給他留下更深刻的印象？需要在高潮點展現自己，在結尾點保護自己，在面試的過程中適當給面試官一些和別人不一樣的回答和見解，使之感到驚豔，而在結尾的時候，你說的話其實更容易被面試官記住，這個時候由於面試已經接近尾聲，你可能沒有當時那麼緊張，這個時候需要適當的謹慎一些，不要徹底放鬆，避免不小心說出一些對自己處境不利的話。

其實，我更想強調的是前者，即如何將面試帶上一個高潮點，並且讓面試官感到驚豔。其實這並不是什麼簡單的事情，畢竟能驚豔的只是少數，那麼如果才能做到這一點呢？

在面試前，不妨準備好自己的殺手鐗。什麼是殺手鐗？就是每當面試官問到相關的問題的時候，你能夠有自信比 90% 的人理解得更深刻，回答更出色。以我自己為例，我準備的殺手鐗並不少，HTTPS 所有加密演算法，chromium 程式 IPC 原理，斐波拉契第 n 數的 logn 解法，瀏覽器渲染過程，vue 編譯器架構，vue 雙向繫結，快排以及手寫 V8 排序......

在其它基礎知識都 OK 的前提下，這些殺手鐗是你技術上的核心競爭力，這是你和其他人相比體現不可替代性的地方。當然，時間有限，不可能每個角度都能研究很深入，但如果你不準備，跟大家背一樣的答案，很難從人群當中脫穎而出。

策略二: 適當暗示

面試的過程其實就是一個和麵試官互相試探的過程，一方面是他對你提問，另一方面你需要給他一些訊號，引導他去挖掘你的閃光點。

其實有兩個時機可以發一些暗示的訊號，一個是自我介紹的環節，這個環節中可以向面試官展示出你之前深入研究過哪一塊的技術，指引他往那個方向問，另一個是技術細節的提問，可以在回答的時候適當發揮，大部分面試官是願意聽你展開的。

最後

暫時先分享這麼多吧，希望大家都能在春招當中拿到自己滿意的 offer。

ps: 個人部落格彙總Github倉庫

如想獲取更多資料或者聯絡加群，可以關注我的微信公眾號，如下: