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

在 ECMScript 的標準化演進和開源社區的蓬勃發展中，做爲一名前端工程師，如何從愈來愈飽和的求職市場競爭中脫穎而出？如何融入環境勝任新的崗位？又該如何晉級成長，完成角色轉型？

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

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

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

1. 如何梳理我的經歷和知識體系，遊刃有餘地應對面試？

前端面試常見的考察點主要有：

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的項目實戰的學習資料都有整理，送給每一位前端小夥伴

點擊：前端學習圈