前端學習知識體系

  • 2019 年 11 月 7 日
  • 筆記

原文題目是《一名合格前端工程師的自檢清單》，我目前的水平離前端工程師還很遙遠，所以更願意把這篇文章當作是對知識體系或者學習路線的總結。同時也是對自己的一個警醒，做好長期學習的準備。

PS： 表示自己增加的部分

一、JavaScript

變數和類型

  • 1.JavaScript 規定了幾種數據類型
  • 2.JavaScript 對象的底層數據結構是什麼
  • 3.Symbol 類型在實際開發中的應用、可手動實現一個簡單的 Symbol
  • 4.基本類型對應的內置對象，以及他們之間的裝箱拆箱操作
  • 5.理解值類型和引用類型
  • 6.賦值、淺拷貝、深拷貝的區別
  • 7.null 和 undefined 的區別
  • 8.至少可以說出三種判斷 JavaScript 數據類型的方式，以及他們的優缺點，如何準確的判斷數組類型
  • 9.可能發生隱式類型轉換的場景以及轉換原則，應如何避免或巧妙應用
  • 10.出現小數精度丟失的原因， JavaScript 可以存儲的最大數字、最大安全數字， JavaScript 處理大數字的方法、避免精度丟失的方法

原型和原型鏈

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

作用域和閉包

  • 1.理解詞法作用域和動態作用域
  • 2.理解 JavaScript 的作用域和作用域鏈
  • 3.理解 JavaScript 的執行上下文棧和變數對象，可以應用堆棧資訊快速定位問題
  • 4.this 的綁定，call、apply、bind 的原理
  • 5.閉包的實現原理和作用，可以列舉幾個開發中閉包的實際應用
  • 6.如何處理循環的非同步操作
  • 7.理解模組化解決的實際問題，可列舉幾個模組化方案並理解其中原理

記憶體機制

  • 記憶體空間，堆棧存儲
  • 理解堆棧溢出、記憶體泄漏的原理，如何防止，如何進行垃圾回收

執行機制

  • 1.為何 try 裡面放 return， finally 還會執行，理解其內部機制
  • 2.JavaScript 如何實現非同步編程，可以詳細描述 EventLoop 機制
  • 3.宏任務和微任務分別有哪些
  • 4.可以快速分析一個複雜的非同步嵌套邏輯，並掌握分析方法
  • 5.使用 Promise 實現串列
  • 6.Node 與瀏覽器 EventLoop 的差異
  • 7.如何在保證頁面運行流暢的情況下處理海量數據

語法和API

  • 1.理解 ECMAScript 和 JavaScript 的關係
  • 2.熟練運用 es5、 es6 提供的語法規範，尤其是掌握 es6 的 let、解構、箭頭函數、Promise、Async、Await、Class 等
  • 3.熟練掌握 JavaScript提供的全局對象、全局函數、全局屬性
  • 4.熟練應用 map、 reduce、 filter 等高階函數解決問題
  • 5.setInterval 需要注意的點，使用 settimeout 實現 setInterval
  • 6.JavaScript 提供的正則表達式 API、可以使用正則表達式（郵箱校驗、 URL 解析、去重等）解決常見問題
  • 7.JavaScript 異常處理的方式，統一的異常處理方案

jQuery

  • 1.熟練掌握選擇器，樣式操作，dom 操作，事件綁定
  • 2.鏈式編程（方法鏈），動畫
  • 3.常用組件，通過源程式碼了解封裝原理

二、HTML和CSS

HTML

  • 1.從規範的角度理解 HTML，從分類和語義的角度使用標籤
  • 2.常用頁面標籤的默認樣式、自帶屬性、不同瀏覽器的差異、處理瀏覽器兼容問題的方式
  • 3.元資訊類標籤( head、 title、 meta)的使用目的和配置方法
  • 4.HTML5離線快取原理
  • 5.可以使用 CanvasAPI、 SVG 等繪製高性能的動畫

