從 MVC 到 MVVM，從頁面到工程化，從瀏覽器到全端應(yīng)用，前端技術(shù)近幾年來保持著極高的發(fā)展速度，應(yīng)用場景不斷拓展，前端技術(shù)能夠滿足的需求越來越多，前端崗位的數(shù)量也不斷增長，前端工程師的薪資待遇穩(wěn)步提升，發(fā)展前景十分廣闊。

根據(jù)某招聘軟件數(shù)據(jù)統(tǒng)計(jì)，截止至2021 年 7 月，四大一線城市的 web 前端崗位近一年的平均月薪為：北京 13709 元 上海 13573 元 深圳 12096 元 廣州 9306 元。

以深圳市為例，從 6 月 11 日到 7 月 22 日，連續(xù) 6 周，web 前端崗位月平均薪資對比上月同期上漲均值為 2.45 %

前端工程師招聘需求

2021 年，市場對前端工程師的需求依然旺盛。所謂知己知彼，百戰(zhàn)不殆，分析各個(gè)公司對前端工程師的招聘需求，一方面可以了解到前端各細(xì)分領(lǐng)域在企業(yè)的需求情況，調(diào)整自己對崗位和薪資的期待，另一方面可以獲得各種前端技術(shù)在企業(yè)中的應(yīng)用情況，調(diào)整自己的學(xué)習(xí)和面試準(zhǔn)備方向。因篇幅所限，文中僅列舉少數(shù)大廠的崗位分布情況。

公司招聘需求

通過對百度、阿里巴巴、騰訊、字節(jié)跳動(dòng)、美團(tuán)和滴滴的官網(wǎng)的崗位需求數(shù)量進(jìn)行統(tǒng)計(jì)，獲得前端崗位數(shù)量占技術(shù)崗位（含開發(fā)、測試、運(yùn)維等）總數(shù)量的比例如圖所示：

可見前端崗位在各大公司的需求量都很大，平均占比超 10%

前端崗位分類

按等級劃分

前端崗位按等級劃分，一般分為初級、中級、高級（資深）和專家。大廠的初級多通過校園招聘，社會(huì)招聘的起始等級多為中級或高級。等級越高，崗位要求越高，薪資越高。相應(yīng)地，面試流程，面試輪數(shù)，面試官的級別，面試題型和難度，是否做背景調(diào)查，調(diào)查到什么樣的程度都與等級息息相關(guān)。

通常情況下，校園招聘更側(cè)重對面試者學(xué)習(xí)能力、邏輯及理論的考察，社會(huì)招聘更側(cè)重對面試者學(xué)習(xí)習(xí)慣、理解及實(shí)踐的考察，但由于等級的限制，前者的面試難度大體上低于后者，把握校園招聘的機(jī)會(huì)依然是應(yīng)屆生進(jìn)入心儀企業(yè)的較快途徑之一。

我們隨機(jī)抽取了 60 個(gè)當(dāng)前正在招聘的年薪在 20 萬以上的前端崗位，各職級占比如圖所示：

按領(lǐng)域劃分

前端工程師的對應(yīng)崗位可以大體分為 Web、移動(dòng)端、小程序、客戶端和游戲前端等類型。

