列一份前端知識架構圖

在上一篇文章中，我們簡要地總結了前端的學習路徑與方法，我們提到的第一個學習方法就是：建立知識框架。那麼，今天我們就一起來列一份前端的知識框架圖。

在開始列框架之前，我想先來談談我們的目標。實際上，我們在網上可以找到很多參考資料，比如 MDN 這樣的參考手冊，又比如一份語言標準，但是我們的課程既不是一本參考手冊，也不是一份語言標準。參考手冊希望做到便於查閱、便於理解和全面，語言標準的目標是嚴謹、無遺漏、無歧義。

而我們的課程有什麼不同呢？我認為，作為一個課程，有兩個目標：一個是把無法通過查閱解決的原理和背景講清楚，另一個是把不方便查閱和記憶的內容整理好。

我會儘量避免像前面提到的兩種文檔一樣逐條目羅列知識點和細節，當然，這不是在說兩種文檔沒有價值，而是我們各有分工，參考手冊和語言標準做的事情，我們沒必要重覆去做，即使做了也不一定能做得更好。

在這個課程里，我希望能和你一起打造一個前端知識的框架，再把知識點做個遍歷，這其中，有原理和背景的部分，我去講解知識的原理和背景。如果沒有的話，我們就去講整理和記憶這部分知識的方法，這樣，即使你遇見無法一下子記住的知識，也可以很容易地查閱參考手冊和標準來解決。

如果讓我做一個劃分，前端的知識在總體上分成基礎部分和實踐部分，基礎部分包含了 JavaScript 語言（模塊一）、CSS 和 HTML（模塊二）以及瀏覽器的實現原理和 API（模塊三），這三個模塊涵蓋了一個前端工程師所需要掌握的全部知識。

學完這三個部分，你再結合基本的編程能力，就可以應對基本的前端開發工作了。實踐部分（模塊四）重點會介紹我在工作過程中遇到的問題和解決方案，希望這塊內容能夠幫助你和你的前端團隊找到可能的發展方向和著力點。

JavaScript

上面是我整理的 JavaScript 知識架構圖，下麵我們來具體解釋一下。

在 JavaScript 的模塊中，首先我們可以把語言按照文法、語義和運行時來拆分，這符合編程語言的一般規律：用一定的詞法和語法，表達一定語義，從而操作運行時。

接下來，我們又按照程式的一般規律，把運行時分為數據結構和演算法部分：數據結構包含類型和實例（JavaScript 的類型系統就是它的 7 種基本類型和 7 種語言類型，實例就是它的內置對象部分）。所謂的演算法，就是 JavaScript 的執行過程。

類型部分中，對象比其它所有類型加起來都要更為複雜，所以我們會用較長的篇幅來講解對象，包括它的一些歷史和設計思路。

執行過程我們則需要按照從大結構到小結構的角度講解，從最頂層的程式與模塊、事件迴圈和微任務，到函數、再到語句級的執行。我們從粗到細地瞭解執行過程。

實例部分，對 JavaScript 來說類似基礎庫，JavaScipt 的內置對象多達 150 以上，考慮到我們即使逐次講解也必定不如 MDN 更加細緻全面，所以我們會從應用和機制的角度，挑選其中幾個體系來講解。

文法中的語法和語義基本是一一對應關係，在 JavaScript 標準中有一份語法定義表，它同樣不適合一一講解，我們會從 JavaScript 語法中特別的地方，以及與日常開發比較相關的地方來重點講解，剩下的內容和詞法部分，我們會帶領大家做一些數據挖掘工作，從這份表格中找到一些和我們日常開發息息相關的內容。

語義的大部分內容我們會在運行時的講解中透出，同時它又跟語法有對應的關係，所以我們不再單獨拿出來講解。

HTML 和 CSS

上面是我整理的 HTML 和 CSS 的知識架構圖，我們來具體解釋一下。

在 HTML 的部分，我們會按照功能和語言來劃分它的知識，HTML 的功能主要由標簽來承擔，所以我們首先會把標簽做一些分類，並對它們分別進行講解。

我們都知道 HTML 的標簽可以分為很多種，head 裡面的我們稱為元信息類標簽，諸如 title、meta、style、link、base 這些，它們用來描述文檔的一些基本信息。還有一類是一些諸如 section、nav 的標簽，它們在視覺表現上跟 div 並沒有區別，但是各有各的適用場景，我們把它們稱作語義類標簽。另外一類是 img、video、audio 之類的替換型媒體類標簽，用來引入外部內容，平常開發中你也會經常用到。再有就是表單類的，比如 input、button。

所以，基於這樣的分類，我把標簽分成下麵幾種。

1. 文檔元信息：通常是出現在 head 標簽中的元素，包含了描述文檔自身的一些信息；

2. 語義相關：擴展了純文本，表達文章結構、不同語言要素的標簽；

3. 鏈接：提供到文檔內和文檔外的鏈接；

4. 替換型標簽：引入聲音、圖片、視頻等外部元素替換自身的一類標簽；

5. 表單：用於填寫和提交信息的一類標簽；

6. 表格：表頭、表尾、單元格等表格的結構。

我們的重點會放在前四種標簽上，表單和表格較少用到，而且基本以查閱型知識為主，這裡就不拿出來講解了。

