前手淘前端負責人winter，帶你創建前端學習的知識框架

你好，我是winter。前端工程師是研發體系中的重要崗位之一。但是，與此相對的是，系統性的教學方案几乎找不到。大部分前端工程師的知識，其實都是來自於實踐和工做中零散的學習。

我以前作過一次調查，調查中看到了不少前端工程師的困擾。

前端技術的更新如此迅速，在這樣的大環境下，前端工程師保持自學能力就顯得尤爲重要了。所以，「學什麼」「怎麼學」就是咱們要迫切解決的問題。

因此，我想帶你梳理一套前端知識框架，幫你把知識點從新作個遍歷，讓你在學習的路上走的更輕鬆一些。這份知識框架，也是我在《重學前端》專欄裏幫助你們重構前端架構的核心內容。

0基礎入門前端

對於0基礎入門的同窗，我建議你先去讀幾本經典的前端教材，打好起知識基礎的地基。咱們能夠先從《JavaScript高級程序設計》、《精通CSS》看起。而後去閱讀一些參考性質的網站，很推薦：MDN。

若是你已經有1年以上的工做經驗了，咱們能夠一塊兒創建起前端的知識框架，再去把知識點作個遍歷，這其中有原理和背景的部分，我去看知識的原理和背景就夠了。若是沒有的話，咱們就去看整理和記憶這部分知識的方法，這樣，即便你碰見沒法一會兒記住的知識，也能夠很容易地查閱參考手冊和標準來解決。

前端必備知識框架

咱們先來說講什麼叫作知識架構？咱們能夠把它理解爲知識的「目錄」或者索引，它可以幫助咱們把零散的知識組織起來，也可以幫助咱們發現一些知識上的盲區。

咱們把前端知識在整體上分紅基礎部分和實踐部分，基礎部分包含了JavaScript語言、CSS和HTML以及瀏覽器的實現原理和API，這三個模塊涵蓋了一個前端工程師所須要掌握的所有知識，學完這三個部分，你再結合基本的編程能力，就能夠應對基本的前端開發工做了。

JavaScript知識架構圖

在JavaScript的模塊中，首先咱們能夠把語言按照文法、語義和運行時來拆分，這符合編程語言的通常規律：用必定的詞法和語法，表達必定語義，從而操做運行時。

接下來，按照程序的通常規律，能夠把運行時分爲數據結構和算法部分——數據結構包含類型和實例（內置對象），算法是執行過程。

類型部分中，對象比其它全部類型加起來都複雜，因此咱們會用較長的時間來學習對象，包括它的一些歷史和設計思路。執行過程應按照從大結構到小結構的角度來學習，從最頂層的事件循環和微任務，到函數、再到語句級的執行。

實例部分也很關鍵，但對JavaScript來講相似基礎庫，JavaScipt的內置對象多達150以上，在MDN會有細緻全面的講解。文法中的語法和語義基本是一一對應關係，在JavaScript標準中有一份語法定義表，建議隨時拿出來看一看。

HTML 和 CSS知識架構圖

在HTML的部分，咱們按照功能和語言來劃分它的知識，HTML的功能主要由標籤來承擔，因此首先要把標籤作一些分類。咱們按照承擔的不一樣功能，把標籤分紅下面幾種。

1. 文檔元信息：一般是出如今head標籤中的元素，包含了描述文檔自身的一些信息；
2. 語義相關：擴展了純文本，表達文章結構、不一樣語言要素的標籤；
3. 連接：提供到文檔內和文檔外的連接；
4. 替換型標籤：引入聲音、圖片、視頻等外部元素替換自身的一類標籤；
5. 表單：用於填寫和提交信息的一類標籤；
6. 表格：表頭、表尾、單元格等表格的結構。

除了標籤以外，你還應該把HTML看成一門語言來了解下。但標記語言跟編程語言不太同樣，比較基礎的HTML的語法和幾個重要的語言機制：實體、命名空間，你必定要掌握。

HTML還有一個補充標準也很關鍵：ARIA，它是HTML的擴展，在可訪問性領域，它有相當重要的做用。

CSS部分，按照慣例，咱們按照語言和功能劃分。

• 語言部分，@rule、選擇器、單位是三個要關注的部分。
• 功能部分，咱們能夠重點關注佈局、繪製和交互類。

-在佈局類的兩個最經常使用的佈局：正常流和彈性佈局。

-繪製類，建議你分紅圖形相關的和文字相關的繪製。

瀏覽器的實現原理和API

瀏覽器部分中瀏覽器的實現原理，是咱們深刻理解API的基礎。

你能夠從通常的瀏覽器設計出發，按照解析、構建DOM樹、計算CSS、渲染、合成和繪製的流程來學習瀏覽器的工做原理。

在API部分，能夠從W3C零散的標準中挑選幾個大塊的API來詳細講解，主要有：事件、DOM、CSSOM幾個部分，他們分別覆蓋了交互、語義和可見效果，這是咱們工做中用到的主要內容。

戳此查看完整知識架構圖