HBO系列硅谷幽默地描繪了Pied Piper，這是一個旨在創(chuàng)建革命性壓縮算法的開發(fā)團(tuán)隊。他們的目標(biāo)？為了過時對高質(zhì)量流和文件存儲的關(guān)注。代表Google的虛構(gòu)的Hooli試圖獲取其技術(shù)。有趣的是，Google實(shí)際上擁有強(qiáng)大的壓縮引擎：Brotli。

本文詳細(xì)介紹了我在生產(chǎn)環(huán)境中使用Brotli使用Brotli的經(jīng)驗(yàn)。雖然最初被認(rèn)為是計算昂貴的，尤其是在較高的壓縮水平下，Brotli在幾個關(guān)鍵領(lǐng)域都被證明具有非常成本效益，超過了GZIP和較低的Brotli設(shè)置。

Brotli的創(chuàng)世紀(jì)

Google于2015年宣布了Brotli，并在Github上發(fā)布了其源代碼。 Brotli創(chuàng)作者還在兩年前開發(fā)了Google的Zopfli壓縮。與現(xiàn)有技術(shù)建立的Zopfli不同，Brotli是從頭開始設(shè)計的，優(yōu)先考慮靜態(tài)Web資產(chǎn)的文本壓縮（HTML，CSS，JavaScript，Web Fonts）。

作為當(dāng)時的自由網(wǎng)絡(luò)績效顧問，Brotli承諾比Zopfli的20-26％改善（本身是高效的放氣壓縮機(jī)）感到興奮。這代表了對Zlib（本質(zhì)上是GZIP）的顯著進(jìn)步。

最初的失望

盡管Brotli在工具，服務(wù)和瀏覽器中獲得了快速的吸引力，但預(yù)期的26％的壓縮并未在生產(chǎn)中始終實(shí)現(xiàn)。一些CDN在內(nèi)部使用較低的壓縮水平，而另一些CDN則需要手動起源側(cè)brotli配置。

服務(wù)器端Brotli支持很好，但是實(shí)現(xiàn)高壓的高壓定制預(yù)壓縮代碼或服務(wù)器模塊 - 通常不可用，尤其是在共享托管的情況下。這很令人沮喪；我的目的是為客戶網(wǎng)站提供最大的字節(jié)壓縮，但是事實(shí)證明，按需預(yù)壓以及同時的文件更新是具有挑戰(zhàn)性的。

一個自制的解決方案

我為客戶開發(fā)了性能優(yōu)化服務(wù)，將優(yōu)化分為“內(nèi)容”，“交付”和“緩存”組。 Brotli被整合到“內(nèi)容”優(yōu)化中。

Brotli提供可調(diào)節(jié)的壓縮水平（最高11級）。 11級提供了大量的文件尺寸減少，但非常慢，不適合由于CPU高開銷而導(dǎo)致按需壓縮。我的基準(zhǔn)顯示Brotli：11占數(shù)百毫秒來壓縮一個縮小的jQuery文件。預(yù)壓是唯一需要服務(wù)器級緩存的可行選擇。

盡管擔(dān)心資源消耗，但我還是將Brotli：11作為可配置的服務(wù)器選項，使客戶可以權(quán)衡計算成本。

漸進(jìn)的投資回報率

我的服務(wù)包含地理內(nèi)容交付（內(nèi)置CDN）。我將公共和私人CDN組合在單個主機(jī)上，利用共享的瀏覽器庫來獲取公共資源，同時避免了額外的DNS查找和連接成本。此優(yōu)化的HTTP/2多路復(fù)用。

使用Brotli：為所有可壓縮資產(chǎn)（CSS，JavaScript，SVG，TTF等）啟用了11個預(yù)壓縮，請?zhí)岣叱跏颊埱箝_銷，但隨后的請求順利運(yùn)行。 Brotli的高瀏覽器支持確保了廣泛的利用。

分析顯示，與其他CDN相比，節(jié)省了約21％（有些已經(jīng)在較低級別使用Brotli）。這在經(jīng)過測試的網(wǎng)站之間是一致的。下圖說明了節(jié)省（CSS節(jié)省比JavaScript更重要）。

Brotli：11的好處是很大的：

• 減少了TLS開銷：雖然不容易量化，但較小的文件加密速度更快。
• 較低的帶寬成本：一致的21％節(jié)省量導(dǎo)致累積成本降低。
• 有效的邊緣服務(wù)器緩存：較小的Brotli壓縮文件最大化的內(nèi)存利用率。
• 改進(jìn)的用戶體驗(yàn)：減少了用戶，尤其是移動用戶的數(shù)據(jù)傳輸，從而可以更好地節(jié)省電池壽命和數(shù)據(jù)。

每次要求節(jié)省的成本是適度的，但是公共資源的接近零高速緩存率很快攤銷了初始壓縮成本。長期利益很大。

進(jìn)一步的增強(qiáng)

我們的服務(wù)允許客戶使用較低的壓縮液位來用于經(jīng)常更改私有CDN資源（自定義CSS/JavaScript），自動切換到公共CDN，以較少更新，預(yù)壓縮（Brotli：11）資源。這將高壓比與快速清除/更新之間進(jìn)行平衡。

我們的集成工具簡化了此過程。公共CDN提供免費(fèi)的帶寬和出色的性能。

自己嘗試！

積極的壓縮可以顯著減少頁面負(fù)載大小。我們的PageCDN服務(wù)可訪問免費(fèi)的公共CDN。以下是常用庫的示例：

<link crossorigin="anonymous" href="https://pagecdn.io/lib/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A KluUYx/3pK c7lYEpqLTlxjYQ=" rel="stylesheet">
<link crossorigin="anonymous" href="https://pagecdn.io/lib/ionicons/4.6.3/css/ionicons.min.css" integrity="sha256-UUDuVsOnvDZHzqNIznkKeDGtWZ/Bw9ZlW 26xqKLV7c=" rel="stylesheet">
<link crossorigin="anonymous" href="https://pagecdn.io/lib/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" rel="stylesheet">

我們的PHP庫和WordPress插件與公共CDN無縫集成。 JavaScript，Python和Ruby圖書館即將到來。您還可以使用我們的搜索工具來找到用于您的網(wǎng)站資源的CDN等效物。

未來的前景

我們最初專注于流行的庫來減輕惡意軟件風(fēng)險。我們根據(jù)用戶建議不斷添加新庫。對于尚未在我們的公共CDN上的資源，我們的私人CDN允許鏈接到存儲庫并應(yīng)用自定義優(yōu)化。

結(jié)論

本文反映了我對Brotli的個人經(jīng)歷。盡管我們的服務(wù)仍然相對較小，但積極的壓縮已被證明是非常有益的。免費(fèi)的公共CDN提供了與您的網(wǎng)站相似的優(yōu)勢。歡迎反饋。

以上是我如何使用brotli以CDN量表獲取更小的CSS和JavaScript文件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！