除了標簽之外，我們還應該把 HTML 當作一門語言來瞭解下，當然，標記語言跟編程語言不太一樣，沒有編程語言那麼嚴謹，所以，我們會簡要介紹 HTML 的語法和幾個重要的語言機制：實體、命名空間。

最後我們會介紹下 HTML 的補充標準：ARIA，它是 HTML 的擴展，在可訪問性領域，它有至關重要的作用。

CSS 部分，按照慣例，我們也會從語言和功能兩個角度去介紹。在語言部分，我們會從大到小介紹 CSS 的各種語法結構，比如 @rule、選擇器、單位等等。功能部分，我們大致可以分為佈局、繪製和交互類。

在佈局類我們介紹兩個最常用的佈局：正常流和彈性佈局。繪製類我們則會分成圖形相關的和文字相關的繪製。最後我們會介紹動畫和其它交互。

瀏覽器的實現原理和 API

上面是我整理的瀏覽器知識架構圖，我們來具體看一下。

瀏覽器部分我們會先介紹下瀏覽器的實現原理，這是我們深入理解 API 的基礎。

我們會從一般的瀏覽器設計出發，按照解析、構建 DOM 樹、計算 CSS、渲染、合成和繪製的流程來講解瀏覽器的工作原理。

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

其他的 API 怎麼辦呢，彆著急，在最後，我會給出一份 Chrome 已經實現的 API 跟 W3C 標準的對應關係和它的生成過程，來覆蓋其它部分。

前端工程實踐

最後一個模塊是前端工程實踐。我們在掌握了前面的基礎知識之後，也就基本掌握了做一個前端工程師的底層能力。在這個模塊中，我選擇了性能、工具鏈、持續集成、搭建系統、架構與基礎庫這幾個方向的前端工程實踐案例，來與你一起分享我的經驗。

性能

首先我們會談談性能。對任何一個前端團隊而言，性能是它價值的核心指標，從早年“重構”的實踐開始，前端有通過性能證明自己價值的傳統。

但是性能並非細節的堆砌，也不是默默做優化，所以，我會從團隊的角度來跟你一起探討性能的方法論和技術體系。

工具鏈

下一個案例是工具鏈。這一部分，我將會探討企業中工具鏈的建設思路。對一個高效又合作良好的前端團隊來說，一致性的工具鏈是不可或缺的保障，作為開發階段的入口，工具鏈又可以和性能、發佈、持續集成等系統鏈接到一起，成為團隊技術管理的基礎。

持續集成

接下來還會給大家介紹前端的持續集成，持續集成並非一個新概念，但是過去持續集成概念和理論都主要針對軟體開發，而對前端來說，持續集成是一個新的課題（當然對持續集成來說，前端也是一個新課題），比如 daily build 就完全不適用前端，前端代碼必須是線上實時可用的。這一部分內容將會針對前端的持續集成提出一些建設的思路。

搭建系統

接下來的案例是搭建系統，前端工作往往多而繁雜，針對高重覆性、可模塊化的業務需求，傳統的人工開發不再適用，搭建系統是大部分大型前端團隊的選擇。這一部分內容我將會介紹什麼是搭建系統，以及一些常見的搭建系統類型。

架構與基礎庫

最後一個部分，會給大家介紹前端架構和基礎庫的知識。軟體架構師主要解決功能複雜性的問題，服務端架構師主要解決高流量問題，而前端是頁面間天然解耦，分散在用戶端運行的系統，但是前端架構也有自己要解決的問題。

前端需求量大、專業人才稀缺，更因為前端本身運行在瀏覽器中，有大量相容工作要做。所以前端架構的主要職責是相容性、復用和能力擴展。這一部分文章我將會介紹前端架構工作的一些思路和切入點。

上面的這些案例來自我在領導手淘前端團隊時的經驗，和我在阿裡巴巴工作參與晉升面試時聽到的案例，這些內容幾乎是每一個年輕的前端團隊成長過程中都會需要的基礎設施。

好了，前端的知識體系我們大致列出來了。你可能發現了，知識體系圖中的每一個知識點，教程里都有與之對應的文章，這也是我的初衷：希望藉由講解這 40 餘個知識點，幫你建立起前端的知識框架。

講述形式

基於這份知識框架圖，我們的課程主要採用兩種講述形式：一種是重點講解的課程，一種是知識圖譜型的課程。

重點講解的課程我們會從技術的背景、原理和設計出發，把知識的內容呈現出來。這種形式適用於有體系和源流的知識，比較適合系統學習和理解，比如 JavaScript 中的對象、CSS 的排版。

知識圖譜型的課程則提供一些方法，用表格或者腦圖的形式來整理知識的結構。這種形式適用於零散的知識，比較適合記住大概，用到時去查閱，比如 JavaScript 的詞法、HTML 中的所有標簽、以及瀏覽器中的 API 就十分適合這樣的講解方式。

結語

今天我帶你一起劃分了前端的知識內容，前端的基礎知識分成 JavaScript、HTML、CSS 以及瀏覽器四大重點模塊，每個模塊也分別有自己的技術重點。你可以在框架中，挑選你最需要的前端知識，按需學習。

當然，這篇文章最重要的是，我希望能幫你建立一個理解前端的全景圖。這樣，任何時候，你都能夠體系地思考問題，分析問題。

你覺得你的劃分跟我一樣嗎，你還有其他的想法，你覺得是否有想瞭解的知識不在其中，更多內容請查看：開發者網站