資深阿里程式設計師一一為你解刨Web前端知識體系結構，付出與收穫成正比！

只要接觸過前端，都會指導web前端的知識主要由三部分組成：分別為靜態html，樣式css，動態javascript（簡稱js）這三大部分組成。其三部分組成的一個體系的複雜程度不亞於其他一門技術的複雜程度。當然對於跟我一樣厲害的那些web前端來說那就是小菜一碟，但是很多人都只學了表面，基礎部分，很多重要的知識，深入部分都是被忽視了！其實這也就導致了部分前端開發工作者學了前端，但是卻找不到工作，有工作但是工資少的現象！

現在為大家一一解刨Web前端知識體系結構，在阿里從事了6年的全棧，也是從前端慢慢成長過來的，也想跟很多小夥伴說一句：付出與收穫是成正比的！

TextOne：首先最最最基礎的部分html部分

1、常見的BOM物件

BOM（Browser Object Mode）瀏覽器物件模型，是Javascript的重要組成部分。它提供了一系列物件用於與瀏覽器視窗進行互動，這些物件通常統稱為BOM。

window視窗物件。它表示整個瀏覽器視窗，主要用來操作瀏覽器視窗。同時， window物件還是 ECMAScript 中的 Global 物件，因而所有全域性變數和函式都是它的屬性，且所有原生的建構函式及其他函式也都存在於它的名稱空間下。

document 即文件物件，也是window物件的一個屬性。整個HTML程式碼解析完以後，會生成一個由不同節點組成的樹形結構，俗稱DOM樹，document
用於描述DOM樹的狀態和屬性，並提供了很多操作DOM的API。

history 主要針對瀏覽器的歷史，頁面前進>>入棧，頁面返回<<出棧。

location 物件用於獲得當前頁面的地址url並把瀏覽器重定向到新的頁面。

navigator提供了與瀏覽器有關的資訊。userAgent是最常用的屬性，用來完成瀏覽器判斷。

screen 主要用來獲取使用者的螢幕資訊，比如螢幕的寬高，可用寬高等。

2、DOM 文件物件模型

Document Object Model，簡稱DOM，是w3c組織推薦的處理可擴充套件置標語言的標準程式設計介面。它是一種與平臺和語言無關的應用程式介面(API),它可以動態地訪問程式和指令碼,更新其內容、結構和www文件的風格(目前,HTML和XML文件是通過說明部分定義的)。文件可以進一步被處理，處理的結果可以加入到當前的頁面。DOM是一種基於樹的API文件，它要求在處理過程中整個文件都表示在儲存器中。另外一種簡單的API是基於事件的SAX，它可以用於處理很大的XML文件，由於大，所以不適合全部放在儲存器中處理。

3、事件機制

事件是使用者與頁面互動的基礎，到目前為止，DOM事件從PC端的 滑鼠事件(mouse) 發展到了 移動端的 觸控事件(touch) 和手勢事件(guesture)，touch事件描述了手指在螢幕操作的每一個細節，guesture 則是描述多手指操作時更為複雜的情況。

DOM事件流（event flow ）存在三個階段： 事件捕獲階段、處於目標階段、事件冒泡階段。

事件捕獲：通俗的理解就是，當滑鼠點選或者觸發dom事件時，瀏覽器會從根節點開始 由外到內進行事件傳播，即點選了子元素，如果父元素通過事件捕獲方式註冊了對應的事件的話，會先觸發父元素繫結的事件。

事件處理 ：當到達目標元素之後，執行目標元素繫結的處理函式。如果沒有繫結監聽函式，則不做任何處理。

事件冒泡：與事件捕獲恰恰相反，事件冒泡順序是由內到外進行事件傳播，直到根節點。

dom標準事件流的觸發的先後順序為： 先捕獲再冒泡，即當觸發dom事件時，會先進行事件捕獲，捕獲到事件源之後通過事件傳播進行事件冒泡。不同的瀏覽器對此有著不同的實現，IE10及以下不支援捕獲型事件，所以就少了一個事件捕獲階段，IE11、Chrome 、Firefox、Safari等瀏覽器則同時存在。

