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