• Web 前端是前端開發(fā)的通用崗位，主要從事瀏覽器內(nèi)的網(wǎng)站、中后臺(tái)、SPA、插件等應(yīng)用的開發(fā)，廣義上，它也包含所有基于前端技術(shù)開發(fā)或者面向用戶界面的崗位，傳統(tǒng)的美工、搜索引擎優(yōu)化師、網(wǎng)站推廣專員、用戶交互和體驗(yàn)設(shè)計(jì)師在一些公司仍歸屬于前端部門。
• 移動(dòng)端前端是 Web 前端的細(xì)分，主要從事 WebApp，基入 WebView 的套殼或 Hybird 混合應(yīng)用開發(fā)，或者采用前端技術(shù)開發(fā)原生渲染的移動(dòng)應(yīng)用，如 React Native，Weex，Hippy 等。經(jīng)典的 IOS 和 Android 開發(fā)也可以歸類于移動(dòng)端前端，基于 Dart 的 Flutter 發(fā)展強(qiáng)勁，擁有原生開發(fā)能力和經(jīng)驗(yàn)的前端工程師更受企業(yè)的歡迎。
• 小程序前端是 Web 前端的細(xì)分，近年來各超級 APP 分分開放小程序能力，小程序作為流量入口的價(jià)值日益顯現(xiàn)。很多公司將小程序崗位從前端中獨(dú)立出來，甚至只做小程序。Uni-App，Taro，Kbone 等小程序跨端，甚至多終端統(tǒng)一框架成為很多項(xiàng)目的選擇。
• 客戶端/嵌入式前端歷史悠久，從使用 WebBrowser 到集成 Chromium，從填補(bǔ)客戶端頻繁更新的內(nèi)容，開發(fā)提供離線體驗(yàn)的 Web 應(yīng)用，到基于 Node.js 等前端技術(shù)構(gòu)建跨平臺(tái)的桌面應(yīng)用，如 Electron 等。隨著智能設(shè)備的快速普及，手表、投屏、教學(xué)、電視、車載應(yīng)用等終端正在產(chǎn)生更多的前端崗位需求。
• 游戲前端起薪普遍較高，幾乎都要求掌握算法和數(shù)據(jù)結(jié)構(gòu)。作為傳統(tǒng)游戲開發(fā)的延伸和補(bǔ)充，Cocos 和 Unity 仍是很多游戲前端的加分項(xiàng)。早期網(wǎng)頁游戲和視頻網(wǎng)站帶來了大量的 Flash 相關(guān)崗位需求，之后 HTML5 取而代之，Canvas，WebGL，WebGL 2 渲染性能不斷提升，可視化 JS 庫 Echarts、Hightcharts、D3.js、Three.js 得到圖表、地圖、游戲類、設(shè)計(jì)工具等項(xiàng)目的青睞，Laya、Erget 讓前端游戲開發(fā)更容易，WebAssembly 前景廣闊。值得一提的是，小游戲由于其高粘性，易傳播的特性，在傳統(tǒng)游戲之外，正在成為保證用戶增長和留存的手段之一，很多非游戲開發(fā)企業(yè)，也將游戲前端作為獨(dú)立崗位招聘
• 除了以上分類之外，前端工程師還可以選擇的相關(guān)崗位有：
• 與其它技術(shù)的復(fù)合崗位，如音視頻開發(fā)，地圖位置信息開發(fā)，課件開發(fā)
• 需要額外儲(chǔ)備業(yè)務(wù)相關(guān)技術(shù)的崗位，售前、售后技術(shù)支持，云技術(shù)開發(fā)
• 技術(shù)輸出的崗位，如前端培訓(xùn)講師、主播、顧問、組長等咨詢或管理類崗位

需要注意的是，前端崗位并沒有清晰界限，使用的技術(shù)棧往往根據(jù)項(xiàng)目需求和資源變化。每個(gè)領(lǐng)域所能提供的崗位是有限的，下面就讓我們跳出領(lǐng)域限制，從前端工程師的崗位需求入手，拓展擇業(yè)的范圍，明確學(xué)習(xí)方向。

前端崗位要求

我們隨機(jī)抽取了 60 個(gè)當(dāng)前正在招聘的年薪在 20 萬以上的前端崗位，從學(xué)歷、專業(yè)、工作經(jīng)驗(yàn)、管理經(jīng)驗(yàn)、性格特質(zhì)、技術(shù)棧和加分項(xiàng)等 7 方面總結(jié)前端工程師的崗位要求。

學(xué)歷

95% 的崗位要求本科及以上學(xué)歷，5% 的崗位要求大專及以上學(xué)歷。

專業(yè)

22% 的崗位要求計(jì)算機(jī)或相關(guān)專業(yè)，11% 崗位不限專業(yè)，但要求有算法和數(shù)據(jù)結(jié)構(gòu)等計(jì)算機(jī)基礎(chǔ)，特別是起薪較高的游戲前端崗位。在力扣刷題和看 Leetbook 是彌補(bǔ)計(jì)算機(jī)基礎(chǔ)的捷徑。

工作經(jīng)驗(yàn)

45% 的崗位要求 5 年及以上工作經(jīng)驗(yàn)，23% 的崗位要求 3-4 年工作經(jīng)驗(yàn)，10% 的崗位要求 1-2年工作經(jīng)驗(yàn)，22% 的崗位不限工作經(jīng)驗(yàn)。部分崗位雖然標(biāo)明了工作經(jīng)驗(yàn)要求，但也注明能力達(dá)到，可以放寬要求。

管理經(jīng)驗(yàn)

少數(shù)高級及以上或管理崗位，對管理經(jīng)驗(yàn)也有要求，多表述為帶過不少于多少人團(tuán)隊(duì)或者 1 - 3 年管理經(jīng)驗(yàn)。

性格特質(zhì)

近三分之一的崗位要求候選人擅于團(tuán)隊(duì)協(xié)作、學(xué)習(xí)和溝通。四分之一的崗位要求候選人責(zé)任心強(qiáng)。六分之一的崗位要求候選人主動(dòng)，具備良好的邏輯思維能力，擅于發(fā)現(xiàn)、分析和解決問題，能承受一定的壓力，十分之一的崗位要求候選人嚴(yán)謹(jǐn)規(guī)范。其他常見崗位性格描述包括喜歡分享、樂觀、鉆研，有一定的視野、執(zhí)行力和擅于思考。

