開篇

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

到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。可是，與此相對的是，我發(fā)現(xiàn)極少或者幾乎沒有大學的計算機專業(yè)愿意開設(shè)前端課程，更沒有系統(tǒng)性的教學方案出現(xiàn)。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。

一、JavaScript基礎(chǔ)

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

1、變量和類型

1. JavaScript規(guī)定了幾種語言類型

2. JavaScript對象的底層數(shù)據(jù)結(jié)構(gòu)是什么

3. Symbol類型在實際開發(fā)中的應(yīng)用、可手動實現(xiàn)一個簡單的 Symbol

4. JavaScript中的變量在內(nèi)存中的具體存儲形式

5.基本類型對應(yīng)的內(nèi)置對象，以及他們之間的裝箱拆箱操作

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

7. null和 undefined的區(qū)別

8.至少可以說出三種判斷 JavaScript數(shù)據(jù)類型的方式，以及他們的優(yōu)缺點，如何準確的判斷數(shù)組類型

9.可能發(fā)生隱式類型轉(zhuǎn)換的場景以及轉(zhuǎn)換原則，應(yīng)如何避免或巧妙應(yīng)用

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

2、原型和原型鏈

1.理解原型設(shè)計模式以及 JavaScript中的原型規(guī)則

2. instanceof的底層實現(xiàn)原理，手動實現(xiàn)一個 instanceof

3.實現(xiàn)繼承的幾種方式以及他們的優(yōu)缺點

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

6.可以描述 new一個對象的詳細過程，手動實現(xiàn)一個 new操作符

7.理解 es6class構(gòu)造以及繼承的底層實現(xiàn)原理

3、作用域和閉包

1.理解詞法作用域和動態(tài)作用域

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

3.理解 JavaScript的執(zhí)行上下文棧，可以應(yīng)用堆棧信息快速定位問題

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

5.閉包的實現(xiàn)原理和作用，可以列舉幾個開發(fā)中閉包的實際應(yīng)用

6.理解堆棧溢出和內(nèi)存泄漏的原理，如何防止

7.如何處理循環(huán)的異步操作

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

4、執(zhí)行機制

1.為何 try里面放 return， finally還會執(zhí)行，理解其內(nèi)部機制

2. JavaScript如何實現(xiàn)異步編程，可以詳細描述 EventLoop機制

3.宏任務(wù)和微任務(wù)分別有哪些

4.可以快速分析一個復雜的異步嵌套邏輯，并掌握分析方法

5.使用 Promise實現(xiàn)串行

6. Node與瀏覽器 EventLoop的差異

7.如何在保證頁面運行流暢的情況下處理海量數(shù)據(jù)

5、語法和API

1.理解 ECMAScript和 JavaScript的關(guān)系

2.熟練運用 es5、 es6提供的語法規(guī)范，

3.熟練掌握 JavaScript提供的全局對象（例如 Date、 Math）、全局函數(shù)（例如 decodeURI、 isNaN）、全局屬性（例如 Infinity、 undefined）

4.熟練應(yīng)用 map、 reduce、 filter 等高階函數(shù)解決問題

5. setInterval需要注意的點，使用 settimeout實現(xiàn) setInterval

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

7. JavaScript異常處理的方式，統(tǒng)一的異常處理方案

二、HTML和CSS

1、HTML

1.從規(guī)范的角度理解 HTML，從分類和語義的角度使用標簽

2.常用頁面標簽的默認樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器兼容問題的方式

3.元信息類標簽( head、 title、 meta)的使用目的和配置方法

4. HTML5離線緩存原理

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

2、CSS

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

2. CSS所有選擇器及其優(yōu)先級、使用場景，哪些可以繼承，如何運用 at規(guī)則

3. CSS偽類和偽元素有哪些，它們的區(qū)別和實際應(yīng)用

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

5.水平垂直居中的方案、可以實現(xiàn) 6種以上并對比它們的優(yōu)缺點

6. BFC實現(xiàn)原理，可以解決的問題，如何創(chuàng)建 BFC

7.可使用 CSS函數(shù)復用代碼，實現(xiàn)特殊效果

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

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

10.熟練使用 CSS實現(xiàn)常見動畫，如漸變、移動、旋轉(zhuǎn)、縮放等等

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

12.掌握一套完整的響應(yīng)式布局方案

2、手寫

1.手寫圖片瀑布流效果

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

3.使用純 CSS實現(xiàn)曲線運動（貝塞爾曲線）

4.實現(xiàn)常用布局（三欄、圣杯、雙飛翼、吸頂），可是說出多種方式并理解其優(yōu)缺點

