前端魔法堂：解秘FOUC

MRZYD 發布于2019-08-20 15:56 / 1433人閱讀

摘要：前言對于問題多多的，瀏覽器樣式閃爍是一個不可忽視的話題，但對于的瀏覽器就不用理會了嗎下面嘗試較全面地解密。示例說明，不管在哪里引入，在頁面的所有下載完成前，整個頁面將不會被渲染。

前言

?對于問題多多的IE678，FOUC(flash of unstyled content)——瀏覽器樣式閃爍是一個不可忽視的話題，但對于ever green的瀏覽器就不用理會了嗎？下面嘗試較全面地解密FOUC。

到底什么是FOUC？

?頁面加載解析時，頁面以樣式A渲染；當頁面加載解析完成后，頁面突然以樣式B渲染，導致出現頁面樣式閃爍。
?樣式A，瀏覽器默認樣式或瀏覽器默認樣式層疊部分已加載的頁面樣式；
?樣式B，瀏覽器默認樣式疊加全部頁面樣式。

為什么會出現FOUC

?我們了解當輸入網址按回車后瀏覽器會向服務器發送請求，然后服務器返回頁面給瀏覽器，瀏覽器邊下載頁面邊解析邊渲染。
下面我們解剖一下邊下載頁面邊解析邊渲染的過程:

邊下載邊解析就是邊下載html邊構建DOM Tree;

瀏覽器以user agent stylesheet(瀏覽器內置樣式)為原料構建CSSOM Tree;

DOM Tree+CSSOM Tree構建出Render Tree，然后頁面內容渲染出來;

當解析到inline stylesheet 或 internal stylesheet時，馬上刷新CSSOM Tree，CSSOM Tree或DOM Tree發生變化時會引起Render Tree變化;

當解析到external stylesheet時就先加載，然后如internal stylesheet那樣解析和刷新CSSOM Tree和Render Tree了。
?上述步驟5中由于樣式文件存在下載這個延時不確定的階段，因此網絡環境不好或樣式資源體積大的情況下我們可以看到樣式閃爍明顯。

?這就是為什么我們將external stylesheet的引入放在head標簽中的原因，在body渲染前先把相對完整的CSSOM Tree構建好。但大家都聽說過script會阻塞html頁面解析(block parsing)，而link不會，那假如網絡環境不好或樣式資源體積大時，body已經解析并加入到DOM Tree后，external stylesheet才加載完成，不是也會造成FOUC嗎？

?style,link等樣式資源的下載、解析確實不會阻塞頁面的解析，但它們會阻塞頁面的渲染(block rendering)。

Block Parsing 和 Block Rendering的區別

Block Parsing: 阻塞HTML頁面解析，HTML頁面會被繼續下載，但阻塞點后面的標簽不會被解析，img,link等不會發請求獲取外部資源。
Block Rendering:阻塞HTML頁面渲染，HTML頁面會被繼續下載，阻塞點后面的標簽會繼續被解析，img,link等會繼續發送請求獲取外部資源，但不會合成Rendering Tree或不會觸發頁面渲染，也不會執行JavaScript代碼。
?各瀏覽器這方面還有一點差異：

對于Chrome

, and @import url("")會阻塞渲染。
示例1：阻塞解析

Hi

示例2：阻塞渲染

Hi

示例3：阻塞渲染

Hi

示例4：阻塞渲染

Hi

示例2說明，如果阻塞渲染發生在body標簽內，那么body及其子元素會繼續解析并追加到DOM Tree中;
示例3說明，如果阻塞渲染發生在head標簽內，那么body及其子元素不會被追加到DOM Tree中。
示例4說明，不管external stylesheet在哪里引入，在頁面的所有external stylesheets下載完成前，整個頁面將不會被渲染。(估計Chrome會預先統計external stylesheet的數量)

對于FireFox

示例1：阻塞渲染

Hi

示例2：阻塞渲染

Hi

對于IE9

示例1：

Hi

示例2：

Hi

上面的示例表明，IE下block rendering等價于block parsing，因為連img,script,link,@import url()資源請求都會被阻塞。

解決方法