值得一提的是，近年來，各大公司越來越重視對面試者邏輯思維能力的考察，考察方式包括：

• 聆聽面試者的回答，判斷是否有邏輯性
• 請面試者回憶一個(gè)項(xiàng)目的架構(gòu)或解決某個(gè)問題的細(xì)節(jié)
• 設(shè)置開放性題目，請面試者用簡短的語言盡可能多地回答技術(shù)點(diǎn)
• 設(shè)置實(shí)踐問題場景，詢問解決問題的流程、方案
• 設(shè)置邏輯推斷題目
• 設(shè)置算法和數(shù)據(jù)結(jié)構(gòu)的題目
• 設(shè)置編程題目，面試者需要在線編程，或者回答解決問題的關(guān)鍵技術(shù)點(diǎn)

力扣收集了各大公司的算法、數(shù)據(jù)結(jié)構(gòu)、邏輯和編程原題，大量練習(xí)并參與模擬面試和周賽，帶著用更高效的方法解決問題的態(tài)度投入工作，能夠顯著提升面試者的邏輯思維能力。

更重要的而是，邏輯思維還將影響語言表達(dá)是否清晰有效，安排學(xué)習(xí)、工作是否條理有序。刷題經(jīng)常處理邊界，會(huì)幫助面試者形成嚴(yán)謹(jǐn)規(guī)范的品質(zhì)。這些都將促成良好學(xué)習(xí)和工作習(xí)慣的養(yǎng)成，使得面試者的性格特質(zhì)更加滿足崗位要求。

技能

我們將崗位要求的技能按照出現(xiàn)頻次生成詞云圖：

• 幾乎所有崗位都提到了 JavaScript、HTML 和 CSS，部分崗位會(huì)注明 HTML 5 和 CSS 3，近三分之一的崗位提到了 ES6+，超過 18% 的崗位提到了 TypeScript，超過 10% 的崗位提到了 W3C 標(biāo)準(zhǔn)。近 10% 的崗位在使用 SASS 或 LESS。語義化也被提及。
• 三大框架中，70% 以上的崗位提到了 Vue 和 React，兩者不分伯仲，超過三分之一的崗位提到了 Angular，其受到外資企業(yè)的偏愛。React Native 仍是 10% 崗位的選擇。Weex、jQuery 也被提及。
• 近半數(shù)崗位要求 Node.js， 無論是作為工程化工具，桌面開發(fā)、中后端運(yùn)行環(huán)境，Node.js 已經(jīng)從加分項(xiàng)變?yōu)楸匦揄?xiàng)。
• 超過 20% 的崗位明確提到數(shù)據(jù)結(jié)構(gòu)和算法，其與對計(jì)算機(jī)基礎(chǔ)或?qū)I(yè)的要求緊密相連，出題考察是證明面試者計(jì)算機(jī)水平的直接途徑之一。設(shè)計(jì)模式和面向?qū)ο笠灿斜惶峒啊?/span>
• 工程化方面，超過三分之一的崗位提到了 Webpack，超過 18% 的崗位提到了 Gulp ，超過 10% 的崗位提到了 Grunt，Rollup，F(xiàn)IS 也有被提及。
• 近三分之一的崗位提到了網(wǎng)絡(luò)，超過 23% 的崗位明確提到 HTTP。
• 超過 28% 的崗位提到了性能優(yōu)化，近 10% 的崗位要求要求了解瀏覽器原理，結(jié)合計(jì)算機(jī)基礎(chǔ)、網(wǎng)絡(luò)、緩存、框架、原理等談性能優(yōu)化，往往可以拉開中高級前端的差距。
• 近 10% 的崗位提到了 Git，敏捷開發(fā)和文檔書寫能力也有被提及。
• 此外，10% 左右的崗位提到了架構(gòu)、布局、兼容性、小程序、Canvas、組件化和模塊化。

加分項(xiàng)

前端技能之外，被多次提及的加分項(xiàng)如圖所示：

