一名「合格」前端工程師的自檢清單

「來源: ｜Vue中文社群 ID：vue_fe」

開篇

前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。

到現在為止，前端工程師已經成為研發體系中的重要崗位之一。可是，與此相對的是，我發現極少或者幾乎沒有大學的計算機專業願意開設前端課程，更沒有系統性的教學方案出現。大部分前端工程師的知識，其實都是來自於實踐和工作中零散的學習。

一、JavaScript基礎

前端工程師吃飯的傢伙，深度、廣度一樣都不能差。

1、變數和類型

1. JavaScript規定了幾種語言類型

2. JavaScript物件的底層資料結構是什麼

3. Symbol類型在實際開發中的應用、可手動實現一個簡單的 Symbol

4. JavaScript中的變數在記憶體中的具體儲存形式

5.基本類型對應的內建物件，以及他們之間的裝箱拆箱操作

6.理解值類型和引用類型

7. null和 undefined的區別

8.至少可以說出三種判斷 JavaScript資料類型的方式，以及他們的優缺點，如何準確的判斷陣列類型

9.可能發生隱式類型轉換的場景以及轉換原則，應如何避免或巧妙應用

10.出現小數精度丟失的原因， JavaScript可以儲存的最大數字、最大安全數字， JavaScript處理大數字的方法、避免精度丟失的方法

2、原型和原型鏈

1.理解原型設計模式以及 JavaScript中的原型規則

2. instanceof的底層實現原理，手動實現一個 instanceof

3.實現繼承的幾種方式以及他們的優缺點

5.至少說出一種開源項目(如 Node)中應用原型繼承的案例

6.可以描述 new一個物件的詳細過程，手動實現一個 new操作符

7.理解 es6class構造以及繼承的底層實現原理

3、作用域和閉包

1.理解詞法作用域和動態作用域

2.理解 JavaScript的作用域和作用域鏈

3.理解 JavaScript的執行上下文棧，可以應用堆棧資訊快速定位問題

4. this的原理以及幾種不同使用場景的取值

5.閉包的實現原理和作用，可以列舉幾個開發中閉包的實際應用

6.理解堆棧溢位和記憶體洩漏的原理，如何防止

7.如何處理迴圈的非同步操作

8.理解模組化解決的實際問題，可列舉幾個模組化方案並理解其中原理

4、執行機制

1.為何 try裡面放 return， finally還會執行，理解其內部機制

2. JavaScript如何實現非同步程式設計，可以詳細描述 EventLoop機制

3.宏任務和微任務分別有哪些

4.可以快速分析一個複雜的非同步巢狀邏輯，並掌握分析方法

5.使用 Promise實現序列

6. Node與瀏覽器 EventLoop的差異

7.如何在保證頁面運行流暢的情況下處理海量資料

5、語法和API

1.理解 ECMAScript和 JavaScript的關係

2.熟練運用 es5、 es6提供的語法規範，

3.熟練掌握 JavaScript提供的全局物件（例如 Date、 Math）、全局函數（例如 decodeURI、 isNaN）、全局屬性（例如 Infinity、 undefined）

4.熟練應用 map、 reduce、 filter 等高階函數解決問題

5. setInterval需要注意的點，使用 settimeout實現 setInterval

6. JavaScript提供的正則表示式 API、可以使用正則表示式（郵箱校驗、 URL解析、去重等）解決常見問題

7. JavaScript異常處理的方式，統一的異常處理方案

二、HTML和CSS

1、HTML

1.從規範的角度理解 HTML，從分類和語義的角度使用標籤

2.常用頁面標籤的預設樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器相容問題的方式

3.元資訊類標籤( head、 title、 meta)的使用目的和配置方法

4. HTML5離線快取原理

5.可以使用 CanvasAPI、 SVG等繪製高效能的動畫

2、CSS

1. CSS盒模型，在不同瀏覽器的差異