4、HTML渲染過程

瀏覽器載入 html 檔案以後，渲染引擎會從上往下，一步步來解析HTML標籤，大致過程如下：

5、本地儲存

通過本地儲存（Local Storage），web 應用程式能夠在使用者瀏覽器中對資料進行本地的儲存。

在 HTML5 之前，應用程式資料只能儲存在 cookie 中，包括每個伺服器請求。本地儲存則更安全，並且可在不影響網站效能的前提下將大量資料儲存於本地。

與 cookie 不同，儲存限制要大得多（至少5MB），並且資訊不會被傳輸到伺服器。

6、瀏覽器快取機制

瀏覽器快取機制是指通過 HTTP 協議頭裡的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)等欄位來控制檔案快取的機制。

另外有兩種特殊的情況：

手動重新整理頁面(F5)，瀏覽器會直接認為快取已經過期(可能快取還沒有過期)，在請求中加上欄位：Cache-Control:max-age=0，發包向伺服器查詢是否有檔案是否有更新。

強制重新整理頁面(Ctrl+F5)，瀏覽器會直接忽略本地的快取(有快取也會認為本地沒有快取)，在請求中加上欄位：Cache-Control:no-cache
(或 Pragma:no-cache)，發包向服務重新拉取檔案。

7、History

使用者訪問網頁的歷史記錄通常會被儲存在一個類似於棧的物件中，即history物件，點選返回就出棧，跳下一頁就入棧。 它提供了以下方法來操作頁面的前進和後退：

window.history.back( ) 返回到上一個頁面

window.history.forward( ) 進入到下一個頁面

window.history.go( [delta] ) 跳轉到指定頁面

8、HTML5離線快取

HTML5離線快取又叫Application
Cache，是從瀏覽器的快取中分出來的一塊快取區，如果要在這個快取中儲存資料，可以使用一個描述檔案（manifest file），列出要下載和快取的資源。

manifest 檔案是簡單的文字檔案，它告知瀏覽器被快取的內容（以及不快取的內容）。

9、Web語義化 和 SEO

Web語義化是指使用語義恰當的標籤，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜尋引擎都容易理解。

SEO是指在瞭解搜尋引擎自然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜尋引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目標客戶點選訪問網站，從而達到網際網路營銷及品牌建設的目標。

搜尋引擎通過爬蟲技術獲取的頁面就是由一堆 html 標籤組成的程式碼，人可以通過視覺化的方式來判斷頁面上哪些內容是重點，而機器做不到。
但搜尋引擎會根據標籤的含義來判斷內容的權重，因此，在合適的位置使用恰當的標籤，使整個頁面的語義明確，結構清晰，搜尋引擎才能正確識別頁面中的重要內容，並予以較高的權值。比如h1~h6這幾個標籤在SEO中的權值非常高，用它們作頁面的標題就是一個簡單的SEO優化。

TextTwo：就是我們的css樣式部分了

1、CSS選擇器

CSS選擇器即通過某種規則來匹配相應的標籤，併為其設定CSS樣式，常用的有類選擇器、標籤選擇器、ID選擇器、後代選擇器、群組選擇器、偽類選擇器(before/after)、兄弟選擇器(+~)、屬性選擇器等等。

2、CSS Reset

HTML
標籤在不設定任何樣式的情況下，也會有一個預設的CSS樣式，而不同核心瀏覽器對於這個預設值的設定則不盡相同，這樣可能會導致同一套程式碼在不同瀏覽器上的顯示效果不一致，而出現相容性問題。因此，在初始化時，需要對常用標籤的樣式進行初始化，使其預設樣式統一，這就是CSS
Reset ，即CSS樣式重置，比如：*{margin:0,padding:0} 就是最簡單CSS Reset， 關於CSS重置請參考：
Neat.css

3、盒子佈局

盒子模型是CSS比較重要的一個概念，也是CSS 佈局的基石。
常見的盒子模型有塊級盒子(block)和行內盒子(inline-block)，與盒子相關的幾個屬性有：margin、border、padding和content
等，這些屬性的作用是設定盒子與盒子之間的關係以及盒子與內容之間的關係。其中，只有普通文件流中塊級盒子的垂直外邊距才會發生合併，而行內盒子、浮動盒子或絕對定位之間的外邊距不會合並。另外，box-sizing
屬性的設定會影響盒子width和height的計算。

