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