與你分享前端工程師的面試、崗位適應、晉級成長三大話題和完整職業成長歷程。既有提綱挈領的方法論，也會推薦一些實用的學習資料、工具和方法，讓你讀完就能實踐落地。

這些面試利器，助你在前端求職競爭中脫穎而出

1. 面試流程

下面是一份常規的面試流程，不同的公司和團隊會有所差異。

面試的第一關一般是筆試。 每個公司和團隊使用的技術棧差別比較大，為了有效篩選候選人，筆試普遍以考察基礎知識為主，重點是 JavaScript、CSS和 HTTP 基礎。形式上紙筆筆試更多些，機試較少，時間大概有 20~40 分鐘。除非你的答題特別差，筆試通常不會刷人。

接下來是技術一面。 面試官主要是一線開發的領頭羊，他會針對你的筆試和簡歷進行延伸考察，包括以往項目的具體細節，重點技術棧的使用經驗和技術深度等。如果你在筆試中的某道題答得有欠缺，他也可能會給你一些提示，看你能否糾正。

技術二面的面試官通常是組長 ，工作經驗豐富，涉及的技術面更廣。團隊裏涉及的項目很多，因此組長對團隊的各個技術方向掌握會更全面，所以可能會考察一些比較發散性的問題，重點是觀察你的技術功底和潛力。

面試淘汰率最高的往往是技術一面和二面 。所以一定要做基礎復習和項目整理，準備充分。

然後是管理面試 ，由團隊負責人或更高層次的管理者進行，考核候選人的溝通和應變能力，保證候選人在溝通協作上能與團隊匹配，提高團隊整體效率。

最後是HR面 ，考察候選人的換工作動機、誠信度，當然最主要還是薪資預期。大家在換工作時一定要合理預期，總想薪資Double是不現實的。

2. 如何準備筆試？

首先，建議通過快速翻閱基礎類的書籍做思維導圖、系統性地復習，以保證知識體系的連貫性。比起網上的碎片化文章，書籍更有助於搭建整個知識體系的初步結構。下面推薦一些 前端基礎類書籍：

JavaScript 類書籍： 《JavaScript 高級程序設計》、《深入理解 ES6》， 作者：尼古拉斯·紮卡斯；

CSS 類書籍： 《精通 CSS 高級 Web 標準解決方案》、《CSS 揭秘》；

HTTP 類書籍： 《圖解 HTTP》。

其次，建議大家針對性地多做一些紙筆練習，以避免由於基本功不紮實或者粗心大意，在紙筆筆試環節漏洞百出，錯失了 offer。

大家日常開發都是用編輯器或是 IDE，有語法高亮和自動提示，但是實際筆試往往都是寫字，許多候選人在答筆試時表現得很生澀。以下紙筆筆試的常見錯誤，供你自行查漏補缺，提前防範：

1） 沒有過濾 hash 值

存在兩種原因：一種是對整個 URL 的組成缺乏足夠的了解，原理知識相對欠缺；一種是沒有把 hash 值考慮進去，太輕敵。

2） 使用字符串函數截斷處理

實現對字符串的解析，可以通過 split 拆分，也可以通過 slice、substring 函數處理。但問題在於大家的理解有偏差，經常弄錯這些函數的參數含義。

3） 沒有 decodeComponent

URL 裏的信息是已經編碼的，解析時需要 decode，但這方面經常被忽視。

4） 沒有 return

3. 如何梳理個人經歷和知識體系，遊刃有余地應對面試？
   前端面試常見的考察點主要有：

1） CSS的Flex布局。

2） Promise ：把一個回調函數 Promise 化。候選人常在 Promise 的構造函數上出問題，經常以為它是兩個參數。

3） 跨域 ：跨域的原因是 CORS 的常見問題。

4） HTTP 中緩存相關的問題。

面試問題的準備以實際工作過的項目梳理為主，簡歷中羅列的項目應突出重點，不宜過多。 下面首先重點說說項目梳理需要註意的問題。

1） 非業內著名的項目務必添加簡介。

說明主要功能、業務類型：不同業務類型的側重點會有很大不同。

介紹用戶群體：To B / To C / 公司內部；一般To B 產品邏輯功能較復雜，To C 產品性能要求較高，內部使用的產品技術相對新穎、前衛。

2） 介紹項目用到的主要技術。

形態：PC / 移動端/小程序，框架：Vue / React。簡介和技術要重點突出所面試崗位的過往項目經驗，以及項目匹配度。

3）介紹技術難點。