CSS

  • 1.CSS 盒模型，在不同瀏覽器的差異（w3c 盒模型，IE 盒模型）
  • 2.CSS 所有選擇器及其優先順序、使用場景，哪些屬性可以繼承，如何運用 at規則
  • 3.CSS 偽類和偽元素有哪些，它們的區別和實際應用
  • 4.HTML 文檔流的排版規則， CSS 幾種定位的規則、定位參照物、對文檔流的影響，如何選擇最好的定位方式，雪碧圖實現原理
  • 5.水平垂直居中的方案、可以實現 6 種以上並對比它們的優缺點
  • 6.BFC 實現原理，可以解決的問題，如何創建 BFC，如何清除浮動
  • 7.了解布局方案的發展歷史（table、div+css、一維 flex、二維 grid）。熟悉 flex 布局的六大容器屬性和項目屬性
  • 7.可使用 CSS 函數復用程式碼，實現特殊效果
  • 8.PostCSS、 Sass、 Less 的異同，以及使用配置，至少掌握一種
  • 9.CSS 模組化方案、如何配置按需載入、如何防止 CSS 阻塞渲染
  • 10.CSS 瀏覽器兼容性寫法，了解不同 API 在不同瀏覽器下的兼容性情況
  • 11.掌握多套完整的響應式布局方案

手寫

  • 1.手寫瀑布流、輪播圖、焦點圖、彈出層、手風琴菜單、返回頂部、導航定位
  • 2.使用 CSS 繪製幾何圖形（圓形、三角形、扇形、菱形等）
  • 3.使用純 CSS 實現曲線運動（貝塞爾曲線）
  • 4.使用 CSS 實現常見動畫，如漸變、移動、旋轉、縮放等等
  • 4.實現常用布局效果（二列、三列、聖杯、雙飛翼、吸頂、移動吸頂），可以說出多種方式並理解其優缺點

框架

  • bootstrap 的組件應用、常用模板、刪格系統

三、電腦基礎

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

編譯原理

  • 1.理解程式碼到底是什麼，電腦如何將程式碼轉換為可以運行的目標程式
  • 2.正則表達式的匹配原理和性能優化
  • 3.如何將 JavaScript程式碼解析成抽象語法樹( AST)
    1. base64的編碼原理
  • 5.幾種進位的相互轉換計算方法，在 JavaScript中如何表示和轉換

網路協議

  • 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 的區別

設計模式

  • 1.熟練使用前端常用的設計模式編寫程式碼，如單例模式、裝飾器模式、代理模式等
  • 2.發布訂閱模式和觀察者模式的異同以及實際應用
  • 3.可以說出幾種設計模式在開發中的實際應用，理解框架源碼中對設計模式的應用

四、數據結構和演算法

JavaScript編碼能力

  • 1.多種方式實現數組去重、扁平化、對比優缺點
  • 2.多種方式實現深拷貝、對比優缺點
  • 3.手寫函數柯里化工具函數、並理解其應用場景和優勢
  • 4.手寫防抖和節流工具函數、並理解其內部原理和應用場景
  • 5.實現一個 sleep 函數

手動實現前端輪子

  • 1.手動實現 call、apply、bind
  • 2.手動實現符合 Promise/A+ 規範的 Promise、手動實現 asyncawait
  • 3.手寫一個 EventEmitter 實現事件發布、訂閱
  • 4.可以說出兩種實現雙向綁定的方案、可以手動實現
  • 5.手寫 JSON.stringify、JSON.parse
  • 6.手寫一個模版引擎，並能解釋其中原理
  • 7.手寫懶載入、下拉刷新、上拉載入、預載入等效果

數據結構

  • 1.理解常見數據結構的特點，以及他們在不同場景下使用的優缺點
  • 2.理解數組、字元串的存儲原理，並熟練應用他們解決問題
  • 3.理解二叉樹、棧、隊列、哈希表的基本結構和特點，並可以應用它解決問題
  • 4.了解圖、堆的基本結構和使用場景

演算法

  • 1.可計算一個演算法的時間複雜度和空間複雜度，可估計業務邏輯程式碼的耗時和記憶體消耗
  • 2.至少理解五種排序演算法的實現原理、應用場景、優缺點,可快速說出時間、空間複雜度
  • 3.了解遞歸和循環的優缺點、應用場景、並可在開發中熟練應用
  • 4.可應用回溯演算法、貪心演算法、分治演算法、動態規劃等解決複雜問題
  • 5.前端處理海量數據的演算法方案