三、計算機基礎(chǔ)

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

1、編譯原理

1.理解代碼到底是什么，計算機如何將代碼轉(zhuǎn)換為可以運行的目標程序

2.正則表達式的匹配原理和性能優(yōu)化

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

4. base64的編碼原理

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

2、網(wǎng)絡(luò)協(xié)議

1.理解什么是協(xié)議，了解 TCP/IP網(wǎng)絡(luò)協(xié)議族的構(gòu)成，每層協(xié)議在應(yīng)用程序中發(fā)揮的作用

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

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

4. DNS的作用、 DNS解析的詳細過程， DNS優(yōu)化原理

5. CDN的作用和原理

6. HTTP請求報文和響應(yīng)報文的具體組成，能理解常見請求頭的含義，有幾種請求方式，區(qū)別是什么

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

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

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

10.理解 WebSocket協(xié)議的底層原理、與 HTTP的區(qū)別

3、設(shè)計模式

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

2.發(fā)布訂閱模式和觀察者模式的異同以及實際應(yīng)用

3.可以說出幾種設(shè)計模式在開發(fā)中的實際應(yīng)用，理解框架源碼中對設(shè)計模式的應(yīng)用

四、數(shù)據(jù)結(jié)構(gòu)和算法

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

1、JavaScript編碼能力

1.多種方式實現(xiàn)數(shù)組去重、扁平化、對比優(yōu)缺點

2.多種方式實現(xiàn)深拷貝、對比優(yōu)缺點

3.手寫函數(shù)柯里化工具函數(shù)、并理解其應(yīng)用場景和優(yōu)勢

4.手寫防抖和節(jié)流工具函數(shù)、并理解其內(nèi)部原理和應(yīng)用場景

5.實現(xiàn)一個 sleep函數(shù)

2、手動實現(xiàn)前端輪子

1.手動實現(xiàn) call、apply、bind

2.手動實現(xiàn)符合 Promise/A+規(guī)范的 Promise、手動實現(xiàn) asyncawait

3.手寫一個 EventEmitter實現(xiàn)事件發(fā)布、訂閱

4.可以說出兩種實現(xiàn)雙向綁定的方案、可以手動實現(xiàn)

5.手寫 JSON.stringify、 JSON.parse

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

7.手寫 懶加載、 下拉刷新、 上拉加載、 預加載等效果

3、數(shù)據(jù)結(jié)構(gòu)

1.理解常見數(shù)據(jù)結(jié)構(gòu)的特點，以及他們在不同場景下使用的優(yōu)缺點

2.理解 數(shù)組、 字符串的存儲原理，并熟練應(yīng)用他們解決問題

3.理解 二叉樹、 棧、 隊列、 哈希表的基本結(jié)構(gòu)和特點，并可以應(yīng)用它解決問題

4.了解 圖、 堆的基本結(jié)構(gòu)和使用場景

4、算法

1.可計算一個算法的時間復雜度和空間復雜度，可估計業(yè)務(wù)邏輯代碼的耗時和內(nèi)存消耗

2.至少理解五種排序算法的實現(xiàn)原理、應(yīng)用場景、優(yōu)缺點，可快速說出時間、空間復雜度

3.了解遞歸和循環(huán)的優(yōu)缺點、應(yīng)用場景、并可在開發(fā)中熟練應(yīng)用

4.可應(yīng)用 回溯算法、 貪心算法、 分治算法、 動態(tài)規(guī)劃等解決復雜問題

5.前端處理海量數(shù)據(jù)的算法方案

五、運行環(huán)境

我們需要理清語言和環(huán)境的關(guān)系：

ECMAScript描述了 JavaScript語言的語法和基本對象規(guī)范

瀏覽器作為 JavaScript的一種運行環(huán)境，為它提供了：文檔對象模型（ DOM），描述處理網(wǎng)頁內(nèi)容的方法和接口、瀏覽器對象模型（ BOM），描述與瀏覽器進行交互的方法和接口

Node也是 JavaScript的一種運行環(huán)境，為它提供了操作 I/O、網(wǎng)絡(luò)等 API

1、瀏覽器API

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

2.瀏覽器提供的瀏覽器對象模型 ( BOM)提供的所有全局 API、瀏覽器差異、兼容性

3.大量 DOM操作、海量數(shù)據(jù)的性能優(yōu)化(合并操作、 Diff、 requestAnimationFrame等)

4.瀏覽器海量數(shù)據(jù)存儲、操作性能優(yōu)化

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