2. CSS所有選擇器及其優先順序、使用場景，哪些可以繼承，如何運用 at規則

3. CSS偽類和偽元素有哪些，它們的區別和實際應用

4. HTML文件流的排版規則， CSS幾種定位的規則、定位參照物、對文件流的影響，如何選擇最好的定位方式，雪碧圖實現原理

5.水平垂直居中的方案、可以實現 6種以上並對比它們的優缺點

6. BFC實現原理，可以解決的問題，如何創建 BFC

7.可使用 CSS函數複用程式碼，實現特殊效果

8. PostCSS、 Sass、 Less的異同，以及使用配置，至少掌握一種

9. CSS模組化方案、如何配置按需載入、如何防止 CSS阻塞渲染

10.熟練使用 CSS實現常見動畫，如漸變、移動、旋轉、縮放等等

11. CSS瀏覽器相容性寫法，瞭解不同 API在不同瀏覽器下的相容性情況

12.掌握一套完整的響應式佈局方案

2、手寫

1.手寫圖片瀑布流效果

2.使用 CSS繪製幾何圖形（圓形、三角形、扇形、菱形等）

3.使用純 CSS實現曲線運動（貝塞爾曲線）

4.實現常用佈局（三欄、聖盃、雙飛翼、吸頂），可是說出多種方式並理解其優缺點

三、計算機基礎

關於編譯原理，不需要理解非常深入，但是最基本的原理和概念一定要懂，這對於學習一門程式語言非常重要

1、編譯原理

1.理解程式碼到底是什麼，計算機如何將程式碼轉換為可以運行的目標程式

2.正則表示式的匹配原理和效能優化

3.如何將 JavaScript程式碼解析成抽象語法樹( AST)

4. base64的編碼原理

5.幾種進位制的相互轉換計算方法，在 JavaScript中如何表示和轉換

2、網路協議

1.理解什麼是協議，瞭解 TCP/IP網路協議族的構成，每層協議在應用程式中發揮的作用

2.三次握手和四次揮手詳細原理，為什麼要使用這種機制

3.有哪些協議是可靠， TCP有哪些手段保證可靠交付

4. DNS的作用、 DNS解析的詳細過程， DNS優化原理

5. CDN的作用和原理

6. HTTP請求報文和響應報文的具體組成，能理解常見請求頭的含義，有幾種請求方式，區別是什麼

7. HTTP所有狀態碼的具體含義，看到異常狀態碼能快速定位問題

8. HTTP1.1、 HTTP2.0帶來的改變

9. HTTPS的加密原理，如何開啟 HTTPS，如何劫持 HTTPS請求

10.理解 WebSocket協議的底層原理、與 HTTP的區別

3、設計模式

1.熟練使用前端常用的設計模式編寫程式碼，如單例模式、裝飾器模式、代理模式等

2.釋出訂閱模式和觀察者模式的異同以及實際應用

3.可以說出幾種設計模式在開發中的實際應用，理解框架源碼中對設計模式的應用

四、資料結構和演算法

據我瞭解的大部分前端對這部分知識有些欠缺，甚至抵觸，但是，如果突破更高的天花板，這部分知識是必不可少的，而且我親身經歷——非常有用！

1、JavaScript編碼能力

1.多種方式實現陣列去重、扁平化、對比優缺點

2.多種方式實現深拷貝、對比優缺點

3.手寫函數柯里化工具函數、並理解其應用場景和優勢

4.手寫防抖和節流工具函數、並理解其內部原理和應用場景

5.實現一個 sleep函數

2、手動實現前端輪子

1.手動實現 call、apply、bind

2.手動實現符合 Promise/A+規範的 Promise、手動實現 asyncawait

3.手寫一個 EventEmitter實現事件釋出、訂閱

4.可以說出兩種實現雙向繫結的方案、可以手動實現

5.手寫 JSON.stringify、 JSON.parse

