前言

我是18屆畢業的，普通本科，軟體工程專業，剛畢業時我意氣風發，覺得進大廠挺容易的，但是現實卻給我狠狠來了一擊，

校招面了各種大廠，不是一面掛就是二面掛，連三面是什么樣子都沒見過，說實話，當時被打擊的不輕，但是沒辦法，生活還得繼續，

認知到自己的能力只是個菜雞，又迫于生存，最終去了一家三線廠做前端開發的作業，

正文

這次之所以想出來面試，一共有兩個原因：其一是，心里一直有個大廠的夢，想進大廠看看，其二是，自己想回南方發展了，還有就是順便看看自己水平到底如何了，

所以在今年2月份開始，我就以及開始復習面試的相關知識了，并著手準備相關材料，

對下一份作業的核心訴：大平臺 + 有技術沉淀 + 知名前端團隊，

所以一共投遞了 5 個職位：

• 螞蟻體驗技術部
• 騰訊AlloyTeam
• 百度「愛速搭」團隊
• 頭條抖音支付
• 滴滴

面試結果：螞蟻、騰訊、百度都通過面試拿到了offer，抖音二面掛了，滴滴HR面拒了，

能夠拿到那么多大廠的offer，說實話我已經是非常滿意了，也算是對我這兩年來的肯定吧！下面我會把面試經歷和經驗分享給大家，

面試經歷

百度

一面

1.webpack 中 chunkHash 與 contentHash 區別；

2.寫過 webpack 的 loader 和 plugin 么；

3.webpack 處理 image 是用哪個 loader，限制成 image 大小的是...；

4.webpack 將 css 合并成一個；

5.webpack 的搖樹對 commonjs 和 es6 module 都生效么，原理是；

6.實作一下「模版字串」功能；

7.實作一下 Promise.all (Promise 不用寫)；

8.怎么實作回應式布局的；

9.css flex 的各個屬性值；

10.css 影片 animation 各個時間值含義；

11.css 如何實作讓一個元素旋轉并橫向移動，如果只用一個 css 屬性；

12.less 與 sass 區別，技術選型時如何取舍；

13.ES6 symbol 如何使用以及使用場景；

14.ES6 Proxy 如何使用以及使用場景，說說 Reflect；

15.generator 有什么應用場景;

16.async await 如何實作的；

17.git reset 與 revert 區別，revert 多個 mr 改如何處理；

18.git 如何撤回 add 后的內容；

19.http2 與 http1.1 區別，了解 http3 么，說說；

20.tcp 與 udp 的區別；

21.還問了簡歷相關的一些問題(例如：性能優化、E2E 測驗相關的);

二面

1.介紹一下專案；

2.手寫在 給定的 n 個數中隨機取出 m 個數，要求等概率；

3.手寫一下防抖節流函式；

4.設計實作一個「星級評分」組件；

5.說說 http 快取；

6.call、apply、bind 三者的區別，如何實作 bind；

...其他一些記不住了，這一面很多手寫：）

三面

這一面沒有問前端基礎支持，只是對簡歷中的一些專案進行了提問，還問了前端的學習經歷以及后續的職業規劃...
這面通過后就是 HR 了，聊 offer ...

阿里

一面

1.介紹一下你自己，以及專案，簡單說一下你做了什么，有什么難點及亮點；

2.js 有哪些基本型別，說說 typeof 與 instanceof；

3.說說 new 運算子；

4.什么是 event loop；

5.Promise 的用法？了解 allSettled 方法么，怎么實作？

6.說說閉包；

7.ES5 實作繼承的方法;

8.說說跨域；

9.commonJS 與 ES6 模塊化區別；

10.webpack 了解么？loader、plugin 分別是干嘛的？如何實作一個 loader？

11.webpack 如何優化打包速度；

12.說一下 css 盒模型，border-box 和 content-box 區別；

13.說說 BFC；

14.移動端回應式布局怎么實作的；