• 英語水平：通常分為兩個(gè)層級，第一級是讀寫英文文檔、郵件，第二級是聽說英文會(huì)議。
• 管理經(jīng)驗(yàn)：在團(tuán)隊(duì)中承擔(dān)過項(xiàng)目或技術(shù)管理的角色，培訓(xùn)過其他前端，采用某種開發(fā)模式，參與技術(shù)選擇和架構(gòu)設(shè)計(jì)，解決過疑難問題或顯著提升開發(fā)效率，帶來業(yè)務(wù)增長。
• 大中型項(xiàng)目的開發(fā)經(jīng)驗(yàn)：服務(wù)過高并發(fā)，高負(fù)載的業(yè)務(wù)，應(yīng)用或組織過微服務(wù)或復(fù)雜系統(tǒng)的開發(fā)。
• 移動(dòng)端會(huì) IOS 和 Android 原生開發(fā)：原生開發(fā)通常意味著更小的安裝包，更完整的調(diào)用能力和更廣闊的優(yōu)化潛能，用戶體驗(yàn)對比非原生仍會(huì)有細(xì)微差別。在移動(dòng)端業(yè)務(wù)快速發(fā)展或者審核政策變更的情況下，會(huì)前端有從 Web 開發(fā)轉(zhuǎn)型原生開發(fā)的情況。
• 此外，了解 Linux 及類似系統(tǒng)的常用操作，會(huì)用會(huì)配置 Nginx 等 Web 服務(wù)器，擅長 SEO，能夠理解甚至完成 UI，UE 和 UX 設(shè)計(jì)，擁有技術(shù)博客，Github 自己的開源項(xiàng)目 Star 達(dá)到一定數(shù)量，是知名開源項(xiàng)目的貢獻(xiàn)者或者維護(hù)者都是重要的加分項(xiàng)。

后端及其它語言

后端經(jīng)驗(yàn)是被提及最多的加分項(xiàng)，掌握至少一門后端、其它客戶端或者更底層的語言，一方面可以提高前端的職業(yè)競爭力，另一方面可以直接拓寬擇業(yè)范圍。

之前抽取的前端崗位要求中，提及后端或其它語言的頻次所占比例如圖所示：

前端學(xué)習(xí)路線

按照前端崗位需求，以優(yōu)先學(xué)習(xí)工作更需要，面試更?？嫉膬?nèi)容為原則，由淺入深，層層鋪墊，與時(shí)俱進(jìn)，可以較容易地總結(jié)出前端學(xué)習(xí)路線圖：

HTML / CSS / JavaScript 基礎(chǔ)學(xué)習(xí)

• 《Web 入門》 MDN 權(quán)威入門指南，HTML / CSS / JavaScript 快速上手
• 《CSS 世界》講解細(xì)膩，拓展延伸對 CSS 的認(rèn)識(shí)
• 《前端通關(guān)手冊 · CSS》 大量面試真題檢測 CSS 掌握水平
• 《現(xiàn)代 JavaScript 教程》 線上教程，簡單明了，時(shí)效性強(qiáng)
• 《JavaScript 高級程序設(shè)計(jì)》 傳說中的紅寶書
• 《JavaScript 權(quán)威指南》 傳說中的犀牛書

jQuery / ES6+ / 正則 / Canvas 進(jìn)階學(xué)習(xí)

• 《jQuery 中文文檔》 翻譯完整，結(jié)構(gòu)清晰
• 《ES6 入門教程》線上教程，很多前端學(xué)習(xí) ES6 的起點(diǎn)和字典
• 《正則表達(dá)式 30 分鐘入門教程》 30分鐘從入門到掌握正則的使用
• 《Web 前端開發(fā)精品課 HTML5 Canvas 開發(fā)詳解》圖文并茂，代碼示例豐富
• 《前端通關(guān)手冊 · JavaScript》 大量面試真題檢測 JavaScript 掌握水平

工程化及框架應(yīng)用學(xué)習(xí)

• 《Node.js 中文文檔》
• 《Webpack中文文檔》
• 《Vue.js 中文文檔》 Vue / React / Angular 新手建議順序閱讀
• 《React 中文文檔》
• 《Angular中文文檔》

網(wǎng)絡(luò)學(xué)習(xí)

• 《計(jì)算機(jī)網(wǎng)絡(luò)面試突擊》 從面試出發(fā)學(xué)習(xí)計(jì)算機(jī)網(wǎng)絡(luò)和協(xié)議相關(guān)知識(shí)
• 《圖解 HTTP》 172 張圖解輕松入門。從基礎(chǔ)知識(shí)到最新動(dòng)向，一本書掌握 HTTP 協(xié)議

算法和數(shù)據(jù)結(jié)構(gòu)及設(shè)計(jì)模式學(xué)習(xí)

• 《我的第一本算法書》 481 張步驟圖詳解 26 個(gè)算法和 7 個(gè)數(shù)據(jù)結(jié)構(gòu)的基本原理
• 《七章刷完數(shù)據(jù)結(jié)構(gòu)》 學(xué)透方法，高效掌握數(shù)據(jù)結(jié)構(gòu)
• 《算法圖解》 像小說一樣有趣的算法入門書
• 《零起步學(xué)算法》 以初學(xué)者視角，重點(diǎn)講解算法與數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)思想
• 《高頻算法實(shí)戰(zhàn)》 進(jìn)階版算法與數(shù)據(jù)結(jié)構(gòu)教程，追蹤原理，融會(huì)貫通
• 《深入淺出設(shè)計(jì)模式》 用生動(dòng)的例子詳解 23 種設(shè)計(jì)模式