6.手寫一個模版引擎，並能解釋其中原理

7.手寫 懶載入、 下拉重新整理、 上拉載入、 預載入等效果

3、資料結構

1.理解常見資料結構的特點，以及他們在不同場景下使用的優缺點

2.理解 陣列、 字元串的儲存原理，並熟練應用他們解決問題

3.理解 二叉樹、 棧、 佇列、 雜湊表的基本結構和特點，並可以應用它解決問題

4.瞭解 圖、 堆的基本結構和使用場景

4、演算法

1.可計算一個演算法的時間複雜度和空間複雜度，可估計業務邏輯程式碼的耗時和記憶體消耗

2.至少理解五種排序演算法的實現原理、應用場景、優缺點，可快速說出時間、空間複雜度

3.瞭解遞迴和迴圈的優缺點、應用場景、並可在開發中熟練應用

4.可應用 回溯演算法、 貪心演算法、 分治演算法、 動態規劃等解決複雜問題

5.前端處理海量資料的演算法方案

五、運行環境

我們需要理清語言和環境的關係：

ECMAScript描述了 JavaScript語言的語法和基本物件規範瀏覽器作為 JavaScript的一種運行環境，為它提供了：文件物件模型（ DOM），描述處理網頁內容的方法和介面、瀏覽器物件模型（ BOM），描述與瀏覽器進行互動的方法和介面Node也是 JavaScript的一種運行環境，為它提供了操作 I/O、網路等 API

1、瀏覽器API

1.瀏覽器提供的符合 W3C標準的 DOM操作 API、瀏覽器差異、相容性

2.瀏覽器提供的瀏覽器物件模型 ( BOM)提供的所有全局 API、瀏覽器差異、相容性

3.大量 DOM操作、海量資料的效能優化(合併操作、 Diff、 requestAnimationFrame等)

4.瀏覽器海量資料儲存、操作效能優化

5. DOM事件流的具體實現機制、不同瀏覽器的差異、事件代理

6.前端發起網路請求的幾種方式及其底層實現、可以手寫原生 ajax、 fetch、可以熟練使用第三方庫

7.瀏覽器的同源策略，如何避免同源策略，幾種方式的異同點以及如何選型

8.瀏覽器提供的幾種儲存機制、優缺點、開發中正確的選擇

9.瀏覽器跨標籤通訊

2、瀏覽器原理

1.各瀏覽器使用的 JavaScript引擎以及它們的異同點、如何在程式碼中進行區分

2.請求資料到請求結束與伺服器進行了幾次互動

3.可詳細描述瀏覽器從輸入 URL到頁面展現的詳細過程

4.瀏覽器解析 HTML程式碼的原理，以及構建 DOM樹的流程

5.瀏覽器如何解析 CSS規則，並將其應用到 DOM樹上

6.瀏覽器如何將解析好的帶有樣式的 DOM樹進行繪製

7.瀏覽器的運行機制，如何配置資源非同步同步載入

8.瀏覽器迴流與重繪的底層原理，引發原因，如何有效避免

9.瀏覽器的垃圾回收機制，如何避免記憶體洩漏

10.瀏覽器採用的快取方案，如何選擇和控制合適的快取方案

3、Node

1.理解 Node在應用程式中的作用，可以使用 Node搭建前端運行環境、使用 Node操作檔案、操作資料庫等等

2.掌握一種 Node開發框架，如 Express， Express和 Koa的區別

3.熟練使用 Node提供的 API如 Path、 Http、 ChildProcess等並理解其實現原理

4. Node的底層運行原理、和瀏覽器的異同

5. Node事件驅動、非阻塞機制的實現原理

六、框架和類庫

輪子層出不窮，從原理上理解才是正道

1、TypeScript

1.理解 泛型、 介面等面向物件的相關概念， TypeScript對面向物件理念的實現

2.理解使用 TypeScript的好處，掌握 TypeScript基礎語法

