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.二、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倉庫

如想獲取更多資料或者聯繫加羣，能夠關注個人微信公衆號，以下: