資深阿里程序員一一爲你解刨Web前端知識體系結構，付出與收穫成正比！

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

如今爲你們一一解刨Web前端知識體系結構，在阿里從事了6年的全棧，也是從前端慢慢成長過來的，也想跟不少小夥伴說一句：付出與收穫是成正比的！

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

一、常見的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 主要用來獲取用戶的屏幕信息，好比屏幕的寬高，可用寬高等。

二、DOM 文檔對象模型

Document Object Model，簡稱DOM，是w3c組織推薦的處理可擴展置標語言的標準編程接口。它是一種與平臺和語言無關的應用程序接口(API),它能夠動態地訪問程序和腳本,更新其內容、結構和www文檔的風格(目前,HTML和XML文檔是經過說明部分定義的)。文檔能夠進一步被處理，處理的結果能夠加入到當前的頁面。DOM是一種基於樹的API文檔，它要求在處理過程當中整個文檔都表示在存儲器中。另一種簡單的API是基於事件的SAX，它能夠用於處理很大的XML文檔，因爲大，因此不適合所有放在存儲器中處理。

 

三、事件機制

事件是用戶與頁面交互的基礎，到目前爲止，DOM事件從PC端的 鼠標事件(mouse) 發展到了 移動端的 觸摸事件(touch) 和手勢事件(guesture)，touch事件描述了手指在屏幕操做的每個細節，guesture 則是描述多手指操做時更爲複雜的狀況。

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

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

事件處理 ：當到達目標元素以後，執行目標元素綁定的處理函數。若是沒有綁定監聽函數，則不作任何處理。

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

dom標準事件流的觸發的前後順序爲： 先捕獲再冒泡，即當觸發dom事件時，會先進行事件捕獲，捕獲到事件源以後經過事件傳播進行事件冒泡。不一樣的瀏覽器對此有着不一樣的實現，IE10及如下不支持捕獲型事件，因此就少了一個事件捕獲階段，IE十一、Chrome 、Firefox、Safari等瀏覽器則同時存在。

四、HTML渲染過程

瀏覽器加載 html 文件之後，渲染引擎會從上往下，一步步來解析HTML標籤，大體過程以下：

若是你是轉行或者是在校學生，碰見有問題沒法解答，能夠到個人WEB前端裙，裏面有我整理的最新學習路線和教程，能夠跟着學，有什麼不懂的地方能夠隨時在裏面問。
我都會幫忙解答，下面就是個人WEB前端q裙 851231348。
裏面彙集了一些正在學習的初學者，裙文件裏面也有我作web前端技術這段時間整理的一些學習手冊，面試題，前端開發工具，PDF文檔書籍教程，須要的話均可以自行來獲取下載。

五、本地存儲

經過本地存儲（Local Storage），web 應用程序可以在用戶瀏覽器中對數據進行本地的存儲。

在 HTML5 以前，應用程序數據只能存儲在 cookie 中，包括每一個服務器請求。本地存儲則更安全，而且可在不影響網站性能的前提下將大量數據存儲於本地。

與 cookie 不一樣，存儲限制要大得多（至少5MB），而且信息不會被傳輸到服務器。

六、瀏覽器緩存機制

瀏覽器緩存機制是指經過 HTTP 協議頭裏的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)等字段來控制文件緩存的機制。

另外有兩種特殊的狀況：

手動刷新頁面(F5)，瀏覽器會直接認爲緩存已通過期(可能緩存尚未過時)，在請求中加上字段：Cache-Control:max-age=0，發包向服務器查詢是否有文件是否有更新。

強制刷新頁面(Ctrl+F5)，瀏覽器會直接忽略本地的緩存(有緩存也會認爲本地沒有緩存)，在請求中加上字段：Cache-Control:no-cache
(或 Pragma:no-cache)，發包向服務從新拉取文件。

七、History

用戶訪問網頁的歷史記錄一般會被保存在一個相似於棧的對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供瞭如下方法來操做頁面的前進和後退：

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

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

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

八、HTML5離線緩存

HTML5離線緩存又叫Application
Cache，是從瀏覽器的緩存中分出來的一塊緩存區，若是要在這個緩存中保存數據，可使用一個描述文件（manifest file），列出要下載和緩存的資源。

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

九、Web語義化 和 SEO

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

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

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

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

一、CSS選擇器

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

二、CSS Reset

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

三、盒子佈局

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

四、浮動佈局