15.說一說 flex 布局，有了解 Grid 么；

16.有兼容 retina 螢屏的經歷嗎？如何在移動端實作 1 px 的線;

17.說一下 react 組件的生命周期；

18.react 組件如何做性能優化，說說 pureComponent；

19.呼叫 setState 之后發生了什么;

20.了解 fiber 么？解決了什么問題？具體原理是；

21.有用過 hooks 么？怎么看待 hooks？它的原理是；

22.了解過 react 最新的一些動態么？time slice 、suspense、server component 能說說么；

23.了解最近一些新技術么，webpack5 做了哪些新突破；

24.為什么 vite、snowpack 可以比 webpack 快那么多？具體原理是；

25.什么是 CSRF 攻擊，怎么預防；

26.為什么說用 css 實作影片比 js 影片性能好；

27.什么是 合成層；

28.http2 與 http1.1 區別；

29.說一說 http 快取；

30.http 狀態碼；

二面

1.自我介紹，介紹專案，問專案中的一些問題；

2.18年畢業的，學校的知識沒忘吧.. 計算機網路、編程語言、設計模式、資料結構演算法、編譯原理你對哪個比較熟悉?😨（我答得是計算機網路）

3.路由器和交換機的區別；😨

4.實作斐波納切數，遞回和非遞回的時間復雜度分別是多少；
...還有其他一些基礎問題，沒記住：）

三面+HR 面

這一面沒有問前端基礎相關的問題，問了我專案中的一些技術細節，方案設計上的問題，偏右老師的問題真的很有水平，直切要害，都是專案推程序序中遇到的坎，還問了一些后續規劃的問題，

關于 HR 面，之前看很多人說阿里 HR 面比較難，而且會刷人，但就我的經歷來看，就是一些比較常規的問題，如：

1.為什么選擇跳槽；

2.如何應對作業上的壓力；

3.今后的職業規劃是；

4.說說優缺點；

5.希望阿里給你什么；

這些問題可以先想想，然后如實回答即可，

騰訊

一面

1.手寫大數相加方法；

2.實作一個方塊的拖拽；

3.問了一些專案的問題，以及相關技術細節；

4.從一個 URL 輸入到頁面渲染，經歷了哪些程序，盡可能的詳細；

5.tcp 握手 回收程序，了解泛洪攻擊么；

6.說說 event loop（并出了一道題，寫輸出順序）；

7.SSR 怎么做的，怎么保證同構？server 端的資料都 renderToSting 消費了，為什么還要給到 client 端；

8.js 的嚴格模式；

9.說說 Iterator 的使用；

10.說一說快速排序的程序；

11.node 如何捕捉錯誤，記憶體泄漏怎么排查；

二面

1.依舊是專案問題...

2.性能優化怎么做的，有收益的，怎么衡量收益的；

3.為什么要做 SSR；

4.E2E 測驗怎么做的，怎么保證測驗覆寫率和準確性；

5.如何合理分配 node 服務資源；

這一面對于專案里的技術細節問的很深入，還問了些計算機網路、React相關的問題...

三面

1.專案...;

2.hybrid 通信原理；

3.如何看待小程式，它的技術原理是；

4.設計一個協同檔案的技術流程；

5.離線包怎么做的，現在公司的 app 提供了哪些特殊能力；

6.質量保障平臺如何做的，專案中單元測驗怎么做的，為什么要有 E2E 測驗；

就記到這些問題...

四面

1.希爾排序，堆排，快排；

2.this 指向問題，說出輸出內容；

3.如何設計一個組件庫；

4.了解 TypeScript 么，了解哪些新特性；

5.說說 React Fiber...;

6.為什么 Fiber 雙向鏈表的結構可以解決遞回慢的問題；

7.了解設計模式么，說說單例模式的優缺點;

8.職業規劃；

9.目前拿了哪些 offer ...；

