今天是5月20號，別人的520是甜蜜、愛情、表白，而老夫的520就是寫代碼、努力寫代碼、加班寫代碼，一入代碼深似海，從此愛情是路人。言歸正傳，老夫要開始裝逼啦。
溫馨提示：文章結(jié)構(gòu)如下，可能閱讀完需要花費5分鐘
HTML的渲染流程分為3個階段（自己分的）
1、URL訪問請求數(shù)據(jù)階段
2、瀏覽器解析渲染
3、頁面布局繪制階段
最后，總結(jié)一下渲染過程可以做的性能優(yōu)化
一、URL訪問請求數(shù)據(jù)階段
1.用戶輸入域名地址，瀏覽器通過URL域名解析訪問IP地址
2.發(fā)起TCP的3次握手，就是我們熟悉的建立連接，三次握手，報文等等
3.建立TCP連接后，瀏覽器向服務器發(fā)送http請求
這里的http請求有個注意的參數(shù)：
User-Agent：產(chǎn)生請求的瀏覽器類型
Host：請求的主機名，允許多個域名同處一個IP地址，即虛擬主機
keep-alive (保持連接)
Authorization: 客戶端提供給服務器的認證信息
4.服務端接收到請求開始響應HTTP請求
4.1服務器生成html代碼，返回給瀏覽器
注意：html頁面代碼可能是經(jīng)過壓縮的
4.2服務返回狀態(tài)碼
1xx: 信息性狀態(tài)碼
e.g：100, 101, 102
2xx: 成功狀態(tài)碼
e.g：200：OK
3xx: 重定向狀態(tài)碼
e.g
301 永久重定向, Location響應首部的值仍為當前URL，因此為隱藏重定向
302 臨時重定向，顯式重定向, Location響應首部的值為新的URL
304Not Modified 未修改，比如本地緩存的資源文件和服務器上比較時，發(fā)現(xiàn)并沒有修改，服務器返回一個304狀態(tài)碼， 告訴瀏覽器，你不用請求該資源，直接使用本地的資源即可
4xx: 客戶端錯誤狀態(tài)碼
e.g 404: Not Found 請求的URL資源并不存在
5xx: 服務器端錯誤狀態(tài)碼
e.g
500: Internal Server Error 服務器內(nèi)部錯誤
502: Bad Gateway 前面代理服務器聯(lián)系不到后端的服務器時出現(xiàn)
504：Gateway Timeout 這個是代理能聯(lián)系到后端的服務器，但是后端的服務器在規(guī)定的時間內(nèi)沒有給代理服務器響應
5.瀏覽器接收到響應的HTML，開始解析
5.1 如果有壓縮則首先進行解壓處理，緊接著就是頁面解析渲染
5.2 遇到js/css/image等靜態(tài)資源，開始請求html代碼中的資源（如js、css、圖片等)
5.3 使用keep-alive特性了，建立一次HTTP連接，可以請求多個資源
二、瀏覽器解析渲染
1.瀏覽器解析HTML，并構(gòu)建DOM樹
1.1 瀏覽器采用自上而下的方式解析
1.2 HTML瀏覽器有專門的html解析器來解析HTML
1.3 遇到樣式（link、style）與腳本文件（script）會阻塞解析(可以使用async 或者defer,不會阻塞線程)
注意：
display:none 的元素也會在DOM樹中
注釋也會在DOM樹中
script標簽會在DOM樹中
2.解析css去構(gòu)建CSSOM樹
2.1 瀏覽器會解析CSS文件并生成CSS規(guī)則樹
2.2 每個CSS文件都會被分析成StyleSheet對象，每個對象都包括CSS規(guī)則
注意：
CSS解析可以與DOM解析同進行
CSS解析與script的執(zhí)行互斥
在Webkit內(nèi)核中進行了script執(zhí)行優(yōu)化，只有在JS訪問CSS時才會發(fā)生互斥
3、構(gòu)建渲染樹Render Tree
通過DOM樹和CSS規(guī)則樹，瀏覽器就可以通過他們兩個構(gòu)建渲染樹
注意：
Render Tree和DOM Tree不完全對應
display: none的元素不在Render Tree中
visibility: hidden的元素在Render Tree中
JavaScript 應盡量少的去影響 DOM 的構(gòu)建
三、頁面布局繪制階段
3.1.Render Tree 渲染樹布局
布局階段會從渲染樹的根節(jié)點開始遍歷-遞歸遍歷
布局階段的輸出就是我們常說的盒子模型-計算大小和位置
注意
float元素，absoulte元素，fixed元素會發(fā)生位置偏移
脫離文檔流，其實就是脫離Render Tree
3.2.Rendder Tree 渲染樹繪制
瀏覽器會遍歷渲染樹，調(diào)用渲染器的paint()方法在屏幕上顯示其內(nèi)容
渲染樹的繪制工作是由瀏覽器的UI后端組件完成的
3.3.回流（reflow）
不可避免
只要有交互就存在，就會引起部分頁面重新渲染
當render樹繪制完成之后，比如JavaScript改變樣式或Tab,隱藏，這時候render樹就需要重新計算
3.4.重繪（repaint）
當我們改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時，屏幕的一部分要重繪，但是元素的幾何尺寸和位置沒有發(fā)生改變
注意:
display:none 因為改變組件的大小，會觸發(fā)reflow
visibility: hidden 不會改變組件占位大小，只會觸發(fā)repaint
因為reflow不可避免，但是可以減少比如：用transform做形變和位移
四、總結(jié)渲染過程可以做的性能優(yōu)化
1.樣式文件應當在 head 標簽中，而腳本文件在 body 結(jié)束前，這樣可以防止阻塞的方式
2.簡化并優(yōu)化CSS選擇器，盡量將嵌套層減少到最小
3.盡量減少在 JavaScript 中進行DOM操作
4.修改元素樣式時，更改其class屬性是性能最高的方法
5.不要使用document.write()這種輸出內(nèi)容的方法，使用現(xiàn)代W3C DOM方法來為現(xiàn)代瀏覽器處理頁面內(nèi)容
6.DNS查詢和解析域名也是消耗時間的，所以要減少對外部JavaScript、CSS、圖片等資源的引用，不同域名的使用越少越好
最后，以上總結(jié)都是老夫為了方便理解自己總結(jié)的內(nèi)容，其中參考以下資料，創(chuàng)作不易，尊重原著
參考文獻鏈接
https://blog.csdn.net/WuLex/article/details/77850206
https://www.imooc.com/article/40004
http://m.itdecent.cn/p/fbe0e9fa45a6/
H5系列
Web前端基礎(chǔ)篇-HTML-01-BOM瀏覽器對象模型
Web前端基礎(chǔ)篇-HTML-02-HTML的生命周期
Web前端基礎(chǔ)篇-HTML-03-事件處理系統(tǒng)
Web前端基礎(chǔ)篇-HTML-04-HTML 渲染流程
Web前端基礎(chǔ)篇-HTML5-05-最全本地存儲總結(jié)
Web前端基礎(chǔ)篇-HTML5-06-離線緩存AppCache
Web前端基礎(chǔ)篇-HTML5-07-瀏覽器緩存機制
