1.到底什么是白屏什么是FOUC
白屏與無樣式內(nèi)容閃爍(FOUC)是因為不同瀏覽器加載與顯示頁面的機制不同而造成的。
- FOUC：一些瀏覽器例如firefox,頁面加載時，頁面以樣式A進行渲染，頁面加載完成時，頁面突然以樣式B進行渲染，所以導(dǎo)致頁面出現(xiàn)頁面內(nèi)容閃爍。
- 白屏：一些瀏覽器例如chrome,他的加載和渲染機制是等css全部加載解析完后再渲染展示頁面,而這個等待的時間就為白屏。
2.為什么會出現(xiàn)白屏和FOUC
- FOUC
firefox瀏覽器：當(dāng)我們輸入網(wǎng)址按回車后瀏覽器會向服務(wù)端發(fā)送請求，然后服務(wù)端發(fā)送頁面給瀏覽器，瀏覽器邊下載頁面邊解析邊渲染。下面我們解剖一下邊下載頁面邊解析邊渲染的過程:
- 邊下載邊解析就是邊下載html邊構(gòu)建DOM Tree;
- 瀏覽器會以瀏覽器內(nèi)置樣式(user agent stylesheet)來解析CSSOM Tree；
- DOM Tree + CSSOM Tree 構(gòu)建出 渲染樹(Render Tree)，然后頁面內(nèi)容渲染出來;
- 當(dāng)解析到內(nèi)聯(lián)樣式(inline-stylesheet)和內(nèi)部樣式(internal stylesheet)時，馬上刷新DOM Tree + CSSOM Tree + 新的CSSOM 會發(fā)生變化引起 Render Tree變化。
- 當(dāng)解析到外部鏈接樣式(external stylesheet)是會就先加載，然后如同inline-stylesheet和internal stylesheet那樣解析和刷新CSSOM Tree和Render Tree了。
上述步驟5中由于樣式文件存在下載這個延時不確定的階段，因此網(wǎng)絡(luò)環(huán)境不好或樣式資源體積大的情況下我們可以看到樣式閃爍明顯。
- 白屏
chorme瀏覽器：當(dāng)我們輸入網(wǎng)址按回車后瀏覽器會向服務(wù)端發(fā)送請求，然后服務(wù)端發(fā)送頁面給瀏覽器，瀏覽器下載完成后頁面解析渲染。下面我們解剖一下邊下載頁面邊解析邊渲染的過程:
- 根據(jù)來自服務(wù)器端的 HTML 代碼形成DOM Tree;
- 加載并解析全部樣式，形成 CSSOM Tree;
- 在DOM Tree + CSSOM Tree構(gòu)建一棵由一組待生成渲染的渲染樹（在 Webkit 中這些對象被稱為渲染器或渲染對象，而在 Gecko 中稱之為“frame”。）渲染樹反映了文檔對象模型的結(jié)構(gòu)，但是不包含諸如 <head> 標(biāo)簽或含有display:none屬性的不可見元素。在渲染樹中，每一段文本字符串都表現(xiàn)為獨立的渲染器。每一個渲染對象都包含與之對應(yīng)的 DOM 對象，或者文本塊，還加上計算過的樣式。換言之，渲染樹是一個文檔對象模型的直觀展示。
- 對渲染樹上的每個元素，計算它的坐標(biāo)，稱之為布局。瀏覽器采用一種流方法，布局一個元素只需通過一次，但是表格元素需要通過多次。
- 最后，渲染樹上的元素最終展示在瀏覽器里，這一過程稱為“painting”。
上述步驟5中由于樣式文件存在下載這個延時不確定的階段，因此網(wǎng)絡(luò)環(huán)境不好或樣式資源體積大的情況下我們等待的時間就為白屏。