4、浮動佈局

設定元素的 float 屬性值為 left 或
right，就能使該元素脫離普通文件流，向左或向右浮動。一般在做宮格佈局時會用到，如果子元素全部設定為浮動，則父元素是塌陷的，這時就需要清除浮動，清除浮動的方法也很多，常用的方法是在元素末尾加空元素設定clear:both，

5、定位佈局

設定元素的position屬性值為 relative/absolute/fixed，就可以使該元素脫離文件流，並以某種參照座標進行偏移。其中，releave
是相對定位，它以自己原來的位置進行偏移，偏移後，原來的空間不會被其他元素佔用；absolute
是絕對定位，它以離自己最近的定位父容器作為參照進行偏移；為了對某個元素進行定位，常用的方式就是設定父容器的poistion:relative，因為相對定位元素在不設定
top 和 left 值時，不會對元素位置產生影響；fixed

6、彈性佈局

彈性佈局即Flex佈局，定義了flex的容器一個可伸縮容器，首先容器本身會根據容器中的元素動態設定自身大小；然後當Flex容器被應用一個大小時（width和height），將會自動調整容器中的元素適應新大小。Flex容器也可以設定伸縮比例和固定寬度，還可以設定容器中元素的排列方向（橫向和縱向）和是否支援元素的自動換行。有了這個神器，做頁面佈局的可以方便很多了。注意，設為Flex佈局以後，子元素的float、clear和vertical-align
屬性將失效。

7、CSS3 動畫

CSS3中規範引入了兩種動畫，分別是 transition 和 animation，transition
可以讓元素的CSS屬性值的變化在一段時間內平滑的過渡，形成動畫效果，為了使元素的變換更加豐富多彩，CSS3還引入了transfrom
屬性，它可以通過對元素進行 平移(translate)、旋轉(rotate)、放大縮小(scale)、傾斜(skew)
等操作，來實現2D和3D變換效果。transiton 還有一個結束事件
transitionEnd，該事件是在CSS完成過渡後觸發，如果過渡在完成之前被移除，則不會觸發transitionEnd 。

animation 需要設定一個@keyframes，來定義元素以哪種形式進行變換，
然後再通過動畫函式讓這種變換平滑的進行，從而達到動畫效果，動畫可以被設定為永久迴圈演示。設定 animation-play-state:paused
可以暫停動畫，設定 animation-fill-mode:forwards
可以讓動畫完成後定格在最後一幀。另外，還可以通過JS監聽animation的開始、結束和重複播放時的狀態，分別對應三個事件

8、BFC

BFC是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面元素。比如：內部滾動就是一個BFC，當一個父容器的overflow-y設定為auto時，並且子容器的長度大於父容器時，就會出現內部滾動，無論內部的元素怎麼滾動，都不會影響父容器以外的佈局，這個父容器的渲染區域就叫BFC。

9、CSS Hack

早期，不同核心瀏覽器對CSS屬性的解析存在著差異，導致顯示效果不一致，比如 margin
屬性在ie6中顯示的距離會比其他瀏覽器中顯示的距離寬2倍，也就是說margin-left:20px;在ie6中距左側元素的實際顯示距離是40px，而在非ie6的瀏覽器上顯示正常。因此，如果要想讓所有瀏覽器中都顯示是20px的寬度，就需要在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號，以達到應用不同的CSS樣式的目的，這種方式就是css
hack， 對於ie6中的margin應用hack就會變成這樣：.el {margin-left:20px;_margin-left:10px}

TextThree：javascript動態方面js部分

1、基礎語法

Javascript 基礎語法包括：變數宣告、資料型別、函式、控制語句、內建物件等。

在ES5 中，變數宣告有兩種方式，分別是 var 和 function ，var用於宣告普通的變數，接收任意型別，function用於宣告函式。另外，ES6 新增了 let、const、import 和 class等四個命令，分別用以宣告 普通變數、靜態變數、模組 和 類 。