3. TypeScript的規則檢測原理

4.可以在 React、 Vue等框架中使用 TypeScript進行開發

2、React

1. React和 vue選型和優缺點、核心架構的區別

2. React中 setState的執行機制，如何有效的管理狀態

3. React的事件底層實現機制

4. React的虛擬 DOM和 Diff演算法的內部實現

5. React的 Fiber工作原理，解決了什麼問題

6. ReactRouter和 VueRouter的底層實現原理、動態載入實現原理

7.可熟練應用 ReactAPI、生命週期等，可應用 HOC、 render props、 Hooks等高階用法解決問題

8.基於 React的特性和原理，可以手動實現一個簡單的 React

3、Vue

1.熟練使用 Vue的 API、生命週期、鉤子函數

2. MVVM框架設計理念

3. Vue雙向繫結實現原理、 Diff演算法的內部實現

4. Vue的事件機制

5.從 template轉換成真實 DOM的實現機制

2、多端開發

1.單頁面應用（ SPA）的原理和優缺點，掌握一種快速開發 SPA的方案

2.理解 Viewport、 em、 rem的原理和用法，解析度、 px、 ppi、 dpi、 dp的區別和實際應用

3.移動端頁面適配解決方案、不同機型適配方案

4.掌握一種 JavaScript移動客戶端開發技術，如 ReactNative：可以搭建 ReactNative開發環境，熟練進行開發，可理解 ReactNative的運作原理，不同端適配

5.掌握一種 JavaScriptPC客戶端開發技術，如 Electron：可搭建 Electron開發環境，熟練進行開發，可理解 Electron的運作原理

6.掌握一種小程式開發框架或原生小程式開發

7.理解多端框架的內部實現原理，至少了解一個多端框架的使用

3、資料流管理

1.掌握 React和 Vue傳統的跨元件通訊方案，對比採用資料流管理框架的異同

2.熟練使用 Redux管理資料流，並理解其實現原理，中介軟體實現原理

3.熟練使用 Mobx管理資料流，並理解其實現原理，相比 Redux有什麼優勢

4.熟練使用 Vuex管理資料流，並理解其實現原理

5.以上資料流方案的異同和優缺點，不情況下的技術選型

4、實用庫

1.至少掌握一種 UI元件框架，如 antd design，理解其設計理念、底層實現

2.掌握一種圖表繪製框架，如 Echart，理解其設計理念、底層實現，可以自己實現圖表

3.掌握一種 GIS開發框架，如百度地圖 API

4.掌握一種視覺化開發框架，如 Three.js、 D3

5.工具函數庫，如 lodash、 underscore、 moment等，理解使用的工具類或工具函數的具體實現原理

5、開發和偵錯

1.熟練使用各瀏覽器提供的偵錯工具

2.熟練使用一種代理工具實現請求代理、抓包，如 charls

3.可以使用 Android、 IOS模擬器進行偵錯，並掌握一種真機偵錯方案

4.瞭解 Vue、 React等框架偵錯工具的使用

七、前端工程

前端工程化：以工程化方法和工具提高開發生產效率、降低維護難度

1、項目構建

1.理解 npm、 yarn依賴包管理的原理，兩者的區別

2.可以使用 npm運行自定義指令碼

3.理解 Babel、 ESLint、 webpack等工具在項目中承擔的作用

4. ESLint規則檢測原理，常用的 ESLint配置

5. Babel的核心原理，可以自己編寫一個 Babel插件

6.可以配置一種前端程式碼相容方案，如 Polyfill

7. Webpack的編譯原理、構建流程、熱更新原理， chunk、 bundle和 module的區別和應用

8.可熟練配置已有的 loaders和 plugins解決問題，可以自己編寫 loaders和 plugins

2、nginx

1.正向代理與反向代理的特點和例項

2.可手動搭建一個簡單的 nginx伺服器、

