8、讀取頁(yè)面內(nèi)容打開(kāi)瀏覽器沒(méi)有任務(wù)欄，瀏覽器渲染，解析html源碼
9、生成Dom樹(shù)、解析css樣式、js交互,渲染顯示頁(yè)面
瀏覽器下載HTML后，首先解析頭部代碼，進(jìn)行樣式表下載，然后繼續(xù)向下解析HTML代碼，構(gòu)建DOM樹(shù)，同時(shí)進(jìn)行樣式下載。當(dāng)DOM樹(shù)構(gòu)建完成后，立即開(kāi)始構(gòu)造CSSOM樹(shù)。理想情況下，樣式表下載速度夠快，DOM樹(shù)和CSSOM樹(shù)進(jìn)入一個(gè)并行的過(guò)程，當(dāng)兩棵樹(shù)構(gòu)建完畢，構(gòu)建渲染樹(shù)，然后進(jìn)行繪制。
Tips:瀏覽器安全解析策略對(duì)解析HTML造成的影響：
當(dāng)解析HTML時(shí)遇到內(nèi)聯(lián)JS代碼，會(huì)阻塞DOM樹(shù)的構(gòu)建，會(huì)先執(zhí)行完JS代碼;當(dāng)CSS樣式文件沒(méi)有下載完成時(shí)，瀏覽器解析HTML遇到了內(nèi)聯(lián)JS代碼，此時(shí)，瀏覽器暫停JS腳本執(zhí)行，暫停HTML解析。直到CSS文件下載完成，完成CSSOM樹(shù)構(gòu)建，重新恢復(fù)原來(lái)的解析。
會(huì)阻塞 DOM 生成打開(kāi)瀏覽器沒(méi)有任務(wù)欄，而樣式文件又會(huì)阻塞 的執(zhí)行，所以在實(shí)際的工程中需要重點(diǎn)關(guān)注 文件和樣式表文件，使用不當(dāng)會(huì)影響到頁(yè)面性能的。
四、白屏-性能優(yōu)化 1. DNS解析優(yōu)化
針對(duì)DNS 環(huán)節(jié)，可以針對(duì)性的進(jìn)行DNS解析優(yōu)化。
2. TCP網(wǎng)絡(luò)鏈路優(yōu)化 3. 服務(wù)端處理優(yōu)化
服務(wù)端的處理優(yōu)化，是一個(gè)非常龐大的話題，會(huì)涉及到如Redis緩存、數(shù)據(jù)庫(kù)存儲(chǔ)優(yōu)化或是系統(tǒng)內(nèi)的各種中間件以及Gzip壓縮等
4. 瀏覽器下載、解析、渲染頁(yè)面優(yōu)化
根據(jù)瀏覽器對(duì)頁(yè)面的下載、解析、渲染過(guò)程，可以考慮一下的優(yōu)化處理：
document.documentElement.clientHeight//獲取屏幕可視區(qū)域的高度
element.offsetTop//獲取元素相對(duì)于文檔頂部的高度因?yàn)?會(huì)阻塞 DOM 生成，而樣式文件又會(huì)阻塞 的執(zhí)行，所以在實(shí)際的工程中需要重點(diǎn)關(guān)注 文件和樣式表文件，使用不當(dāng)會(huì)影響到頁(yè)面性能的