五、運行環境

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

瀏覽器 API

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

瀏覽器原理

  • 1.各瀏覽器使用的 JavaScript 引擎以及它們的異同點、如何在程式碼中進行區分
  • 2.請求數據到請求結束與伺服器進行了幾次交互
  • 3.可詳細描述瀏覽器從輸入 URL 到頁面展現的詳細過程
  • 4.瀏覽器解析 HTML 程式碼的原理，以及構建 DOM 樹的流程
  • 5.瀏覽器如何解析 CSS 規則，並將其應用到 DOM 樹上
  • 6.瀏覽器如何將解析好的帶有樣式的 DOM 樹進行繪製
  • 7.瀏覽器的運行機制，如何配置資源非同步同步載入
  • 8.瀏覽器迴流與重繪的底層原理，引發原因，如何有效避免
  • 9.瀏覽器的垃圾回收機制，如何避免記憶體泄漏
  • 10.瀏覽器採用的快取方案，如何選擇和控制合適的快取方案

AJAX

  • 1.Ajax 簡介、非同步的概念、Ajax 框架的封裝、XMLHttpRequest 對象、兼容性處理方法、Ajax 快取問題、XML 介紹和使用
  • 2.JSON 和 JSON 解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和 lazy-load 技術、JQuery 框架中的 AjaxAPI

Node

  • 1.理解 Node 在應用程式中的作用，可以使用 Node 搭建前端運行環境、使用 Node 操作文件、操作資料庫等等
  • 2.掌握一種 Node 開發框架，如 Express， Express 和 Koa的區別
  • 3.熟練使用 Node 提供的 API 如 Path、 Http、 ChildProcess 等並理解其實現原理
  • 4.Node 的底層運行原理、和瀏覽器的異同
  • 5.Node 事件驅動、非阻塞機制的實現原理

六、框架和類庫

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

TypeScript

  • 1.理解泛型、介面等面向對象的相關概念，TypeScript 對面向對象理念的實現
  • 2.理解使用 TypeScript 的好處，掌握 TypeScript 基礎語法
  • 3.TypeScript 的規則檢測原理
  • 4.可以在 React、 Vue 等框架中使用 TypeScript 進行開發

Vue

  • 1.熟練使用 Vue 的 API、生命周期、鉤子函數
  • 2.MVVM 框架設計理念
  • 3.Vue 雙向綁定實現原理、Diff 演算法的內部實現
  • 4.Vue 的事件機制
  • 5.從 template 轉換成真實 DOM 的實現機制

多端開發

  • 1.單頁面應用（SPA）的原理和優缺點，掌握一種快速開發 SPA的方案
  • 2.理解 Viewport、em、rem 的原理和用法，解析度、 px、 ppi、 dpi、 dp的區別和實際應用
  • 3.移動端頁面適配解決方案、不同機型適配方案，移動端測試和調試
  • 4.掌握一種 JavaScript移動客戶端開發技術，如 ReactNative：可以搭建 ReactNative 開發環境，熟練進行開發，可理解 ReactNative 的運作原理，不同端適配
  • 5.掌握一種 JavaScript PC客戶端開發技術，如 Electron：可搭建 Electron 開發環境，熟練進行開發，可理解 Electron 的運作原理
  • 6.掌握一種小程式開發框架或原生小程式開發
  • 7.理解多端框架的內部實現原理，至少了解一個多端框架的使用

數據流管理

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

實用庫

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

開發和調試

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

七、前端工程

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

項目構建

  • 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

nginx

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

開發提速

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

版本控制

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

持續集成

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

八、項目和業務後端技能

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

性能優化

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

前端安全

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

業務相關

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

九、學習提升

  • 1.部落格：持續更新部落格，定期總結知識，不斷完善自己的知識體系
  • 2.英語：參與社區翻譯，在閱讀資料上逐漸往官方文檔和英文部落格靠攏
  • 3.人際：保持好奇心，保持解疑的熱情，保持理性交流
  • 4.知識管理：RSS/書籍/社區 —— 印象筆記 —— 部落格

VirMach 便宜 VPS

QNews

QNews