瀏覽器渲染機(jī)制和性能優(yōu)化點(diǎn)

客戶端從服務(wù)器獲取到需要渲染頁(yè)面的源代碼后

1. 開(kāi)辟一個(gè)GUI渲染線程，自上而下執(zhí)行解析代碼，最后繪制出對(duì)應(yīng)的頁(yè)面
2. 自上而下渲染解析代碼的過(guò)程是 同步 的，但也有一些操作是異步的。

關(guān)于各種資源的加載

1. 關(guān)于CSS資源的加載
   • 遇到的是<style>內(nèi)嵌樣式， 同步渲染， 交給GUI渲染線程解析
   • 遇到<link>外鏈樣式
     1.1 異步 開(kāi)辟一個(gè)新的 http網(wǎng)絡(luò)請(qǐng)求線程
     注意：同一個(gè)源下，瀏覽器最多只允許同事開(kāi)啟4-7個(gè)http線程
     1.2 不等資源請(qǐng)求回來(lái)，GUI 渲染線程繼續(xù)向下渲染解析
     1.3 GUI渲染線程同步操作都處理完成后，再把HTTP網(wǎng)絡(luò)線程請(qǐng)求回來(lái)的資源文件進(jìn)行解析渲染
     1.4 css文件內(nèi)遇到@import , 這個(gè)操作是同步,開(kāi)辟一個(gè)新的http網(wǎng)絡(luò)線程去請(qǐng)求資源文件，但是在資源文件沒(méi)有請(qǐng)求回來(lái)之前，GUI渲染線程繼續(xù)向下渲染

2. 遇到script把資源的請(qǐng)求
   • 默認(rèn)都是 同步
   • 必須記憶和Http網(wǎng)絡(luò)線程，把資源請(qǐng)求回來(lái)之后，并且交給 js渲染線程 渲染解析完成后，GUI渲染線程才能繼續(xù)向下渲染，所以script默認(rèn)也是阻止GUI渲染
   • async屬性 首先也是開(kāi)辟一個(gè)http網(wǎng)絡(luò)線程去加載資源文件，于此同時(shí)GUI渲染線程向下渲染 把默認(rèn)的同步改為異步，但是一旦資源請(qǐng)求后，會(huì)中斷GUI的信號(hào)渲染，把先請(qǐng)求回來(lái)的js進(jìn)行渲染解析
   • defer屬性 也是開(kāi)辟一個(gè)網(wǎng)絡(luò)線程去加載資源文件，同時(shí)GUI渲染線程向下渲染，等GUI渲染完成，在檢查script依賴的文件，根據(jù)順序進(jìn)行渲染執(zhí)行。對(duì)比async defer 都是異步，但是defer會(huì)保證隊(duì)列任務(wù)的正常。
3. img標(biāo)簽請(qǐng)求
   • src里面檢測(cè)到是外鏈的情況下，也是開(kāi)辟一個(gè)網(wǎng)絡(luò)線程去加載圖片，等GUI線程處理完畢后，再檢查圖片文件是否請(qǐng)求完成。如果完成，就渲染圖片。

加載過(guò)程

1. dom tree
2. cssdom tree
3. render tree
4. layout
5. painting

未完。。。