性能優(yōu)化

• 《Web 性能》 MDN 權(quán)威文檔羅列 Web 性能指標(biāo)和測量方法
• 《高性能網(wǎng)站建設(shè)指南》 堪稱前端工程師技能精髓，很多前端的性能優(yōu)化入門書
• 《高性能網(wǎng)站建設(shè)進(jìn)階指南》 進(jìn)一步學(xué)習(xí)性能優(yōu)化，建設(shè)指南的進(jìn)階版
• 《高性能 JavaScript》 編寫運(yùn)行更快的 JavaScript 權(quán)威指南

原理

• 《深入響應(yīng)式原理》 Vue.js 權(quán)威說明響應(yīng)式原理
• 《React 實(shí)現(xiàn)說明》 React 實(shí)現(xiàn)原理資料匯總

安全

• 《Web 安全》 MDN 權(quán)威文檔說明 Web 攻擊方式及防御策略
• 《Web 安全開發(fā)指南》詳細(xì)介紹Web安全開發(fā)的必備知識(shí)和攻防實(shí)戰(zhàn)
• 《XSS Challenges》 模擬 XSS 攻擊并闖關(guān)

調(diào)試和測試

• 《調(diào)試器》 MDN 權(quán)威文檔說明如何使用 JavaScript Debugger
• 《Jest中文文檔》 被廣泛使用的測試框架的說明文檔

項(xiàng)目管理

• 《Markdown 入門》 用輕量級的標(biāo)記語言快速書寫格式優(yōu)雅的文檔
• 《面向?qū)ο笫窃鯓庸ぷ鞯摹?「計(jì)算機(jī)程序設(shè)計(jì)思想」圖解趣味版
• 《OKR 工作法》 如何激勵(lì)不同團(tuán)隊(duì)一起工作，全力以赴實(shí)現(xiàn)一個(gè)有挑戰(zhàn)性的目標(biāo)
• 《敏捷軟件開發(fā)》 豆瓣評分 9.0 的項(xiàng)目管理入門書

加分項(xiàng)

后端和客戶端或更底層語言

• 《Java 實(shí)戰(zhàn)》 通過示例全面講解 Java 8、9、10 新特性
• 《Python 深度學(xué)習(xí)》 通俗易懂，建立關(guān)于機(jī)器學(xué)習(xí)和深度學(xué)習(xí)核心思想的直覺
• 《Java 面試突擊》 Java 面試必備知識(shí)點(diǎn)整理，高效面試通關(guān)秘籍
• 《C++面試突擊》 C++ 面試高頻知識(shí)點(diǎn)詳解
• 《WebAssembly 中文文檔》 將 C、C++ 或 Rust 等編譯進(jìn)瀏覽器，在 JavaScript 中使用

操作系統(tǒng)

• 《硬核 Linux 攻略》 從使用 Linux 寫命令，到了解這些指令背后的意義
• 《硬核操作系統(tǒng)指南》 進(jìn)程線程、內(nèi)存管理、文件系統(tǒng)、IO 流、死鎖等角度全面剖析系統(tǒng)

機(jī)器學(xué)習(xí)

• 《機(jī)器學(xué)習(xí) 101》 機(jī)器學(xué)習(xí)的基本概念

SEO

• 《百度搜索學(xué)堂·搜索規(guī)范》 百度官方 SEO 教學(xué)

UX

• 《點(diǎn)石成金》 面向 Web 設(shè)計(jì)和開發(fā)的技術(shù)人員的經(jīng)典入門書
• 《設(shè)計(jì)師要懂心理學(xué)》 在網(wǎng)頁和應(yīng)用設(shè)計(jì)中，考慮周邊視覺、色盲和目標(biāo)趨近效應(yīng)
• 《眼動(dòng)追蹤 用戶體驗(yàn)優(yōu)化操作指南》 通過眼動(dòng)追蹤方法實(shí)操用戶體驗(yàn)優(yōu)化

英語

• 使用單詞書、背單詞 APP、卡片等方式，背英語六級的詞匯
• 整理英語口語的常用句式，代入場景背誦
• 精聽日常英語會(huì)話，慢速英語新聞等，盡量聽懂每個(gè)詞
• 泛聽或看英語電影，英文歌曲，不看字幕，聽懂大概意思
• 說，不要怕說錯(cuò)，請聯(lián)想中文缺字、錯(cuò)字、順序不對，大家也能聽懂。能有人陪說英語最好