這一面 hr 約的時候和我說是 GM 面，本以為會和其他公司一樣，主要考察技術視野和職業規劃...
但一上來問我技術問題著實沒想到....
這面結束后就是 HR 面，兩個 HR 同時面，感覺全程都是我瘋狂講故事，

如何準備面試

簡歷的準備

由于平時自己也負責組內進行一些面試作業，作為面試官來說，簡歷真的很重要！！它是面試官對你的第一印象，所以簡歷的排版以及內容質量很關鍵，

關于簡歷的排版，我總結起來以下幾點：

1.簡歷的格式一定要用 PDF ！！；

2.個人資訊、聯系方式盡量的放在前面，簡歷排版需緊湊，不要太松散；

3.對于一些技術堆疊、關鍵詞需加粗強調；

4.簡歷整體內容盡量控制在兩頁以內，陳述句需精簡，切勿啰嗦；

對于簡歷模板，我也是準備了一套簡歷模板，需要的同學直接去文末領取，

主要復習點

HTML以及CSS篇

1.說下你常用的幾種布局方式
集中往盒模型、flex布局說(至于grid布局，這個我看過沒有用到過)

2.實作水平居中的幾種方法？

3.animate和translate有沒有用過，一些常見的屬性說下？

4.CSS實作寬度自適應100%，寬高16:9的比例的矩形，

5.如何實作左邊兩欄一定比例，左欄高度隨右欄高度自適應？

JavaScript篇

1.變數提升遇到的一些簡單code題

2.說一下對閉包的理解，以及你在什么場景下會用到閉包？

3.說一下你對原型與原型鏈的了解度，有幾種方式可以實作繼承，用原型實作繼承有什么缺點，怎么解決？

4.iframe的缺點有哪些？

5.Ajax的原生寫法

6.為什么會有同源策略？

7.前端處理跨域有沒有遇到過，處理跨域的方式有哪幾種方式去解決

8.怎么判斷兩個物件是否相等

9.代碼實作一個物件的深拷貝

10.從發送一個url地址到回傳頁面，中間發生了什么

11.說下作業中你做過的一些性能優化處理

ES6篇

這塊面試官主要是問你哪塊用的比較多，你可以引導性地把面試官往你會的地方說

1.箭頭函式中的this指向誰？

2.如何實作一個promise，promise的原理，以及它的兩個引數是什么？

3.promise中第二個引數的reject中執行的方法和promise.catch()都是失敗執行的，分別這么寫有什么區別，什么情況下會兩個都同時用到？

4.map和set有沒有用過，如何實作一個陣列去重，map資料結構有什么優點？

Vue篇

1.簡單闡述一下vue的生命周期

2.如何實作一個自定義組件，不同組件之間如何通信的？

3.父子組件如何通信的？

4.前端路由有沒有用過，你在專案中怎么實作路由的嵌套？

5.nextTick和Vuex兩個有沒有用過，分為什么情況下用到？

6.Vue的回應式原理你知道是怎么實作的嗎？你覺得訂閱者-發布者模式和觀察者模式有區別嗎？有的話，說一下它們的區別，

由于篇幅問題，需要文中詳細資料和簡歷模板的三連支持我一下，然后點擊這里即可領取

最后

面試其實是一個自檢、自省的程序，期間會發現自己的優點和不足，這次面試經歷暴露了自己在演算法及專項領域技術思考的欠缺...所以今后還要加強這方向的學習和鞏固，但同時拿到了三家"大廠"的 offer，也是對自己過去兩年的作業的一個肯定，說明我是一名合格的螺絲釘哈哈，

同時，面試的整個程序是很心累的，在這短短的一個月里，你會經歷極度自信和極度失落的跨越，期間需要調整好自己的心態，面試沒通過并不是你被全盤否認了，有可能是你的作業經歷并不是很契合他的職位需求，所以還是要保持信心和斗志，

祝愿大家都可以拿到自己心儀的offer呀，