前言

要在200天內完成這些，過程中會更新

大致目標就是這樣，達到之後，就只看看前沿的技術，不被淘汰就好，就去做其他的事情

前端知識體系

研究技術的必要疑問

• 是什麼？為什麼出現？
• 沒有這個技術的時候什麼樣子？怎麼解決的？
• 原理是什麼？為什麼這麼設計或實現？
• 優缺點分別是什麼？
• 適用場景是什麼？
• 有什麼限制？需要注意哪些坑？
• 對比相似技術（定義相似，適用場景相似，原理相似，部分相似即可），有哪些異同？能不能結合使用？
• 聯想相關技術（該技術使用到的技術，可能使用到的技術），有哪些優化之處？為什麼使用它？有沒有替代技術？有沒有更先進更穩定的技術？
• 怎麼理解這個技術？怎麼向不會的人解釋這個技術？
• 形成什麼樣子的心理表徵？

知識體系

基礎技術

HTML

• 從規範的角度理解HTML，從分類和語義的角度使用標籤
• 元信息類標籤（head、title、meta）的使用目的和配置方法
• 常用頁面標籤的默認樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器兼容問題的方式

• HTML5 WebStorage

  • 有哪幾種？它們的區別是什麼？各自的使用場景是什麼？
  • 和Cookie有什麼異同？
  • 是不是和瀏覽器同源策略有關，為什麼？

• HTML5 ApplicationCache

  • 和WebStorage有什麼異同？

• HTML5 WebWorkers

  • 和異步API有什麼異同？
• HTML5 Server-Sent Events（SSE）
• HTML5 WebSocket
• HTML5 Canvas，SVG

CSS

• CSS塊元素，行內元素
• CSS盒模型，在不同瀏覽器的差異
• CSS所有選擇器及其優先級，選擇器的語義
• CSS偽類和偽元素，它們區別和實際應用
• HTML文檔流的佈局規則
• CSS定位規則，定位參照物，對文檔流的影響
• 水平垂直居中方案，越多越好，對比它們的優缺點，給出最佳實踐
• BFC原理，創建BFC
• PostCSS，SCSS的異同
• CSS模塊化方案，個人重點關注BEM
• CSS動畫，如漸變、移動、旋轉、縮放等等
• CSS瀏覽器兼容性寫法，瞭解不同API在不同瀏覽器下的兼容性情況
• 響應式佈局

JavaScript

變量和類型

• JavaScript規定了幾種基本數據類型
• 基本類型對應的內置對象，以及他們之間的裝箱拆箱操作
• 可能發生隱式類型轉換的場景以及轉換原則，應如何避免或巧妙應用
• JavaScript對象的底層數據結構是什麼
• 理解值類型和引用類型
• null和undefined的區別
• 至少可以説出三種判斷JavaScript數據類型的方式，以及他們的優缺點，如何準確的判斷數組類型
• 出現小數精度丟失的原因，JavaScript可以存儲的最大數字、最大安全數字，JavaScript處理大數字的方法、避免精度丟失的方法

面向對象

• 理解原型設計模式以及JavaScript中的原型設計
• instanceof的底層實現原理，手動實現一個instanceof
• 實現繼承的幾種方式以及他們的優缺點
• 至少説出一種開源項目(如Node)中應用原型繼承的案例
• 可以描述new一個對象的詳細過程，手動實現一個new操作符
• 理解es6 class構造以及繼承的底層實現原理

模塊化

• 理解詞法作用域和動態作用域
• 理解JavaScript的作用域和作用域鏈
• 理解JavaScript的執行上下文棧，可以應用堆棧信息快速定位問題
• this的原理以及幾種不同使用場景的取值
• 閉包的實現原理和作用，可以列舉幾個開發中閉包的實際應用
• 理解堆棧溢出和內存泄漏的原理，如何防止
• 理解模塊化解決的實際問題，可列舉幾個模塊化方案並理解其中原理

執行機制

• 為何try裏面放return，finally還會執行，理解其內部機制
• JavaScript如何實現異步編程，可以詳細描述EventLoop機制
• 理解task和jobs
• Node與瀏覽器EventLoop的差異
• 異步解決方案
• 可以快速分析一個複雜的異步嵌套邏輯，並掌握分析方法
• 如何處理循環的異步操作
• 使用Promise實現串行
• JavaScript異常處理的方式，統一的異常處理方案

語法和API

