HTML 的解析過程
js 的下載和執(zhí)行會(huì)阻塞 HTML 的解析姿骏,等 js 執(zhí)行完繼續(xù)去解析 HTML
問題1:為什么執(zhí)行 js 會(huì)阻塞 HTML 的解析(HTML 的解析為什么要等到 js 執(zhí)行完才能繼續(xù)解析)左冬?
答:因?yàn)閳?zhí)行 js 的過程可能會(huì)修改到 dom 樹抽莱,比如 document.write('<div>aaa</div>
)`
問題2:js 的下載為什么會(huì)阻塞 HTML 的解析范抓?
答:因?yàn)闉g覽器解析是一行一行的只有解析到對應(yīng)的script標(biāo)簽才會(huì)去下載,所以一旦下載就必須等它執(zhí)行完畢食铐,由于瀏覽器沒有做特殊的優(yōu)化所以會(huì)阻塞 HTML 的解析
在 script 標(biāo)簽上加 async 和 defer 的區(qū)別
defer
1). 讓 js 的下載 和 HTML 的解析可以同時(shí)進(jìn)行
2). 保證 js 的執(zhí)行是在 HTML 的解析之后匕垫,DOM ready 之前
3). 頁面中有多個(gè) defer 它們執(zhí)行的順序是按照你寫的順序,只有它們都執(zhí)行完了才會(huì)觸發(fā) dom ready
async
讓 js 的下載和 HTML 的渲染完全沒有關(guān)系
使用場景用到的 js 與頁面完全沒有關(guān)系虐呻,只是單純的計(jì)算的時(shí)候
css 的下載和解析也會(huì)阻塞 js 的執(zhí)行
答:js 需要讀取 css 的結(jié)果
比如:我們在js里獲取一個(gè)元素css樣式里的高度象泵,那么這時(shí)候只有等到 css解析完成才能獲取到,所以 js的執(zhí)行需要等 css下載解析完成斟叼;
頁面渲染
頁面渲染過程拿到DOM樹和 CSS樹后合成一個(gè)渲染樹(原因?yàn)g覽器拿到DOM樹不知道它的樣式偶惠,拿到CSS樹不知道它的HTML結(jié)構(gòu),所以必須合成一個(gè)渲染樹)->布局(獲取到每個(gè)div以及頁面的大小高度和尺寸)-> 繪制(給 div 加樣式)->合成(把處于同一位置的 div 進(jìn)行拍平合并)
重點(diǎn):當(dāng)我們改變了一個(gè)元素的高度的時(shí)候朗涩,因?yàn)樗拇笮〕叽缱兞撕瞿酰跃托枰匦虏季忠簿褪?reflow
,當(dāng)我們改變一個(gè)元素的背景色的時(shí)候它就會(huì)重新繪制 repaint
馋缅,正常情況下只要重新布局了就肯定會(huì)重新繪制扒腕,而不管是重新布局還會(huì)重新繪制大都會(huì)重新合成
reflow 屬性:height, font-style,left,line-height,margin-bottom
repaint:text-decoration, visiblity,background-color