我是如何一步步拿到阿里、騰訊、百度、滴滴offer的
關(guān)于本文
作者：YeeJone
https://juejin.cn/post/6957918287644590117
在過去的一個月里，自己面試了多家公司的前端崗位，很幸運的是拿到幾個不錯的 offer，所以想通過這篇文章做個記錄與總結(jié)，希望給打算求職的你一些參考。
簡單介紹
19屆，本科，計算機相關(guān)專業(yè)。畢業(yè)后，一直在一家三線廠做前端開發(fā)的工作...
其實這次之所以想出來面試，一共有兩個原因：其一是，校招結(jié)束后就沒有面試的經(jīng)歷了，不知道自己目前在招聘市場的水平到底如何；其二是，自己想回南方發(fā)展。
所以 2021 農(nóng)歷新春伊始，我就開始復(fù)習(xí)面試相關(guān)的知識，并著手準(zhǔn)備相關(guān)材料。面試的前期準(zhǔn)備大概花了半個月， 2 月 28 號投出了第一封簡歷....
對下一份工作的核心訴：大平臺 + 有技術(shù)沉淀 + 「知名」前端團隊
所以一共投遞了 5 個職位：
螞蟻金服體驗技術(shù)部 騰訊 AlloyTeam 百度「愛速搭」團隊 頭條抖音支付 滴滴
面試結(jié)果：螞蟻、騰訊、百度、滴滴都通過了面試并拿到 offer ，抖音支付二面掛。
面試經(jīng)歷
百度
一面
webpack 中 chunkHash 與 contentHash 區(qū)別； 寫過 webpack 的 loader 和 plugin 么； webpack 處理 image 是用哪個 loader，限制成 image 大小的是...； webpack 將 css 合并成一個； webpack 的搖樹對 commonjs 和 es6 module 都生效么，原理是； 實現(xiàn)一下「模版字符串」功能； 實現(xiàn)一下 Promise.all (Promise 不用寫)； 怎么實現(xiàn)響應(yīng)式布局的； css flex 的各個屬性值； css 動畫 animation 各個時間值含義； css 如何實現(xiàn)讓一個元素旋轉(zhuǎn)并橫向移動，如果只用一個 css 屬性； less 與 sass 區(qū)別，技術(shù)選型時如何取舍； ES6 symbol 如何使用以及使用場景； ES6 Proxy 如何使用以及使用場景，說說 Reflect； generator 有什么應(yīng)用場景; async await 如何實現(xiàn)的； git reset 與 revert 區(qū)別，revert 多個 mr 改如何處理； git 如何撤回 add 后的內(nèi)容； http2 與 http1.1 區(qū)別，了解 http3 么，說說； tcp 與 udp 的區(qū)別； 還問了簡歷相關(guān)的一些問題(例如：性能優(yōu)化、E2E 測試相關(guān)的);
二面
介紹一下項目； 手寫在 給定的 n 個數(shù)中隨機取出 m 個數(shù)，要求等概率； 手寫一下防抖節(jié)流函數(shù)； 設(shè)計實現(xiàn)一個「星級評分」組件； 說說 http 緩存； call、apply、bind 三者的區(qū)別，如何實現(xiàn) bind；
...其他一些記不住了，這一面很多手寫：）
三面
這一面沒有問前端基礎(chǔ)支持，只是對簡歷中的一些項目進行了提問，還問了前端的學(xué)習(xí)經(jīng)歷以及后續(xù)的職業(yè)規(guī)劃...
這面通過后就是 HR 了，聊 offer ...
螞蟻金服
螞蟻金服的面試流程和其他公司有所不同，它的每一輪面試都是面試官單獨加你微信，再和你約面試時間的。
在正式開始一面之前，一面面試官給我發(fā)了兩道筆試題，讓我這規(guī)定時間內(nèi)完成后發(fā)給他，題目是：
題目一: 請實現(xiàn) find 函數(shù)，使下列的代碼調(diào)用正確。
// 約定：
// title數(shù)據(jù)類型為String
// userId為主鍵，數(shù)據(jù)類型為Number
var data = [
{userId: 8, title: 'title1'},
{userId: 11, title: 'other'},
{userId: 15, title: null},
{userId: 19, title: 'title2'}
];
var find = function(origin) {
// your code are here...
}
// 查找 data 中，符合條件的數(shù)據(jù)，并進行排序
var result = find(data).where({
'title': /\d$/
}).orderBy('userId', 'desc');
console.log(result);// [{ userId: 19, title: 'title2'}, { userId: 8, title: 'title1' }];
復(fù)制代碼
題目二: 使用 React 或 Vue 技術(shù)棧實現(xiàn)一個流水線組件。
基本數(shù)據(jù)結(jié)構(gòu)
interface Pipeline{
stages: Stage[];
}
interface Stage{
title: string;
jobs: Job[];
}
interface Job{
name: string;
status: 'success' | 'fail';
time: number; //毫秒時間戳
}
復(fù)制代碼
一面
介紹一下你自己，以及項目，簡單說一下你做了什么，有什么難點及亮點； js 有哪些基本類型，說說 typeof 與 instanceof； 說說 new 操作符； 什么是 event loop； Promise 的用法？了解 allSettled 方法么，怎么實現(xiàn)？ 說說閉包； ES5 實現(xiàn)繼承的方法; 說說跨域； commonJS 與 ES6 模塊化區(qū)別； webpack 了解么？loader、plugin 分別是干嘛的？如何實現(xiàn)一個 loader？ webpack 如何優(yōu)化打包速度； 說一下 css 盒模型，border-box 和 content-box 區(qū)別； 說說 BFC； 移動端響應(yīng)式布局怎么實現(xiàn)的； 說一說 flex 布局，有了解 Grid 么； 有兼容 retina 屏幕的經(jīng)歷嗎？如何在移動端實現(xiàn) 1 px 的線; 說一下 react 組件的生命周期； react 組件如何做性能優(yōu)化，說說 pureComponent； 調(diào)用 setState 之后發(fā)生了什么; 了解 fiber 么？解決了什么問題？具體原理是； 有用過 hooks 么？怎么看待 hooks？它的原理是； 了解過 react 最新的一些動態(tài)么？time slice 、suspense、server component 能說說么； 了解最近一些新技術(shù)么，webpack5 做了哪些新突破； 為什么 vite、snowpack 可以比 webpack 快那么多？具體原理是； 什么是 CSRF 攻擊，怎么預(yù)防； 為什么說用 css 實現(xiàn)動畫比 js 動畫性能好； 什么是 合成層； http2 與 http1.1 區(qū)別； 說一說 http 緩存； http 狀態(tài)碼；
二面
自我介紹，介紹項目，問項目中的一些問題； 19 年畢業(yè)的，學(xué)校的知識沒忘吧.. 計算機網(wǎng)絡(luò)、編程語言、設(shè)計模式、數(shù)據(jù)結(jié)構(gòu)算法、編譯原理你對哪個比較熟悉???（我答得是計算機網(wǎng)絡(luò)） 路由器和交換機的區(qū)別；?? 實現(xiàn)斐波納切數(shù)，遞歸和非遞歸的時間復(fù)雜度分別是多少；
...還有其他一些基礎(chǔ)問題，沒記住：）
三面+HR 面
偏右面的我（ps：終于見到 偏右 大佬了??）
這一面沒有問前端基礎(chǔ)相關(guān)的問題，問了我項目中的一些技術(shù)細(xì)節(jié)，方案設(shè)計上的問題。偏右老師的問題真的很有水平，直切要害，都是項目推進過程中遇到的坎。還問了一些后續(xù)規(guī)劃的問題。
關(guān)于 HR 面，之前看很多人說阿里 HR 面比較難，而且會刷人。但就我的經(jīng)歷來看，就是一些比較常規(guī)的問題，如：
為什么選擇跳槽； 如何應(yīng)對工作上的壓力； 今后的職業(yè)規(guī)劃是； 說說 優(yōu)缺點； 希望阿里給你什么；
...
這些問題可以先想想，然后如實回答即可～
騰訊
一面
手寫大數(shù)相加方法； 實現(xiàn)一個方塊的拖拽； 問了一些項目的問題，以及相關(guān)技術(shù)細(xì)節(jié)； 從一個 URL 輸入到頁面渲染，經(jīng)歷了哪些過程，盡可能的詳細(xì)； tcp 握手 回收過程，了解泛洪攻擊么； 說說 event loop（并出了一道題，寫輸出順序）； SSR 怎么做的，怎么保證同構(gòu)？server 端的數(shù)據(jù)都 renderToSting 消費了，為什么還要給到 client 端； js 的嚴(yán)格模式； 說說 Iterator 的使用； 說一說快速排序的過程； node 如何捕捉錯誤，內(nèi)存泄漏怎么排查；
還有一些基礎(chǔ)題目...
二面
依舊是項目問題... 性能優(yōu)化怎么做的，怎么衡量收益的； 為什么要做 SSR； E2E 測試怎么做的，怎么保證測試覆蓋率和準(zhǔn)確性； 如何合理分配 node 服務(wù)資源；
這一面對于項目里的技術(shù)細(xì)節(jié)問的很深入，還問了些計算機網(wǎng)絡(luò)、React相關(guān)的問題...
三面
項目...; hybrid 通信原理； 如何看待小程序，它的技術(shù)原理是； 設(shè)計一個協(xié)同文檔的技術(shù)流程； 離線包怎么做的，現(xiàn)在公司的 app 提供了哪些特殊能力； 質(zhì)量保障平臺如何做的，項目中單元測試怎么做的，為什么要有 E2E 測試；
就記到這些問題...??
四面
希爾排序，堆排，快排； this 指向問題，說出輸出內(nèi)容； 如何設(shè)計一個組件庫； 用過 TypeScript 么，了解哪些新特性； 說說 React Fiber...; 為什么 Fiber 雙向鏈表的結(jié)構(gòu)可以解決遞歸慢的問題； 了解設(shè)計模式么，說說單例模式的優(yōu)缺點; 職業(yè)規(guī)劃； 目前拿了哪些 offer ...；
這一面 hr 約的時候和我說是 GM 面，本以為會和其他公司一樣，主要考察技術(shù)視野和職業(yè)規(guī)劃... 但一上來問我技術(shù)問題著實沒想到....
這面結(jié)束后就是 HR 面，兩個 HR 同時面，感覺全程都是我瘋狂講故事??
抖音和滴滴
這兩家公司具體的經(jīng)歷我就不一一贅述，很多問題和上面三家差不多... 就簡單講講抖音考了那幾道筆試題：
二維數(shù)組中的查找； 從先序遍歷還原二叉樹 手寫一個版本比較函數(shù)； 實現(xiàn)一下 cache request（請求過的數(shù)據(jù)不再請求）
如何準(zhǔn)備面試
前端面試三個重要部分：簡歷與項目、前端基礎(chǔ)、算法和手寫代碼。一般情況下，只要三部分中的其中兩個很好的話，基本就能通過面試。所以下面我會根據(jù)自己情況，來和大家說說如何準(zhǔn)備這三部分內(nèi)容：
簡歷與項目
由于平時自己也負(fù)責(zé)組內(nèi)進行一些面試工作，作為面試官來說，簡歷真的很重要??！它是面試官對你的第一印象，所以簡歷的排版以及內(nèi)容質(zhì)量很關(guān)鍵。
我們先從簡歷的排版說起，總結(jié)起來有以下幾點：
簡歷的格式一定要用 PDF ?。?/strong>； 個人信息、聯(lián)系方式盡量的放在前面，簡歷排版需緊湊，不要太松散； 對于一些技術(shù)棧、關(guān)鍵詞需加粗強調(diào)； 簡歷整體內(nèi)容盡量控制在兩頁以內(nèi)，語句需精簡，不要啰嗦；
如果說簡歷排版是外在美，那么簡歷中的內(nèi)容則是更為重要的"內(nèi)在美"。一份好的簡歷，是能夠清楚如實地表述自己當(dāng)前的背景和工作內(nèi)容，我們通常將簡歷內(nèi)容分為四個部分：個人信息&教育背景、工作經(jīng)歷、項目介紹、自身技能&自我評價。
個人信息&教育背景、工作經(jīng)歷這兩部分按照自身真實情況寫即可，切勿造假?。?/em> 可能很多人為了簡歷能夠"華麗"，會對教育背景&工作經(jīng)歷進行虛構(gòu)和造假，這種操作的后果，就是在背景調(diào)查階段極有可能被發(fā)現(xiàn)，從而導(dǎo)致你的 offer 被取消，情形嚴(yán)重者可能會被拉黑。
項目介紹 和 自身技能&自我評價 這兩塊的內(nèi)容往往決定了面試結(jié)果的評級。我們先說項目這部分。簡歷排版、個人背景決定的是你是否能夠通過初篩，個人項目則是決定面試通過后定級的上限。在幫組內(nèi)面試相關(guān)候選人時，通常會對項目這部分內(nèi)容重點關(guān)注，關(guān)注的內(nèi)容主要有兩個：
這個項目是否有亮點，以及這個項目是否有落地產(chǎn)出； 候選人的項目是否和公司的業(yè)務(wù)貼合，候選人有沒有除業(yè)務(wù)工作外的工程提效的價值和潛力；
所以作為候選人，我們要盡量去羅列一些具有代表性的項目，這樣會提升面試官對自己的印象，而且一定要對寫在簡歷上的項目爛熟于心，面試前可以采取自問自答的方式來進行練習(xí)。很多候選人的項目部分會寫很多業(yè)務(wù)相關(guān)的內(nèi)容，沒有真正拿的出手亮點項目，導(dǎo)致簡歷平平無奇。
我們在平時工作中要多去參與一些如：性能優(yōu)化、質(zhì)量保證、構(gòu)建優(yōu)化、運營賦能的技術(shù)項目，這些工作，不僅能提升你技術(shù)的廣度和深度，而且可以極大的豐富你簡歷的內(nèi)容，讓你在面試中有更多籌碼。
技能&榮譽&自我評價 只要清楚列出你的技能和榮譽即可，例如：有移動端開發(fā)經(jīng)驗、微前端經(jīng)驗、熟悉 linux、node、獲得了XXX獎項等。對于「自我評價」這部分，我個人并不喜歡，因為這些內(nèi)容往往都是千篇一律，沒有什么有價值的信息。
前端基礎(chǔ)
前端基礎(chǔ)相關(guān)的面試題，很多 github 倉庫都有收集，在面試之前我們當(dāng)然可以通過這些進行查漏補缺，但關(guān)鍵還是需要平時積累而且要有深入的理解，以免面試的時候出現(xiàn)一往深處問就不知道的情況...
這里推薦幾個前端基礎(chǔ)相關(guān)的書籍和內(nèi)容：
《JavaScript 高級程序設(shè)計》 （紅寶石書） ECMAScript 6 入門(阮一峰 ES6) React 官方文檔 github.com/CavsZhouyou… github.com/mqyqingfeng…
算法和手寫代碼
對于「算法」，親身經(jīng)歷告訴你們，臨時抱佛腳是沒有用的...??
一定要平時堅持刷，保持“手感”！就我的前端面試情況來看，考察的算法并不會很冷門、很難，一般都是 easy、medium 難度的，所以可以先從簡單的開始刷，再慢慢過渡到 medium 和 hard 的，循序漸進。、
手寫代碼比較常見的幾道題目：
防抖節(jié)流； 手寫 Promise 及相關(guān) api 實現(xiàn)； 實現(xiàn) bind、apply、call； request cache； 實現(xiàn)模版字符串； es6 class 轉(zhuǎn)成 es5 ； 實現(xiàn) Array flat 等相關(guān) API； 實現(xiàn)一個版本比較函數(shù)；...
總結(jié)
面試其實是一個自檢、自省的過程，期間會發(fā)現(xiàn)自己的優(yōu)點和不足。這次面試經(jīng)歷暴露了自己在算法及專項領(lǐng)域技術(shù)思考的欠缺...所以今后還要加強這方向的學(xué)習(xí)和鞏固，但同時拿到了三家"大廠"的 offer，也是對過去一年半的工作的一個肯定，說明我是一名合格的螺絲釘 ??
關(guān)于面試期間的心理狀況，面試的整個過程是很心累的，在這短短的一個月里，你會經(jīng)歷極度自信和極度失落的跨越，期間需要調(diào)整好自己的心態(tài)，面試沒通過并不是你被全盤否認(rèn)了，只是你的工作經(jīng)歷并不是很契合他的職位需求，所以還是要保持信心和斗志。
在經(jīng)歷過這幾場面試之后，一直在思考一個問題：3-5 后你的核心競爭力是什么？
對于前端來說，在初入職場時，可能由于學(xué)習(xí)投入的時間有差別，自己和其他人的水平存在一定差距，但這種差距隨著時間的推移會漸漸縮小，工作 3 年后，大多數(shù)人基本就能 cover 住業(yè)務(wù)問題了，所以核心競爭力并不是你寫了xxx需求...，而是你是否有持續(xù)學(xué)習(xí)的能力以及在某個前端領(lǐng)域是否有自己的思考與沉淀。
歡迎點贊收藏 ??：）
關(guān)注「開源Linux」加星標(biāo)，提升IT技能