3.熟練應用常用的 nginx內建變數，掌握常用的匹配規則寫法

4.可以用 nginx實現請求過濾、配置 gzip、負載均衡等，並能解釋其內部原理

3、開發提速

1.熟練掌握一種介面管理、介面 mock工具的使用，如 yapi

2.掌握一種高效的日誌埋點方案，可快速使用日誌查詢工具定位線上問題

3.理解 TDD與 BDD模式，至少會使用一種前端單元測試框架

4、版本控制

1.理解 Git的核心原理、工作流程、和 SVN的區別

2.熟練使用常規的 Git命令、 git rebase、 git stash等進階命令

3.可以快速解決 線上分支回滾、 線上分支錯誤合併等複雜問題

5、持續整合

1.理解 CI/CD技術的意義，至少熟練掌握一種 CI/CD工具的使用，如 Jenkins

2.可以獨自完成架構設計、技術選型、環境搭建、全流程開發、部署上線等一套完整的開發流程（包括 Web應用、移動客戶端應用、 PC客戶端應用、小程式、 H5等等）

八、項目和業務

1、後端技能

1.瞭解後端的開發方式，在應用程式中的作用，至少會使用一種後端語言

2.掌握資料最終在資料庫中是如何落地儲存的，能看懂表結構設計、表之間的關聯，至少會使用一種資料庫

2、效能優化

1.瞭解前端效能衡量指標、效能監控要點，掌握一種前端效能監控方案

2.瞭解常見的 Web、 App效能優化方案

3. SEO排名規則、 SEO優化方案、前後端分離的 SEO

4. SSR實現方案、優缺點、及其效能優化

5. Webpack的效能優化方案

6. Canvas效能優化方案

7. React、 Vue等框架使用效能優化方案

3、前端安全

1. XSS攻擊的原理、分類、具體案例，前端如何防禦

2. CSRF攻擊的原理、具體案例，前端如何防禦

3. HTTP劫持、頁面劫持的原理、防禦措施

4、業務相關

1.能理解所開發項目的整體業務形態、業務目標、業務架構，可以快速定位線上業務問題

2.能理解所開發項目整體的技術架構、能快讀的根據新需求進行開發規劃、能快速根據業務報警、線上日誌等定位並解決線上技術問題

3.可以將自己的想法或新技術在業務中落地實踐，儘量在團隊中擁有一定的不可替代性

九、學習提升

1.擁有自己的技術部落格，或者在一些部落格平臺上擁有自己的專欄

2.定期的將知識進行總結，不斷完善自己的知識體系

3.儘量將自己的知識轉換成真實的產出，不要僅僅停留在書面理解層面，更重要的是實際應用

4.堅持輸出 自己的程式碼，不要盲目的扎進公司業

十、技術之外

這部分可能比上面九條加起來重要！

1.瞭解網際網路人員術語：CEO、 CTO、 COO、 CFO、 PM、 QA、 UI、 FE、 DEV、 DBA、 OPS等

2.瞭解網際網路行業術語：B2B、 B2C、 C2C、 O2O等

3.掌握網際網路行業溝通、問答、學習的

4.有一定的 "PPT"能力

5.有一定的理財意識，至少了解儲蓄、貨幣基金、保險、指數基金、股票等基本的理財知識

6.掌握在繁重的工作和長期的電腦輻射的情況下保持健康的方法，建立正確的養生知識體系

小結

學習一門知識，最好先閱讀官方文件，把所有的 API大概瀏覽一遍，再繼續看大佬們總結的進階知識，什麼東西是搬運過來的，什麼是乾貨，一目瞭然。

希望你閱讀本篇文章後可以達到以下幾點：

1、從知識清單中找到自己的知識盲點與欠缺

2、具有知識體系化的思想，開始建立自己的知識體系

3、閱讀文章時將知識歸類到知識體系中，並不斷完善自己的知識體系

4、從文章中獲取到了有用的資源