數據URI的減速頁面

我構建了一個腳本，它將所有內嵌圖像替換爲數據URI，以減少http請求並增加移動設備上的加載時間。數據URI的減速頁面

不幸的是我經歷了更慢的加載速度。我認爲這取決於HTML文件更大（大約100kb而不是5 kb左右）:)？還是有其他的數據URI可以減緩頁面加載速度？

必須瀏覽器完整下載完整的文檔，然後才能加載它的喜歡的來源？或者，在瀏覽器完成整個文檔之前，將加載鏈接的源文件，例如文檔頂部的css和javascript？

它如何處理CSS？閱讀所有CSS設置之前，瀏覽器是否必須加載完整的CSS文件？

如果是的話，是能夠更好地對數據的URI這樣的sepearate CSS文件：用於結構

加載CSS（無數據的URI）
背景圖像加載CSS（所有背景圖像URI格式）

將一個「單獨的chapgjpg文件」加載速度比「包含在緩存的css文件中的基於URI的圖像」更快嗎？

有關如何使用數據URI的其他建議？

來源

2013-12-12 user1087110

mobify.com發表了博客文章：On Mobile, Data URIs are 6x Slower than Source Linking (New Research)

[...]
所以你可以想象我吃驚地發現，測量成千上萬的手機網頁瀏覽的性能時，那個負荷使用數據URI的圖像平均比使用二進制源鏈接（例如具有src屬性的img標籤）的平均速度要慢！

我沒有深入這篇文章，但我想這個問題的一部分可能是解碼base64編碼數據URI所需的CPU功能。

作者建議只使用數據URI「很少用於小圖像」。

來源

2013-12-12 14:54:29 unor

謝謝。我也發現這個：http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice。我不會去URI，即使在一個單獨的CSS文件，因爲它花費CPU ...謝謝 – user1087110

將HTML內容加載以便它們出現在HTML文件中。大尺寸的數據URI會降低頁面的速度。大型數據URI在IE瀏覽器（IE6）中不受支持。

推薦使用通常用於圖像尺寸小於20KB的數據URI &。

您可以選擇圖像壓縮，js，css壓縮來增加pagespeed。

來源

2013-12-12 14:14:56 user2227606

感謝您的回答！你知道爲什麼大尺寸的URI會減慢頁面的速度嗎？我不在乎低於EI9的版本:)爲什麼200 kb的數據URI會比分離的200kb的jpg文件差？你知道瀏覽器是否必須先完成html文件的加載才能開始加載鏈接的源代碼？你知道CSS文件是否必須在所有的CSS設置被設置之前完成加載？ – user1087110

數據URI的減速頁面

回答

相關問題