JS資料型別共有六種，分別是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了Symbol 型別。其中，Object 是引用型別，其他的都是原始型別(Primitive Type)。

原始型別也稱為基本型別或簡單型別，因為其佔據空間固定，是簡單的資料段，為了便於提升變數查詢速度，將其儲存在棧(stack)中(按值訪問)。為了便於操作這類資料，ECMAScript
提供了 3 個 基本包裝型別 ：Boolean、Number 和 String
。基本包裝型別是一種特殊的引用型別，每當讀取一個基本型別值的時候，JS內部就會建立一個對應的包裝物件，從而可以呼叫一些方法來操作這些資料。

2、函式原型鏈

JS是一種基於物件的語言，但在ES6 之前是不支援繼承的，為了具備繼承的能力，Javascript 在  函式物件上建立了原型物件prototype，並以函式物件為主線，從上至下，在JS內部構建了一條  原型鏈 。原型鏈把一個個獨立的物件聯絡在一起，Object則是所有物件的祖宗， 任何物件所建立的原型鏈最終都指向了Object，並以 Object 終結。

3、函式作用域

函式作用域就是變數在宣告它們的函式體以及這個函式體巢狀的任意函式體內都是有定義的。因此，  JS中沒有塊級作用域，只有函式作用域
，這種設計導致JS中出現了  變數提升 的問題。簡單來說就是，將變數宣告提升到它所在作用域的最開始的部分，為了解決變數提升帶來的副作用，ES6新增了let 命令來宣告變數，let 所宣告的變數只在 let 命令所在的程式碼塊內有效，所以不存在變數提升問題。

4、this 指標

this 指標存在於函式中，用以標識函式執行時所處的上下文。函式的型別不同，this指向規則也不一樣：對於普通函式，this始終指向全域性對window對於建構函式，this則指向新建立的物件；對於方法，this指向呼叫該方法的物件。另外，Function物件也提供了call、apply和 bind 等方法來改變函式的 this 指向，其中，call 和 apply 主動執行函式，bind一般在事件回撥中使用，而 call 和 apply的區別只是引數的傳遞方式不同。

5、new 操作符

函式的建立有三種方式，即 顯式宣告、匿名定義 和 new Function()
。前面提到，JS中的函式即可以是函式，也可以是方法，還可以是建構函式。當使用new來建立物件時，該函式就是建構函式，JS將新物件的原型鏈指向了建構函式的原型物件，於是就在新物件和函式物件之間建立了一條原型鏈，通過新物件可以訪問到函式物件原型prototype中的方法和屬性。

6、閉包

通俗來講，閉包是一個具有獨立作用域的靜態執行環境。和函式作用域不同的是，閉包的作用域是靜態的，可以永久儲存區域性資源，而函式作用域只存在於執行時，函式執行結束後立即銷燬。因此，閉包可以形成一個獨立的執行過程，關於閉包更

7、單執行緒和非同步佇列

JS中的 setTimeout 和 setInterval 就是典型的非同步操作，它們會被放入非同步佇列中等待，即使 setTimeout(0)
也不會被立即執行，需要等到當前同步任務結束後才會被執行。

8、非同步通訊 Ajax技術

Ajax是瀏覽器專門用來和伺服器進行互動的非同步通訊技術，其核心物件是XMLHttpRequest，通過該物件可以建立一個Ajax請求。Ajax請求是一個耗時的非同步操作，當請求發出以後，Ajax提供了兩個狀態位來描述請求在不同階段的狀態，這兩個狀態位分別是  readyState 和  status

status 用於描述服務端對請求處理的情況，200 表示正確響應了請求，404 表示伺服器找不到資源，500 代表伺服器內部異常等等。

Ajax物件還可以設定一個timeout 值，代表超時時間，切記：timeout 只會影響
readyState，而不會影響status，因為超時只會中斷資料傳輸，但不會影響伺服器的處理結果。 如果 timeout 設定的不合理，就會導致響應碼
status 是200，但 response裡卻沒有資料，這種情況就是伺服器正確響應了請求，但資料的下載被超時中斷了。

