- 解析
html文件構(gòu)建dom樹 - 處理
css構(gòu)建CSSOM樹 - 將
DOM和CSSOM合并為渲染樹 - 根據(jù)渲染樹布局，然后進(jìn)行繪制
script
在解析html時如果遇到了script標(biāo)簽麸折，將會阻塞html的解析粘昨。如果是外部腳本，那么就需要等待獲取张肾，以及js代碼執(zhí)行的完成，才會繼續(xù)dom樹的構(gòu)建吞瞪。
由于
script標(biāo)簽的阻塞，通常采用以下方式來進(jìn)行優(yōu)化
- 放在網(wǎng)頁
body標(biāo)簽?zāi)┪?/li> - 添加
defer惯疙、async屬性使得不阻塞html的解析。雖然都會異步加載腳本螟碎，不過defer和async是有不同的：-
defer會在文檔渲染完畢后，DOMContentLoaded事件調(diào)用前執(zhí)行俭缓。按順序執(zhí)行所有的script -
async會在瀏覽器空閑允許的情況下執(zhí)行酥郭，并且是無序的华坦，先加載完就先執(zhí)行
-
link
在解析html時如果遇到了樣式表不从，將會阻塞瀏覽器的渲染。直至CSSOM構(gòu)建完成歹袁。
- css加載不會阻塞DOM樹的解析
- css加載會阻塞DOM樹的渲染
- css加載會阻塞后邊js的執(zhí)行
回流和重繪
在頁面的渲染過程中寝优，由于樣式和js可能會導(dǎo)致多次的渲染。也就涉及到了回流和重繪乏矾。
- 回流：當(dāng)render tree 的一部分或全部的元素因改變了自身的寬高，布局凄硼，顯示或隱藏，或者元素內(nèi)部的文字結(jié)構(gòu)發(fā)生變化 導(dǎo)致需要重新構(gòu)建頁面的時候摊沉，就造成了回流
- 重繪：當(dāng)一個元素自身的寬高痒给，布局，及顯示或隱藏沒有改變侈玄，而只是改變了元素的外觀風(fēng)格的時候吟温，就造成了重繪
回流必定觸發(fā)重繪，重繪不一定觸發(fā)回流
觸發(fā)回流的屬性：
- 盒模型相關(guān)屬性：
width height padding margin display border-width border min-height - 定位屬性及浮動：
top left bottom right position float clear - 內(nèi)部文件結(jié)構(gòu)的改變等：
text-align overflow-y font-weight overflow font-family line-height vertival-align white-space font-size
觸發(fā)重繪的屬性: -
color border-style border-radius visibility text-decoration background outline box-shadow等
優(yōu)化：
-
transform代替top left margin-top margin-left等屬性 - 使用className 代替js操作多條樣式
- 盡量不使用table布局