如何準(zhǔn)備前端面試

想要提高前端面試的通過率，既要積累前端經(jīng)驗(yàn)，也要提高理論水平和應(yīng)對面試的能力，還要在面試時(shí)把握好節(jié)奏，盡可能多地展現(xiàn)優(yōu)勢，滿足崗位要求，從而順利獲得 Offer。

前端崗位種類繁多，同學(xué)們可能會(huì)陷入糾結(jié)，那么如何做出合適自己的選擇呢？筆者建議主要考慮三個(gè)方面：知識(shí)儲(chǔ)備、個(gè)人興趣、以及發(fā)展前景。

如何積累前端經(jīng)驗(yàn)

前端的知識(shí)更新速度就像它的發(fā)展一樣快，選擇前端，意味著需要不斷學(xué)習(xí)，良好的自學(xué)能力和習(xí)慣，也許并不能使你飛到最高，但一定能讓你飛得更遠(yuǎn)更長久。

經(jīng)驗(yàn)積累是一個(gè)長期的過程，加快過程的方法有二：

• 主業(yè)之余，投入時(shí)間關(guān)注，學(xué)習(xí)和實(shí)踐新舊技術(shù)

• 每天做完力扣的每日一題，保持清晰的邏輯思維能力以及做題的手感。
• 每周看完一本 LeetBook，用最少幾小時(shí)的時(shí)間學(xué)會(huì)一個(gè)前端崗位需求技能。

• 主動(dòng)發(fā)現(xiàn)、分析和解決項(xiàng)目問題，在過程中獲得與項(xiàng)目關(guān)聯(lián)的知識(shí)和經(jīng)驗(yàn)增長。

兩種方法沒有優(yōu)劣之分，但是需要注意的是：

• 前者應(yīng)警惕虛假努力，不要疲勞戰(zhàn)以至于影響主業(yè)，多以學(xué)會(huì)多少而不是時(shí)間長短來衡量收獲，適當(dāng)給自己放松、減壓。
• 后者能讓自己從學(xué)業(yè)或工作中收獲更多經(jīng)驗(yàn)，但要注意時(shí)間、協(xié)作和優(yōu)先級，時(shí)刻注意截止日期，不要過早優(yōu)化，不要占用同學(xué)或同事的時(shí)間陪自己搜索和試驗(yàn)。提前調(diào)查，給出原因、結(jié)論和方案供大家討論，是對團(tuán)隊(duì)的時(shí)間和效率負(fù)責(zé)任的表現(xiàn)。

此外，勇于承擔(dān)管理或者培訓(xùn)的角色，能夠讓我們從新的角度來看待前端工作。并不是所有人都具有領(lǐng)導(dǎo)力，但是如果公司或團(tuán)隊(duì)有意提供這樣的角色，請無需擔(dān)心技術(shù)不夠，技術(shù)、管理、協(xié)作等都是前端崗位的需求點(diǎn)，它們部分重疊又相互獨(dú)立，主動(dòng)邁出第一步就是成功的一半。不在管理崗位也可以練習(xí)管理，小到管理時(shí)間、金錢，大到嘗試影響和說服他人，嘗試優(yōu)化項(xiàng)目，改進(jìn)流程等。多嘗試做原來領(lǐng)導(dǎo)會(huì)做的事情，在這個(gè)過程中，鍛煉和認(rèn)識(shí)自己，積累管理經(jīng)驗(yàn)。

也許項(xiàng)目的代碼正讓你頭疼，也許公司的管理正讓你委屈，也許重復(fù)的生活正讓你迷茫，也許長期的重?fù)?dān)正讓你厭倦，也許身心的疲憊正讓你失望。很抱歉，曾經(jīng)喜歡前端的你，有時(shí)會(huì)遭遇非技術(shù)的壓力。請嘗試拾起好奇心和熱情，主動(dòng)“優(yōu)化”環(huán)境、生活和人際關(guān)系，在忍受和思考中發(fā)現(xiàn)“原理”，找到并復(fù)制更優(yōu)“模式”，在“實(shí)現(xiàn)”最佳實(shí)踐中，完成量變到質(zhì)變的積累。

綜上，可以很容易地把如何積累前端經(jīng)驗(yàn)總結(jié)成腦圖：

如何應(yīng)對前端面試

首先，明確尋找工作的動(dòng)機(jī)、目標(biāo)，如果已經(jīng)在職，需要權(quán)衡離職帶來的風(fēng)險(xiǎn)和收益，盡量不要裸辭準(zhǔn)備面試，原因是：

