Base64 編碼和效能，第 2 部分

這是這篇文章的第 2 部分。閱讀第 1 部分。

在樣式表中插入 base64 編碼的內容資源（主要是）引起爭議之後，我決定收集一些資料。

我做了乙個簡單的測試，針對「傳統」方式和 base64 方式，資源載入的時間進行對比。

建立兩個簡單的 html 檔案，用一張背景影象鋪滿整個頁面。第乙個使用常規編寫方式，第二個是 base64 編碼方式：

常規base64 編碼

該源影象是我的朋友艾希莉拍攝的。我把它調整為1440×900畫素，儲存為漸進式 jpeg 格式，並進行了優化和壓縮處理，然後採用 base64 編碼版本：

harryroberts in ~/sites/csswizardry.net/demos/base64 on (gh-pages)
» base64 -i masthead.jpg -o masthead.txt

對進行了適當的優化調整，使得 base64 版本與我們常規的基本上差不多大。

建立兩份樣式表：

* .masthead

檔案準備好後，我就將其託管在乙個**上，這樣我們就可以測試網路及其他可能存在的潛在因素對於載入速度的影響。

開啟 chrome 瀏覽器，關閉了之前開啟的其他頁面。

找到 chrome 的 timeline 選項卡，開始測試。過程記錄如下：

禁用快取。

清除之前遺留的時間線資訊。

重新整理頁面並記錄網路和時間線活動。

完全丟棄任何有關 dns 或 tcp 請求連線的結果（我不希望記錄受任何不相關網路活動）。

記錄domcontentloaded，load，first paint， parse stylesheet 和 image decode執行時間。

清除資料後，重複前五步。

選出每次測量的中位數（中位數是正確的平均值）。

對於 base64 版本執行相同操作。

在移動裝置再次進行測試。（最終，我收集四組資料：電腦端 base64 和非 base64，移動端 base64 和非 base64 [^平台]）。

然後，我通過將 cpu 調節 3× 來模擬中檔移動裝置，網路限制為 regular 2g，在移動端做了多次測試。

您可以檢視我在 google **上收集的所有資料（所有數字以毫秒為單位）。資料的質量和一致性令我震驚：幾乎沒有出現統計學異常值。

在所有這些指標中，我們有了乙個顯而易見的贏家：幾乎所有的東西，在兩個不同平台上，如果我們使用 base64，都會更慢。我們測試結果幅度差距過大，幾乎可以不用考慮低效能裝置，或網路原因帶給我們的測試結果誤差：樣式表解析慢 32 倍和首屏渲染慢 10.27 倍。

as="image" />我做了另乙個演示頁面：

預載入

|--
html--
|||-
css-||
|---
----
---image--
----
----
||

而擁有乙個這樣的：

href="image.css" />我沒有注意到這個測試用例有很大的改進，預載入在這裡不是很有用：我已經有這麼短的請求鏈，我沒有從重新排序中得到任何好處。但是，如果我們有乙個需要載入很多資源的頁面，那麼預載入就會為頁面帶來提公升。其實，我在我的主頁上使用它來預先載入了masthead：這些資源通常會很晚才會被請求，但這種方式提前載入，會在展示效果上有重大變化。

我注意到的一件非常有趣的事情，就是解碼時間。在 mobile 上，影象在 25ms 內解碼，而 desktop 卻是 36.57ms。

我不知道為什麼會發生這種情況，但是如果我做了乙個大膽的猜測：我想象影象在實際需要之前不會被解碼，所以在實際需要必須解碼之前只是一堆位元組，這個過程會更快的工作嗎？誰知道這個問題的答案，請告訴我！

儘管我非常確認我的測試是盡可能不受潛在因素影響，是公平的，但有時間的時候，我希望我可以做得更好。（今天週末，我們繼續…）：

這就是我針對 base64 的效能影響分析的兩篇文章。有點像是在確認我們已經知道的常識，但通過一些數字一步一步分析，效果會更好，在低功率連線和裝置上測試也尤為重要。base64 在效能上不佔優勢。

[^平台]在這裡補充一下：我只是針對我的膝上型電腦和模擬移動裝置進行了測試，並沒有區分螢幕大小。

Base64 編碼和效能，第 2 部分

Base64 編碼和效能，第 1 部分

base64編碼和解碼

Base64編碼演算法實現 2

Base64 編碼和效能，第 2 部分

Base64 編碼和效能，第 1 部分

base64編碼和解碼

Base64編碼演算法實現 2

相關推薦