?現在我們知道FOUC時由于頁面采用臨時樣式來渲染頁面而導致的，其中僅有chrome能好的屏蔽了這一點，而其他瀏覽器就呵呵了。那有什么方案可以解決呢？其實我們的目的就是不要讓用戶看到臨時樣式，那么我們可以隱藏body，當樣式資源加載完成后再顯示body。

(編譯modernizr時記得勾setClasses哦，否則不會替換no-js的！)

總結

?上述方案雖然解決了FOUC的問題，但很明顯地延長了首屏白屏時間，當前較流行的App Shell(可以理解為先顯示頁面布局的骨架或一幅圖片)也會失效，所以對于2C的應用僅僅采用上述的方案效果并不理想。后續待我研究好后再追加一篇吧^_^
?尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohn... ^_^肥仔John

感謝

Flash of unstyled content
The FOUC Problem
Critical rendering path

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82594.html

前端魔法堂：解秘FOUC

摘要：前言對于問題多多的，瀏覽器樣式閃爍是一個不可忽視的話題，但對于的瀏覽器就不用理會了嗎下面嘗試較全面地解密。示例說明，不管在哪里引入，在頁面的所有下載完成前，整個頁面將不會被渲染。前言 ?對于問題多多的IE678，FOUC(flash of unstyled content)——瀏覽器樣式閃爍是一個不可忽視的話題，但對于ever green的瀏覽器就不用理會了嗎？下面嘗試較全面地解密F...

Dean 2019-08-29 12:25 評論0 收藏0
前端魔法堂：解秘FOUC

摘要：前言對于問題多多的，瀏覽器樣式閃爍是一個不可忽視的話題，但對于的瀏覽器就不用理會了嗎下面嘗試較全面地解密。示例說明，不管在哪里引入，在頁面的所有下載完成前，整個頁面將不會被渲染。前言 ?對于問題多多的IE678，FOUC(flash of unstyled content)——瀏覽器樣式閃爍是一個不可忽視的話題，但對于ever green的瀏覽器就不用理會了嗎？下面嘗試較全面地解密F...

VEIGHTZ 2019-08-01 16:42 評論0 收藏0
前端魔法堂——調用棧，異常實例中的寶藏

摘要：前言在上一篇前端魔法堂異常不僅僅是中我們描述出一副異常及如何捕獲異常的畫像，但僅僅如此而已。調用方從右到左的順序將參數壓入棧中，在被調用方執行完成后，由被調用方負責清理棧中的參數也稱為棧平衡。前言 ?在上一篇《前端魔法堂——異常不僅僅是try/catch》中我們描述出一副異常及如何捕獲異常的畫像，但僅僅如此而已。試想一下，我們窮盡一切捕獲異常實例，然后僅僅為告訴用戶,運維和開發人員頁...

wangjuntytl 2019-08-21 17:15 評論0 收藏0
CSS魔法堂：更豐富的前端動效by CSS Animation

摘要：無效生效重復怎么辦與規則一樣，標準規定相同的關鍵幀不產生層疊，僅最后出現的認定為有效。但實際上和均將關鍵幀設計為可層疊的。為默認值，表示動畫一結束，動畫效果就結束表示動畫一開始就馬上執行完第一個關鍵幀的效果。前言 ?在《CSS魔法堂：Transition就這么好玩》中我們了解到對于簡單的補間動畫，我們可以通過transition實現。那到底多簡單的動畫適合用transtion來實現呢...

MrZONT 2019-08-30 15:54 評論0 收藏0
前端魔法堂——異常不僅僅是try/catch

摘要：我打算分成前端魔法堂異常不僅僅是和前端魔法堂調用棧，異常實例中的寶藏兩篇分別敘述內置自定義異常類，捕獲運行時異常語法異常網絡請求異常事件，什么是調用棧和如何獲取調用棧的相關信息。前言 ?編程時我們往往拿到的是業務流程正確的業務說明文檔或規范，但實際開發中卻布滿荊棘和例外情況，而這些例外中包含業務用例的例外，也包含技術上的例外。對于業務用例的例外我們別無它法，必須要求實施人員與用戶共同...

bladefury 2019-08-21 17:06 評論0 收藏0