首先明確萧豆，document是DOM樹的根節(jié)點(diǎn)奸披，代表的是整個html文檔，因此document可以訪問整個文檔的各個元素
1涮雷、頁面解析過程
文檔解析從上至下阵面，從左至右
（1）首先瀏覽器創(chuàng)建一塊棧內(nèi)存用于執(zhí)行html代碼，創(chuàng)建document對象洪鸭，開始解析样刷，創(chuàng)建HtmlElement對象，此時览爵，document的readyState=“l(fā)oading”
（2）從上至下解析html->head等元素
（3）解析head時會遇到link置鼻，script等外部標(biāo)簽
遇到link：創(chuàng)建線程加載css文件
遇到script（無async（異步加載）、defer（延遲加載））：創(chuàng)建線程加載js文件蜓竹，阻塞解析進(jìn)程箕母，資源加載完后储藐，執(zhí)行腳本，繼續(xù)解析文檔
遇到script（async（異步加載））：創(chuàng)建線程加載js文件嘶是，解析文檔钙勃，資源加載完后，執(zhí)行腳本（同時解析文檔）
遇到script（defer（延遲加載））：創(chuàng)建線程加載js文件聂喇，資源加載完后辖源，解析文檔完成，執(zhí)行腳本
（4）繼續(xù)解析文檔：遇到img創(chuàng)建線程加載資源希太，文檔繼續(xù)解析
（5）文檔解析完畢克饶，Dom樹生成，readyState=“interactive”誊辉，進(jìn)入事件驅(qū)動階段矾湃，此時開始執(zhí)行DOMContentLoaded事件（$(document).ready(function(){})）
（6）等待CSS解析完生成CSSOM，結(jié)合DOM樹生成render-tree
（7）回流（Layout）：瀏覽器根據(jù)render-tree計算節(jié)點(diǎn)幾何信息（位置芥映、大兄拮稹）（可能是百分比）虛擬布局
（8）重繪：瀏覽器根據(jù)計算出的幾何信息，將節(jié)點(diǎn)幾何信息轉(zhuǎn)換為相對于屏幕的絕對像素（將百分比轉(zhuǎn)換為相對于屏幕的絕對像素奈偏，如屏幕1080px坞嘀，元素width：50%，則元素在屏幕上大小為540px）真是布局
（9）放入GPU顯示出來
（10）async資源加載執(zhí)行完惊来，img加載完丽涩，readyStae=“complete”，執(zhí)行l(wèi)oad事件
回流：根據(jù)render-tree計算節(jié)點(diǎn)的位置裁蚁、大小矢渊，因此當(dāng)位置大小發(fā)生變化后，一定會觸發(fā)回流枉证，進(jìn)而重繪
如：
盒子模型相關(guān)屬性
width
height
padding
margin
display
border-width
border
min-height
定位屬性以及浮動
top
bottom
left
right
position
float
clear
改變節(jié)點(diǎn)內(nèi)部文字結(jié)構(gòu)
text-align
overflow-y
overflow
font-weight
font-family
font-size
line-height
vertical-align
white-space
重繪：主布局不變矮男，屬性值發(fā)生變化，如：
color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline
outline-color
outline-style
outline-width
box-shadow
參考自：https://www.cnblogs.com/qqinhappyhappy/p/11872670.html
https://segmentfault.com/a/1190000017329980