• 背景調(diào)查的流程和時(shí)間可能會(huì)延長。裸辭有的公司會(huì)先背調(diào)，再入職，在職為避免立即聯(lián)系候選人在職的公司，可能會(huì)先給 Offer，再背調(diào)。這不是一定的，只是具有參考意義
• 需要提供的證明可能會(huì)變多。比如有的公司會(huì)要求裸辭候選人提供工資流水、社保記錄
• 離職原因很可能會(huì)成為面試關(guān)注的重點(diǎn)之一。是不是被動(dòng)離職，為什么要冒中斷社保、經(jīng)濟(jì)來源的風(fēng)險(xiǎn)？
• 社保、經(jīng)濟(jì)來源可能中斷、生活節(jié)奏不適應(yīng)、求職不順利、社交需求等長期可能會(huì)給候選人產(chǎn)生壓力

其次，一定要先準(zhǔn)備，再去面試，缺少準(zhǔn)備，會(huì)導(dǎo)致：

• 理論知識(shí)遺忘，不準(zhǔn)確，回答問題或者交流項(xiàng)目，答不到技術(shù)點(diǎn)和得分關(guān)鍵詞上
• 算法和數(shù)據(jù)結(jié)構(gòu)、編程題不會(huì)做，不會(huì)說，或者有印象，寫不出
• 原理及實(shí)現(xiàn)答不出，或者答得太淺，只知道怎么用
• 回答受限于項(xiàng)目和技術(shù)棧，缺少廣度和深度，崗位要求的某領(lǐng)域遺忘或沒接觸過
• 想到哪里說到哪里，回答沒有邏輯，不連貫，缺少聯(lián)系、一致和條理性

部分面試官能夠辨別候選人的不佳表現(xiàn)是因?yàn)榫o張、缺乏準(zhǔn)備所致，少數(shù)面試官會(huì)嘗試通過引導(dǎo)、鼓勵(lì)、開玩笑、更換環(huán)境、變換候選人熟悉的話題等方式來繼續(xù)探測候選人的真實(shí)能力邊界。即便如此，含糊不清、缺少技術(shù)表述，邏輯混亂的答案依然會(huì)負(fù)面影響面試結(jié)果。

緊張是很多候選人都有的情緒。在回答不上來或者面試官給予了負(fù)面反饋時(shí)，例如被頻繁打斷、質(zhì)疑，部分候選人會(huì)焦慮，頭腦空白。也有候選人不適應(yīng)在別人的關(guān)注下做題，不善于表達(dá)。

所以，在準(zhǔn)備面試時(shí)，我們可以根據(jù)前端學(xué)習(xí)路線、心儀崗位要求、結(jié)合自身實(shí)際，搭建自己的技術(shù)?？蚣?，回答《前端通關(guān)手冊》《面試突擊》系列的 LeetBook 里，已經(jīng)按知識(shí)點(diǎn)分好類的面試題，將查漏補(bǔ)缺到的知識(shí)點(diǎn)，按分類掛載到自己的技術(shù)?？蚣苌?。面試時(shí)，在框架中搜索，總能找到可以回答的內(nèi)容，至少可以避免無話可說，回答也會(huì)盡可能地靠近正確答案。

對于害怕線上編程的候選人，推薦使用力扣的模擬面試功能，從大廠原題中抽取題目，模擬真實(shí)面試流程和情景。可以讓我們更好地控制時(shí)間和情緒，提升面試中對不通過情況的調(diào)試和處理能力。最好可以邊做邊說，講講思路、復(fù)雜度，用到的數(shù)據(jù)結(jié)構(gòu)、算法和技術(shù)點(diǎn)等。習(xí)慣后，真實(shí)面試只是換了題目和聽眾，自然會(huì)更從容。

最后，臨場表現(xiàn)可以大方有禮，重視細(xì)節(jié)，但是不糾結(jié)于結(jié)果：

• 面試前：打印多份簡歷，著裝勿太休閑，口、身上無氣味，早 30 分鐘到，趕時(shí)間不要拼車
• 面試中：語速不要快，聲音大，突出技術(shù)關(guān)鍵詞，多看面試官，不會(huì)的跳過，不要卡在上面
• 面試后：感謝面試官并握手，不評論公司和他人，心儀崗位 3 天后，可以主動(dòng)詢問結(jié)果

綜上，可以很容易地把如何應(yīng)對前端面試總結(jié)成腦圖（點(diǎn)擊放大）：

前端面試流程形式

當(dāng)與公司約定好了面試時(shí)間，建議候選人至少提前 30 分鐘到達(dá)現(xiàn)場，原因是：

• 有的公司會(huì)要求填寫候選人到場填寫個(gè)人信息或者職位申請表，需要時(shí)間
• 有的公司有多輪面試，面試官時(shí)間安排緊湊，提前到，有機(jī)會(huì)一次性面完
• 有的公司地圖標(biāo)注不準(zhǔn)確或者沒溝通好，來錯(cuò)地方，需要有時(shí)間打車更正
• 前端面試流程，根據(jù)公司屬性，通常分為三種情況：
• 國內(nèi)公司，多先技術(shù)面，再人力面，部分公司喜歡在技術(shù)面前添加筆試題或機(jī)試題。