• 理解ECMAScript和JavaScript的關係
• 熟練運用es5、es6提供的語法規範
• .熟練掌握JavaScript提供的全局對象（例如Date、Math）、全局函數（例如decodeURI、isNaN）、全局屬性（例如Infinity、undefined）
• 熟練應用map、reduce、filter等高階函數解決問題
• setInterval需要注意的點，使用settimeout實現setInterval
• JavaScript提供的正則表達式API、可以使用正則表達式（郵箱校驗、URL解析、去重等）解決常見問題

實踐

• 多種方式實現數組去重、扁平化、對比優缺點
• 多種方式實現深拷貝、對比優缺點
• 手寫函數柯里化工具函數、並理解其應用場景和優勢
• 手寫防抖和節流工具函數、並理解其內部原理和應用場景
• 實現一個sleep函數
• 手動實現call、apply、bind
• 手動實現符合Promise/A+規範的Promise、手動實現async await
• 手寫一個EventEmitter實現事件發佈、訂閲
• 可以説出兩種實現雙向綁定的方案、可以手動實現
• 手寫JSON.stringify、JSON.parse
• 手寫一個模版引擎，並能解釋其中原理
• 手寫懶加載、下拉刷新、上拉加載、預加載等效果

計算機基礎

網絡協議

• OSI協議模型
• HTTP
• HTTPS
• HTTP/1.1，HTTP/2

設計模式

• 發佈訂閲模式，觀察者模式
• 常用設計模式
• 理解框架源碼中對設計模式的應用

數據結構與算法

數據結構

• 棧，隊列
• 哈希表
• 樹
• 圖

算法

• 可計算一個算法的時間複雜度和空間複雜度，可估計業務邏輯代碼的耗時和內存消耗
• 排序算法
• 遞歸，循環
• 回溯，貪心，分治，動態規劃

運行環境

瀏覽器API

• 瀏覽器提供的符合W3C標準的DOM操作API、瀏覽器差異、兼容性
• 瀏覽器提供的瀏覽器對象模型 (BOM)提供的所有全局API、瀏覽器差異、兼容性
• 大量DOM操作、海量數據的性能優化(合併操作、Diff、requestAnimationFrame等)
• DOM事件流的具體實現機制、不同瀏覽器的差異、事件代理
• 前端發起網絡請求的幾種方式及其底層實現、可以手寫原生ajax、fetch、可以熟練使用第三方庫
• 瀏覽器的同源策略，如何避免同源策略，幾種方式的異同點以及如何選型
• 瀏覽器提供的幾種存儲機制、優缺點、開發中正確的選擇
• 瀏覽器跨標籤通信

瀏覽器原理

• 可詳細描述瀏覽器從輸入URL到頁面展現的詳細過程
• 瀏覽器解析HTML代碼的原理，以及構建DOM樹的流程
• 瀏覽器如何解析CSS規則，並將其應用到DOM樹上
• 瀏覽器迴流與重繪的底層原理，引發原因，如何有效避免
• 瀏覽器的垃圾回收機制，如何避免內存泄漏

Node

• 理解Node在應用程序中的作用
• Node事件驅動、非阻塞機制的實現原理
• Node的底層運行原理、和瀏覽器的異同
• 掌握一種Node開發框架，如Express，Express和Koa的區別
• 熟練使用Node提供的API如Path、Http、Child Process等並理解其實現原理

框架和類庫

TypeScript

• 理解泛型、接口等面向對象的相關概念，TypeScript對面向對象理念的實現
• 理解使用TypeScript的好處，掌握TypeScript基礎語法
• TypeScript的規則檢測原理

React

• React和vue選型和優缺點、核心架構的區別
• React的事件底層實現機制
• React中setState的執行機制，如何有效的管理狀態
• React的虛擬DOM和Diff算法的內部實現
• React的Fiber工作原理，解決了什麼問題
• React Router和Vue Router的底層實現原理、動態加載實現原理
• 熟練應用React API、生命週期等，可應用HOC、render props、Hooks等高階用法解決問題

Vue

• MVVM框架設計理念
• 熟練使用Vue的API、生命週期、鈎子函數
• Vue雙向綁定實現原理、Diff算法的內部實現
• Vue的事件底層實現機制

數據流管理

• 掌握React和Vue傳統的跨組件通信方案，對比採用數據流管理框架的異同
• 熟練使用Redux管理數據流，並理解其實現原理，中間件實現原理
• 熟練使用Mobx管理數據流，並理解其實現原理，相比Redux有什麼優勢
• 熟練使用Vuex管理數據流，並理解其實現原理
• 以上數據流方案的異同和優缺點，不情況下的技術選型