6.前端發(fā)起網(wǎng)絡(luò)請求的幾種方式及其底層實現(xiàn)、可以手寫原生 ajax、 fetch、可以熟練使用第三方庫

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

8.瀏覽器提供的幾種存儲機制、優(yōu)缺點、開發(fā)中正確的選擇

9.瀏覽器跨標簽通信

2、瀏覽器原理

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

2.請求數(shù)據(jù)到請求結(jié)束與服務(wù)器進行了幾次交互

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

4.瀏覽器解析 HTML代碼的原理，以及構(gòu)建 DOM樹的流程

5.瀏覽器如何解析 CSS規(guī)則，并將其應(yīng)用到 DOM樹上

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

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

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

9.瀏覽器的垃圾回收機制，如何避免內(nèi)存泄漏

10.瀏覽器采用的緩存方案，如何選擇和控制合適的緩存方案

3、Node

1.理解 Node在應(yīng)用程序中的作用，可以使用 Node搭建前端運行環(huán)境、使用 Node操作文件、操作數(shù)據(jù)庫等等

2.掌握一種 Node開發(fā)框架，如 Express， Express和 Koa的區(qū)別

3.熟練使用 Node提供的 API如 Path、 Http、 ChildProcess等并理解其實現(xiàn)原理

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

5. Node事件驅(qū)動、非阻塞機制的實現(xiàn)原理

六、框架和類庫

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

1、TypeScript

1.理解 泛型、 接口等面向?qū)ο蟮南嚓P(guān)概念， TypeScript對面向?qū)ο罄砟畹膶崿F(xiàn)

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

3. TypeScript的規(guī)則檢測原理

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

2、React

1. React和 vue選型和優(yōu)缺點、核心架構(gòu)的區(qū)別

2. React中 setState的執(zhí)行機制，如何有效的管理狀態(tài)

3. React的事件底層實現(xiàn)機制

4. React的虛擬 DOM和 Diff算法的內(nèi)部實現(xiàn)

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

6. ReactRouter和 VueRouter的底層實現(xiàn)原理、動態(tài)加載實現(xiàn)原理

7.可熟練應(yīng)用 ReactAPI、生命周期等，可應(yīng)用 HOC、 render props、 Hooks等高階用法解決問題

8.基于 React的特性和原理，可以手動實現(xiàn)一個簡單的 React

3、Vue

1.熟練使用 Vue的 API、生命周期、鉤子函數(shù)

2. MVVM框架設(shè)計理念

3. Vue雙向綁定實現(xiàn)原理、 Diff算法的內(nèi)部實現(xiàn)

4. Vue的事件機制

5.從 template轉(zhuǎn)換成真實 DOM的實現(xiàn)機制

2、多端開發(fā)

1.單頁面應(yīng)用（ SPA）的原理和優(yōu)缺點，掌握一種快速開發(fā) SPA的方案

2.理解 Viewport、 em、 rem的原理和用法，分辨率、 px、 ppi、 dpi、 dp的區(qū)別和實際應(yīng)用

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

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

5.掌握一種 JavaScript PC客戶端開發(fā)技術(shù)，如 Electron：可搭建 Electron開發(fā)環(huán)境，熟練進行開發(fā)，可理解 Electron的運作原理

6.掌握一種小程序開發(fā)框架或原生小程序開發(fā)

7.理解多端框架的內(nèi)部實現(xiàn)原理，至少了解一個多端框架的使用

3、數(shù)據(jù)流管理

1.掌握 React和 Vue傳統(tǒng)的跨組件通信方案，對比采用數(shù)據(jù)流管理框架的異同

2.熟練使用 Redux管理數(shù)據(jù)流，并理解其實現(xiàn)原理，中間件實現(xiàn)原理

3.熟練使用 Mobx管理數(shù)據(jù)流，并理解其實現(xiàn)原理，相比 Redux有什么優(yōu)勢

4.熟練使用 Vuex管理數(shù)據(jù)流，并理解其實現(xiàn)原理

5.以上數(shù)據(jù)流方案的異同和優(yōu)缺點，不情況下的技術(shù)選型

4、實用庫

1.至少掌握一種 UI組件框架，如 antd design，理解其設(shè)計理念、底層實現(xiàn)

2.掌握一種圖表繪制框架，如 Echart，理解其設(shè)計理念、底層實現(xiàn)，可以自己實現(xiàn)圖表

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

4.掌握一種可視化開發(fā)框架，如 Three.js、 D3

5.工具函數(shù)庫，如 lodash、 underscore、 moment等，理解使用的工具類或工具函數(shù)的具體實現(xiàn)原理