• 機(jī)試題通常時(shí)間夠用，筆試題可以只寫技術(shù)點(diǎn)，未約定時(shí)間時(shí)，控制在 30 分鐘完成。
• 技術(shù)面的一面往往是你未來的同事、組長或者直屬領(lǐng)導(dǎo)。
• 二面及以上通常是更高一級的領(lǐng)導(dǎo)或者別的部門的同事交叉面試。
• 技術(shù)面通常會(huì)評級，有的公司會(huì)設(shè)置專門的技術(shù)評定考試，結(jié)果影響職級和薪資區(qū)間。人力面通常會(huì)關(guān)注候選人的離職原因，職業(yè)規(guī)劃，向候選人核實(shí)簡歷中發(fā)現(xiàn)的問題。

• 通常，當(dāng) HR 開始向你介紹公司文化、詢問你當(dāng)前薪資和期望薪資、最快入職時(shí)間，都是代表面試可能已經(jīng)當(dāng)場通過
• 如果期望薪資超過了評級、漲幅超過 HR 權(quán)限等，能力和經(jīng)歷經(jīng)詢問依然存疑，或者需要繼續(xù)與其他候選人對比，那么通常會(huì)給候選人等待的時(shí)間范圍
• 多數(shù)公司的談薪是一個(gè)獨(dú)立流程，HR 會(huì)向候選人詳細(xì)介紹薪酬、獎(jiǎng)金、福利、晉升路線和通道，有時(shí)也希望降低候選人的期望，來達(dá)成錄用

• 外資公司，多先人力面，再技術(shù)面，最后人力面。比國內(nèi)公司多的第一場人力面，主要采用電話或現(xiàn)場簡單聊天的方式，對候選人進(jìn)行初步了解。這個(gè)階段 HR 的問題，很可能會(huì)包含最核心的崗位要求，例如某個(gè)不可或缺的技術(shù)棧、相關(guān)領(lǐng)域經(jīng)驗(yàn)，穩(wěn)定性要求等。
• 部分公司，多為大廠，候選人會(huì)接到技術(shù)電話面，這是初步了解，解答面試官關(guān)鍵疑問的途徑，具有初篩意義。通常，電話面及其它前置考核通過后，才會(huì)進(jìn)入到公司的面試流程。所以，接到電話不必緊張，如果不方便，一定要在電話中另行約定時(shí)間，避免錯(cuò)過機(jī)會(huì)。

面試，主要是語言溝通，對表達(dá)能力不太自信的候選人，可以準(zhǔn)備紙筆或電腦，在征得面試官同意的前提下，用你的架構(gòu)圖、時(shí)序圖、流程圖、代碼、文檔和項(xiàng)目來補(bǔ)充回答，可以給面試官留下更完整的印象，盡可能地多展現(xiàn)真實(shí)水平。

小結(jié)

界面是產(chǎn)品距離用戶最近的窗口，選擇前端，讓我們有機(jī)會(huì)直面用戶，從需求出發(fā)，在技術(shù)開發(fā)中，體驗(yàn)人性之美，更快、更好、更低成本地創(chuàng)造商業(yè)價(jià)值。

多平臺(tái)，跨終端，Serverless 的趨勢下，從事前端，無需自我設(shè)限，面對挫折和挑戰(zhàn)，用理智對抗情緒，選擇成長，任何人都無法阻止你成為領(lǐng)域?qū)＜一蛉珬４笈！?/span>

在準(zhǔn)備面試和積累經(jīng)驗(yàn)的道路上，指導(dǎo)和氛圍的重要性不言而喻。多年來，力扣已經(jīng)幫助很多前端實(shí)現(xiàn)職業(yè)發(fā)展，獲得自己心儀的崗位 Offer。面試真題和 LeetBook 等同于考前模擬和劃重點(diǎn)，讓我們可以有針對性地高效準(zhǔn)備面試，提升學(xué)習(xí)、思維能力并養(yǎng)成思考的習(xí)慣。

最重要的是，這里有一群和你一樣，心懷理想，勇于挑戰(zhàn)的人，彼此分享面試經(jīng)歷、解題思路，與你一同披荊斬棘，在前端的學(xué)習(xí)和工作中，成就更好的自己。

加油，很期待通往前端未來的路上，與你同行！

BY /

本文作者：吳小宇

聲明：本文歸 “力扣” 版權(quán)所有，未經(jīng)允許禁止轉(zhuǎn)載。