設置元素的 float 屬性值爲 left 或
right，就能使該元素脫離普通文檔流，向左或向右浮動。通常在作宮格佈局時會用到，若是子元素所有設置爲浮動，則父元素是塌陷的，這時就須要清除浮動，清除浮動的方法也不少，經常使用的方法是在元素末尾加空元素設置clear:both，

五、定位佈局

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

六、彈性佈局

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

七、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的開始、結束和重複播放時的狀態，分別對應三個事件

八、BFC

BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素。好比：內部滾動就是一個BFC，當一個父容器的overflow-y設置爲auto時，而且子容器的長度大於父容器時，就會出現內部滾動，不管內部的元素怎麼滾動，都不會影響父容器之外的佈局，這個父容器的渲染區域就叫BFC。

九、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部分

一、基礎語法

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內部就會建立一個對應的包裝對象，從而能夠調用一些方法來操做這些數據。

二、函數原型鏈

JS是一種基於對象的語言，但在ES6 以前是不支持繼承的，爲了具有繼承的能力，Javascript 在  函數對象上創建了原型對象prototype，並以函數對象爲主線，從上至下，在JS內部構建了一條  原型鏈 。原型鏈把一個個獨立的對象聯繫在一塊兒，Object則是全部對象的祖宗， 任何對象所創建的原型鏈最終都指向了Object，並以 Object 終結。

三、函數做用域

函數做用域就是變量在聲明它們的函數體以及這個函數體嵌套的任意函數體內都是有定義的。所以，  JS中沒有塊級做用域，只有函數做用域
，這種設計致使JS中出現了  變量提高 的問題。簡單來講就是，將變量聲明提高到它所在做用域的最開始的部分，爲了解決變量提高帶來的反作用，ES6新增了let 命令來聲明變量，let 所聲明的變量只在 let 命令所在的代碼塊內有效，因此不存在變量提高問題。

四、this 指針

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

五、new 操做符

函數的建立有三種方式，即 顯式聲明、匿名定義 和 new Function()
。前面提到，JS中的函數便可以是函數，也能夠是方法，還能夠是構造函數。當使用new來建立對象時，該函數就是構造函數，JS將新對象的原型鏈指向了構造函數的原型對象，因而就在新對象和函數對象之間創建了一條原型鏈，經過新對象能夠訪問到函數對象原型prototype中的方法和屬性。

六、閉包

通俗來說，閉包是一個具備獨立做用域的靜態執行環境。和函數做用域不一樣的是，閉包的做用域是靜態的，能夠永久保存局部資源，而函數做用域只存在於運行時，函數執行結束後當即銷燬。所以，閉包能夠造成一個獨立的執行過程，關於閉包更

七、單線程和異步隊列

JS中的 setTimeout 和 setInterval 就是典型的異步操做，它們會被放入異步隊列中等待，即便 setTimeout(0)
也不會被當即執行，須要等到當前同步任務結束後纔會被執行。

八、異步通訊 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 思想設計的，更符合關注點分離原則。

九、模塊化

歷史上，Javascript 規範一直沒有模塊(module)體系，即沒法將一個大程序拆分紅互相依賴的小文件，再用簡單的方法拼裝起來。在 ES6
以前，爲了實現JS模塊化編程，社區制定了一些模塊加載方案，最主要有 CMD 和 AMD 兩種，分別以commonjs 和 requirejs爲表明。ES6
在語言標準的層面上，實現了模塊化編程，其設計思想是，儘可能靜態化，使得編譯時就能肯定模塊的依賴關係，即編譯時加載，而CMD和AMD是在運行時肯定依賴關係，即運行時加載。

十、Node.js

Node.js 是一個基於 Chrome V8 引擎的 JavaScript
運行環境，它的運行不依賴於瀏覽器做爲宿主環境，而是和服務端程序同樣能夠獨立的運行，這使得JS編程第一次從客戶端被帶到了服務端，Node.js在服務端的優點是，它採用單線程和異步I/O模型，實現了一個高併發、高性能的運行時環境。相比傳統的多線程模型，Node.js實現簡單，而且能夠減小資源開銷。

十、ES6

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

新增 let、const 命令 來聲明變量，和var 相比，let
聲明的變量不存在變量提高問題，但沒有改變JS弱類型的特色，依然能夠接受任意類型變量的聲明；const
聲明的變量不容許在後續邏輯中改變，提升了JS語法的嚴謹性。

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

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

新增類和繼承的概念，配合模塊化，JS也能夠實現高複用、高擴展的系統架構。

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

新增Promise對象，解決異步回調多層嵌套的問題。