開發和調試

• 熟練使用各瀏覽器提供的調試工具
• 熟練使用一種代理工具實現請求代理、抓包，如Charles
• 可以使用Android、IOS模擬器進行調試，並掌握一種真機調試方案
• 瞭解Vue、React等框架調試工具的使用

實用庫

• 至少掌握一種UI組件框架，如antd design，理解其設計理念、底層實現
• 掌握一種圖表繪製框架，如Echart，理解其設計理念、底層實現，可以自己實現圖表
• 掌握一種GIS開發框架，如百度地圖API
• 掌握一種可視化開發框架，如Three.js、D3
• 工具函數庫，如lodash、underscore、moment等，理解使用的工具類或工具函數的具體實現原理

多端開發

• 單頁面應用（SPA）的原理和優缺點，掌握一種快速開發SPA的方案
• 理解Viewport、em、rem的原理和用法，分辨率、px、ppi、dpi、dp的區別和實際應用
• 移動端頁面適配解決方案、不同機型適配方案
• 掌握一種JavaScript`PC客户端開發技術，如Electron：可搭建Electron開發環境，熟練進行開發，可理解Electron`的運作原理
• 掌握一種小程序開發框架或原生小程序開發
• 理解多端框架的內部實現原理，至少了解一個多端框架的使用

工程化

項目構建

• 理解npm、yarn依賴包管理的原理，兩者的區別
• 理解Babel、webpack、ESLint等工具在項目中承擔的作用
• ESLint規則檢測原理，常用的ESLint配置
• 理解Babel的核心原理，可以自己編寫一個Babel插件
• 可以配置一種前端代碼兼容方案，如Polyfill
• Webpack的編譯原理、構建流程、熱更新原理，chunk、bundle和module的區別和應用
• 可熟練配置已有的loaders和plugins解決問題，可以自己編寫loaders和plugins

代理

• 正向代理與反向代理的特點和實例
• 手動搭建一個簡單的nginx服務器
• 熟練應用常用的nginx內置變量，掌握常用的匹配規則寫法
• 可以用nginx實現請求過濾、配置gzip、負載均衡等，並能解釋其內部原理

開發

• 熟練掌握一種接口管理、接口mock工具的使用，如yapi
• 掌握一種高效的日誌埋點方案，可快速使用日誌查詢工具定位線上問題
• 理解TDD與BDD模式，至少會使用一種前端單元測試框架

持續集成

• 理解CI/CD技術的意義，至少熟練掌握一種CI/CD工具的使用，如Jenkins
• 可以獨自完成架構設計、技術選型、環境搭建、全流程開發、部署上線等一套完整的開發流程（包括Web應用、移動客户端應用、PC客户端應用、小程序、H5等等）

版本控制

• 理解Git的核心原理、工作流程、和SVN的區別
• 熟練使用常規的Git命令、git rebase、git stash等進階命令
• 可以快速解決線上分支回滾、線上分支錯誤合併等複雜問題

項目和業務

後端技術

• 瞭解後端的開發方式，在應用程序中的作用，至少會使用一種後端語言
• 掌握數據最終在數據庫中是如何落地存儲的，能看懂表結構設計、表之間的關聯，至少會使用一種數據庫

性能優化

• 瞭解前端性能衡量指標、性能監控要點，掌握一種前端性能監控方案
• 瞭解常見的Web、App性能優化方案
• SEO排名規則、SEO優化方案、前後端分離的SEO
• SSR實現方案、優缺點、及其性能優化
• Webpack的性能優化方案
• Canvas性能優化方案
• React、Vue等框架使用性能優化方案

安全防護

• XSS攻擊的原理、分類、具體案例，前端如何防禦
• CSRF攻擊的原理、具體案例，前端如何防禦
• HTTP劫持、頁面劫持的原理、防禦措施

業務相關

• 能理解所開發項目的整體業務形態、業務目標、業務架構，可以快速定位線上業務問題
• 能理解所開發項目整體的技術架構、能快讀的根據新需求進行開發規劃、能快速根據業務報警、線上日誌等定位並解決線上技術問題
• 可以將自己的想法或新技術在業務中落地實踐，儘量在團隊中擁有一定的不可替代性

小結

• 建立知識體系
• 在知識體系清單中找到知識盲點和欠缺
• 學習新知識，閲讀文章後，歸類到知識體系中，不斷完善知識體系

參考內容

一名【合格】前端工程師的自檢清單