最簡單的就是回顧項目代碼的提交記錄，總結當時出現問題的原因並分析，找出多種解決方法和每種方法的優缺點，以免再次掉入相同的「坑」。

另外，建議大家制作一張知識圖譜，對自己的專業技能進行評估。

上圖是一些建議羅列的技能點。前端工程師的必備技能點有兩個：前端基礎 + 熟悉一個 Web 框架。Vue 和 React 在國內都很流行，專註將其中一個框架做深入即可。

最後，作為一個經常幫助團隊篩選前端候選人的面試官，我再啰嗦幾句面試需要註意的問題。

1） 深度優先。

技術深度比技術廣度更占優勢。無法通過面試評估的，通常都是因為技術深度不夠。所以在專業技能方面要揚長避短。與其打雞血補短板，不如深耕自己的優勢。

舉個例子，甲同學 Vue 的技術深度 80 分，React 基本沒用過；乙同學 Vue 技術深度 50 分，React 技術深度 50 分。在求職中遇到一個 Vue 要求的崗位，甲更有優勢。

2） 有備無患。

簡歷中的內容，無論是項目還是技術點，務必準備充分。不要將自己不擅長的項目寫到簡歷裏，因為一旦出現簡歷與實際不符，容易引發誠信質疑，難以通過。

3） 溫故知新。

面試結束後應盡快對筆試、面試的內容做自我總結，避免在一個地方跌倒兩次。

迅速融入新環境，適應新崗位
有一種說法：入職後的第一個月往往是職場人最想離職的階段。每個人進入新環境都難免會有不適應的地方，或是公司制度，或是團隊氛圍、工作流程的差異。那麽， 作為新人，如何盡快熟悉陌生的職場環境呢？

首先，盡快熟悉團隊裏的規則。 有的規則是顯性的，有些是隱性的，通常隱性規則比顯性規則多。

顯性規則 ：比如公司內的各種明文規定的制度，團隊使用的工具，包括版本控制系統、項目管理系統、知識管理系統、缺陷管理系統等。

隱性規則： 多與人溝通，自己梳理總結，包括：團隊的核心項目有哪些？主要的技術棧和技術文檔是什麽？項目參與人員的水平和狀況如何？項目潛在哪些問題？

比如上線系統有個歧義操作，老員工普遍都知道，但是如果沒有做梳理總結，就容易產生誤解、踩雷。

其次，心態上求同存異 ，切忌自以為是。認真閱讀工作相關的文檔、郵件，及時總結。剛進入新團隊容易出現兩種心態：從BAT大廠進入中小型團隊的同學容易有優越感，不屑於問；從小團隊進入大廠的同學容易怯懦，不好意思問，缺少溝通很容易出問題。因此應當保持謙遜，降低姿態，多與人交流溝通，從而快速了解和適應整個環境。

工欲善其事必先利其器：高效工具推薦

1. 溝通效率提升工具

日常工作中，前端同學需要與產品、設計、交互、後端、客戶端、測試、運維等多種角色協作。個人的溝通能力對於效率提升非常重要。下面介紹三種可以有效提升溝通效率的工具：

1）線框圖

用紙筆畫線框交互圖，可以很好地與產品、設計和交互團隊溝通。

2）流程圖

可把復雜的邏輯畫成流程圖，方便與後端、客戶端同學交流邏輯細節，避免理解錯誤。

3）序列圖

序列圖可以說是日常溝通的萬金油，跟任何一個角色溝通都非常好用。

序列圖由兩部分組成：生命線和消息，按照時間或交互順序維度聯動。與各個角色溝通遇到歧義或是理解偏差時，序列圖可以很好地統一大家的思路，達成最終方案。除了紙筆和白板，也可以用 Visual Paradigm 或 OmniGraffle 等軟件制作序列圖文檔。

2. 日常開發常用工具

1） 抓包軟件

花些時間熟悉 Charles 或 Fiddler 等工具的使用：如何本地代理、重寫、節流、斷點，可以快速定位線上問題，方便與後端、客戶端、測試溝通定位問題。

2） 項目管理軟件

高級以上的工程師可能涉及帶項目，對於任務、資源、時間要有清晰的認識。如 OminiPlan 或 Project 等工具，可以方便快速進行人力和時間分配，追蹤進度。

這裏推薦一下我的前端學習交流群：767273102，裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴。最新技術，與企業需求同步。好友都在裏面學習交流，每天都會有大牛定時講解前端技術!

點擊：前端學習圈

前端工程師面試利器！助你在前端求職競爭中脫穎而出