5、開發(fā)和調(diào)試

1.熟練使用各瀏覽器提供的調(diào)試工具

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

3.可以使用 Android、 IOS模擬器進行調(diào)試，并掌握一種真機調(diào)試方案

4.了解 Vue、 React等框架調(diào)試工具的使用

七、前端工程

前端工程化：以工程化方法和工具提高開發(fā)生產(chǎn)效率、降低維護難度

1、項目構(gòu)建

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

2.可以使用 npm運行自定義腳本

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

4. ESLint規(guī)則檢測原理，常用的 ESLint配置

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

6.可以配置一種前端代碼兼容方案，如 Polyfill

7. Webpack的編譯原理、構(gòu)建流程、熱更新原理， chunk、 bundle和 module的區(qū)別和應(yīng)用

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

2、nginx

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

2.可手動搭建一個簡單的 nginx服務(wù)器、

3.熟練應(yīng)用常用的 nginx內(nèi)置變量，掌握常用的匹配規(guī)則寫法

4.可以用 nginx實現(xiàn)請求過濾、配置 gzip、負載均衡等，并能解釋其內(nèi)部原理

3、開發(fā)提速

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

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

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

4、版本控制

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

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

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

5、持續(xù)集成

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

2.可以獨自完成架構(gòu)設(shè)計、技術(shù)選型、環(huán)境搭建、全流程開發(fā)、部署上線等一套完整的開發(fā)流程（包括 Web應(yīng)用、移動客戶端應(yīng)用、 PC客戶端應(yīng)用、小程序、 H5等等）

八、項目和業(yè)務(wù)

1、后端技能

1.了解后端的開發(fā)方式，在應(yīng)用程序中的作用，至少會使用一種后端語言

2.掌握數(shù)據(jù)最終在數(shù)據(jù)庫中是如何落地存儲的，能看懂表結(jié)構(gòu)設(shè)計、表之間的關(guān)聯(lián)，至少會使用一種數(shù)據(jù)庫

2、性能優(yōu)化

1.了解前端性能衡量指標、性能監(jiān)控要點，掌握一種前端性能監(jiān)控方案

2.了解常見的 Web、 App性能優(yōu)化方案

3. SEO排名規(guī)則、 SEO優(yōu)化方案、前后端分離的 SEO

4. SSR實現(xiàn)方案、優(yōu)缺點、及其性能優(yōu)化

5. Webpack的性能優(yōu)化方案

6. Canvas性能優(yōu)化方案

7. React、 Vue等框架使用性能優(yōu)化方案

3、前端安全

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

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

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

4、業(yè)務(wù)相關(guān)

1.能理解所開發(fā)項目的整體業(yè)務(wù)形態(tài)、業(yè)務(wù)目標、業(yè)務(wù)架構(gòu)，可以快速定位線上業(yè)務(wù)問題

2.能理解所開發(fā)項目整體的技術(shù)架構(gòu)、能快讀的根據(jù)新需求進行開發(fā)規(guī)劃、能快速根據(jù)業(yè)務(wù)報警、線上日志等定位并解決線上技術(shù)問題

3.可以將自己的想法或新技術(shù)在業(yè)務(wù)中落地實踐，盡量在團隊中擁有一定的不可替代性

九、學習提升

1.擁有自己的技術(shù)博客，或者在一些博客平臺上擁有自己的專欄

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

3.盡量將自己的知識轉(zhuǎn)換成真實的產(chǎn)出，不要僅僅停留在書面理解層面，更重要的是實際應(yīng)用

4.堅持輸出 自己的代碼，不要盲目的扎進公司業(yè)

十、技術(shù)之外

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

1.了解互聯(lián)網(wǎng)人員術(shù)語：CEO、 CTO、 COO、 CFO、 PM、 QA、 UI、 FE、 DEV、 DBA、 OPS等

2.了解互聯(lián)網(wǎng)行業(yè)術(shù)語：B2B、 B2C、 C2C、 O2O等

3.掌握互聯(lián)網(wǎng)行業(yè)溝通、問答、學習的

4.有一定的 "PPT"能力

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

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

小結(jié)

學習一門知識，最好先閱讀官方文檔，把所有的 API大概瀏覽一遍，再繼續(xù)看大佬們總結(jié)的進階知識，什么東西是搬運過來的，什么是干貨，一目了然。

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

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

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

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

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

---

---

告訴我，你在看

總結(jié)

以上是生活随笔為你收集整理的一份【超级全面】的前端工程师的自检清单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。