谷歌網頁速度仍然給渲染，即使在裝載資源異步

阻塞問題「嘗試暫緩或異步加載阻止資源，或者直接在HTML內嵌這些資源的關鍵部分。「

上述問題促使我爲我的2個樣式表。因此，我使用下面的代碼加載我的樣式表以推遲樣式表的加載。

window.onload = loadResource; 

function loadResource(){ 
    css_array=[resource1,resource2]; 
    css_init(css_array); 
} 

function css_init(hrefPath){ 
    for(a = 0; a < hrefPath.length; a++){ 
     link=document.createElement('link'); 
     link.href=hrefPath[a]; 
     link.rel='stylesheet'; 
     document.getElementsByTagName('head')[0].appendChild(link); 
    } 
}

與上面的代碼中所有的CSS樣式表的DOMContentLoaded Event和Load Event已被解僱後加載（的Chrome瀏覽器開發工具，網絡選項卡）

不過，即使有渲染阻塞問題上面仍然是不固定的。任何想法爲什麼它不工作，以及如何正確推遲CSS樣式表？謝謝您的幫助！

來源

2014-01-28 Jo E.

你想顯示你的網頁都醜，只有以後加載的CSS？這沒有意義。 – ariel

@ariel這就是爲什麼我問我們如何解決這個問題，因爲谷歌在它「檢測到一個頁面包含渲染阻塞外部樣式表的頁面時會提示」，這會延遲內容到屏幕的繪製。它討論了在這裏https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery內嵌小css文件，但是當我做出更改時它並沒有改變任何內容。 –

@ariel我不認爲你的解釋是正確的。 Deadpool希望將內聯CSS用於對頁面至關重要的內容（可能是最重要的內容），並推遲其餘部分。這給了最好的「玻璃杯時間」，而不會產生無形式的內容。 – Whymarrh

這是一個稍微複雜的問題。看看這些（閱讀註釋，太）：

此外，你可以給head.js一試：http://headjs.com/

你有這樣一個很好的理由加載CSS？

http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/

來源

2014-01-31 04:46:01 matthewpavkov

我想你可能會爲首的方向錯了，裝載你的CSS後的DOM就緒通常不是一個推薦的做法。這裏是HTML規範的鏈接，用於插入CSS http://www.w3.org/TR/html5-author/the-link-element.html#the-link-element，大多數瀏覽器都將針對放置在文檔頭部的CSS進行優化。

如果您試圖優化速度，可以考慮將樣式移動到一個縮小樣式表中，而不是通過JavaScript創建兩個異步請求。如果您需要兩個樣式表保持分隔，並擔心性能影響，則可以考慮將內嵌的某些CSS移動。

這裏是一個鏈接到雅虎的最佳做法加快您的網站http://developer.yahoo.com/performance/rules.html#css_top 於是我在很短的答案猜你的問題（除邊緣情況的一般經驗法則）編寫的一本必讀書文章將優化通過在頁面頂部加載一個CSS頁面。即使你可以設法讓你的CSS使用JavaScript加載下載速度更快。我想你會發現你會花更多的時間在繪畫和風格計算（頁面渲染）。更何況，如果一些人有關閉JavaScript

如果你還在尋找更多的性能，你可以看一下CDN或cookie的子域創建自己的CDN會發生什麼。

來源

2014-02-06 23:55:44 rabrooks

谷歌網頁速度仍然給渲染，即使在裝載資源異步

回答

相關問題