為了防止XSS攻擊，瀏覽器對Ajax請求做了限制，不允許Ajax 跨域請求伺服器，只允許請求和當前地址同域的伺服器資源。但不限制指令碼和標籤傳送跨域請求，比如
script 和 img 標籤，因此可以利用指令碼跨域能力來實現跨域請求，即JSONP 的原理。

JSONP雖然可以解決跨域問題，但只能是get請求，並且沒有有效的錯誤捕獲機制，為了解決這個問題，XMLHttpRequest Level2 提出了
CORS 模型，即  跨域資源共享， 它不是一個新的API，而是一個標準規範，當瀏覽器發現該請求需要跨域時，就會自動在頭資訊中新增一個 Origin
欄位，用以說明本次請求來自哪個源。伺服器根據這個值，決定是否同意這次請求。

隨著移動端的快速發展，Web技術的應用場景正在變得越來越複雜，  關注點分離 原則在系統設計層面就顯得越來越重要，而XMLHttpRequest 是
Ajax 最古老的一個介面，因而不太符合現代化的系統設計理念。因此，瀏覽器提供了一個新的 Ajax 介面，即  Fetch API ，Fetch
API 是基於Promise 思想設計的，更符合關注點分離原則。

9、模組化

歷史上，Javascript 規範一直沒有模組(module)體系，即無法將一個大程式拆分成互相依賴的小檔案，再用簡單的方法拼裝起來。在 ES6
之前，為了實現JS模組化程式設計，社群制定了一些模組載入方案，最主要有 CMD 和 AMD 兩種，分別以commonjs 和 requirejs為代表。ES6
在語言標準的層面上，實現了模組化程式設計，其設計思想是，儘量靜態化，使得編譯時就能確定模組的依賴關係，即編譯時載入，而CMD和AMD是在執行時確定依賴關係，即執行時載入。

10、Node.js

Node.js 是一個基於 Chrome V8 引擎的 JavaScript
執行環境，它的執行不依賴於瀏覽器作為宿主環境，而是和服務端程式一樣可以獨立的執行，這使得JS程式設計第一次從客戶端被帶到了服務端，Node.js在服務端的優勢是，它採用單執行緒和非同步I/O模型，實現了一個高併發、高效能的執行時環境。相比傳統的多執行緒模型，Node.js實現簡單，並且可以減少資源開銷。

10、ES6

ES6 是 ECMAScript 6.0
的簡寫，即Javascript語言的下一代標準，已經在2015年6月正式釋出了，它的目標是讓JS能夠方便的開發企業級大型應用程式，因此，ES6的一些規範正在逐漸向Java、C#等後端語言標準靠近。ES6
規範中，比較重大的變化有以下幾個方面：

新增 let、const 命令 來宣告變數，和var 相比，let
宣告的變數不存在變數提升問題，但沒有改變JS弱型別的特點，依然可以接受任意型別變數的宣告；const
宣告的變數不允許在後續邏輯中改變，提高了JS語法的嚴謹性。

新增解構賦值、rest語法、箭頭函式，這些都是為了讓程式碼看起來更簡潔，而包裝的語法糖。

新增模組化，這是JS走向規範比較重要的一步，讓前端更方便的實現工程化。

新增類和繼承的概念，配合模組化，JS也可以實現高複用、高擴充套件的系統架構。

新增模板字串功能，高效簡潔，結束拼接字串的時代。

新增Promise物件，解決非同步回撥多層巢狀的問題。

希望本文對你有所幫助，有句話叫做“方法不對，努力白費”所有的前端大神都有自己的學習方法，而學web前端的學習也基本一致，而對於一個什麼都不懂的初學者，根本不會知道該怎麼學，這也是造成失敗的最直接原因。如果你處在迷茫期，找不到方向。可以加入我們的前端學習秋秋qun ：⑦⑥⑦-②⑦③-①零②
（從零基礎開始到前端專案實戰教學分享，學習工具，職業規劃指導）點： 前端學習交流圈

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2672755/，如需轉載，請註明出處，否則將追究法律責任。