成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端魔法堂：解秘FOUC

VEIGHTZ / 3288人閱讀

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

前言

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

到底什么是FOUC？

?頁面加載解析時(shí)，頁面以樣式A渲染；當(dāng)頁面加載解析完成后，頁面突然以樣式B渲染，導(dǎo)致出現(xiàn)頁面樣式閃爍。
?樣式A，瀏覽器默認(rèn)樣式 或 瀏覽器默認(rèn)樣式 層疊 部分已加載的頁面樣式；
?樣式B，瀏覽器默認(rèn)樣式 疊加 全部頁面樣式。

為什么會(huì)出現(xiàn)FOUC

?我們了解當(dāng)輸入網(wǎng)址按回車后瀏覽器會(huì)向服務(wù)器發(fā)送請(qǐng)求，然后服務(wù)器返回頁面給瀏覽器，瀏覽器邊下載頁面邊解析邊渲染。
下面我們解剖一下邊下載頁面邊解析邊渲染的過程:

邊下載邊解析就是邊下載html邊構(gòu)建DOM Tree;

瀏覽器以u(píng)ser agent stylesheet(瀏覽器內(nèi)置樣式)為原料構(gòu)建CSSOM Tree;

DOM Tree+CSSOM Tree構(gòu)建出Render Tree，然后頁面內(nèi)容渲染出來;

當(dāng)解析到inline stylesheet 或 internal stylesheet時(shí)，馬上刷新CSSOM Tree，CSSOM Tree或DOM Tree發(fā)生變化時(shí)會(huì)引起Render Tree變化;

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

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

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

Block Parsing 和 Block Rendering的區(qū)別

Block Parsing: 阻塞HTML頁面解析，HTML頁面會(huì)被繼續(xù)下載，但阻塞點(diǎn)后面的標(biāo)簽不會(huì)被解析，img,link等不會(huì)發(fā)請(qǐng)求獲取外部資源。
Block Rendering:阻塞HTML頁面渲染，HTML頁面會(huì)被繼續(xù)下載，阻塞點(diǎn)后面的標(biāo)簽會(huì)繼續(xù)被解析，img,link等會(huì)繼續(xù)發(fā)送請(qǐng)求獲取外部資源，但不會(huì)合成Rendering Tree或不會(huì)觸發(fā)頁面渲染，也不會(huì)執(zhí)行JavaScript代碼。
?各瀏覽器這方面還有一點(diǎn)差異：

對(duì)于Chrome

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


  
    
    
    
Hi

示例2：阻塞渲染


  
    
    
    
Hi

示例3：阻塞渲染


  
    
    
    
  
  
    
Hi

示例4：阻塞渲染


  
        
    
    
    
Hi

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

對(duì)于FireFox

示例1：阻塞渲染


  
        
    
    
    
Hi

示例2：阻塞渲染


  
        
    
    
  
  
    
Hi
對(duì)于IE9

示例1：


  
        
    
    
    
Hi

示例2：


  
        
    
    
Hi

上面的示例表明，IE下block rendering等價(jià)于block parsing，因?yàn)檫Bimg,script,link,@import url()資源請(qǐng)求都會(huì)被阻塞。

解決方法

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

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

總結(jié)

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

感謝

Flash of unstyled content
The FOUC Problem
Critical rendering path

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50695.html

相關(guān)文章

  • 前端魔法堂：解秘FOUC

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

    Dean 評(píng)論0 收藏0

  • 前端魔法堂：解秘FOUC

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

    MRZYD 評(píng)論0 收藏0

  • 前端魔法堂——調(diào)用棧，異常實(shí)例中的寶藏

    摘要：前言在上一篇前端魔法堂異常不僅僅是中我們描述出一副異常及如何捕獲異常的畫像，但僅僅如此而已。調(diào)用方從右到左的順序?qū)?shù)壓入棧中，在被調(diào)用方執(zhí)行完成后，由被調(diào)用方負(fù)責(zé)清理?xiàng)Ｖ械膮?shù)也稱為棧平衡。 前言 ?在上一篇《前端魔法堂——異常不僅僅是try/catch》中我們描述出一副異常及如何捕獲異常的畫像，但僅僅如此而已。試想一下，我們窮盡一切捕獲異常實(shí)例，然后僅僅為告訴用戶,運(yùn)維和開發(fā)人員頁...

    wangjuntytl 評(píng)論0 收藏0

  • CSS魔法堂：更豐富的前端動(dòng)效by CSS Animation

    摘要：無效生效重復(fù)怎么辦與規(guī)則一樣，標(biāo)準(zhǔn)規(guī)定相同的關(guān)鍵幀不產(chǎn)生層疊，僅最后出現(xiàn)的認(rèn)定為有效。但實(shí)際上和均將關(guān)鍵幀設(shè)計(jì)為可層疊的。為默認(rèn)值，表示動(dòng)畫一結(jié)束，動(dòng)畫效果就結(jié)束表示動(dòng)畫一開始就馬上執(zhí)行完第一個(gè)關(guān)鍵幀的效果。 前言 ?在《CSS魔法堂：Transition就這么好玩》中我們了解到對(duì)于簡單的補(bǔ)間動(dòng)畫，我們可以通過transition實(shí)現(xiàn)。那到底多簡單的動(dòng)畫適合用transtion來實(shí)現(xiàn)呢...

    MrZONT 評(píng)論0 收藏0

  • 前端魔法堂——異常不僅僅是try/catch

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

    bladefury 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<