譯者 | 彎月 責編 | 晉兆雨

以下為譯文：

這篇報告調查了 1000 個最流行的 Chrome 插件對瀏覽器效能和終端使用者體驗的影響。

2021 年報告的主要發現：

• Honey、Evernote Web Clipper 和 Avira Browser Safety 等流行插件會對網站的速度產生重大負面影響；
• 在包含大量廣告的網站上，廣告攔截器和隱私工具可以大大提高效能。

由於不同網站對效能的影響各不相同，因此我們的測試主要包含五個不同的頁面：一個簡單的測試頁面、apple.com、toyota.com 以及 The Independent 和 Pittsburgh Post-Gazette 的新聞文章。

如果你想知道你使用的插件是否會影響速度，可以檢視此處的插件列表。

(https://www.debugbear.com/chrome-extension-performance-lookup)

文字主要內容：

• 網站 CPU 使用率的增加；
• 對頁面渲染時間的影響；
• 後臺 CPU 的使用率；
• 瀏覽器記憶體的消耗；
• 廣告攔截器與隱私工具對瀏覽器效能的影響；
• 安裝多個插件有何影響？
• 這些瀏覽器的效能與去年相比如何？
• 針對每個插件的分析；
• 方法論。

網站 CPU 使用率的增加

許多 Chrome 插件都能夠在你開啟的每個頁面上運行額外的程式碼，儘管正常的插件僅在必要的時候才運行程式碼。

在 100 個最流行的 Chrome 插件中，Evernote Web Clipper 對效能的負面影響最大。在開啟每個頁面時，該插件運行程式碼所佔據的時間約為 368 毫秒。如果你嘗試在此期間內與頁面互動，則響應會非常遲鈍。

上述插件的安裝次數都超過了一百萬。雖然幾百毫秒聽起來並不算多，但是如果安裝多個插件，就會對使用者體驗產生重大影響。

瀏覽器插件對速度的影響取決於使用者開啟的網站。以上結果是在一個非常簡單的網站上收集的，通常在這種頁面上，Chrome插件對效能的影響最低。

在蘋果主頁上測試插件時，我們可以看到一個名為 Dark Reader 的夜間模式插件需要 25 秒來分析和調整影象，從而更好地轉換成黑暗主題。結果導致頁面的載入速度大幅降低，如下所示。

優惠券程式碼查詢器 Honey 會嚴重影響電子商務網站的載入速度，CPU 的處理時間大約會增加 825 毫秒。

最後，在 Toyota 主頁上運行測試時，我們可以看到 Norton Password 導致 CPU 活動增加的幅度最大，增加了大約 1 秒鐘。

上圖僅顯示了對效能影響最大的 5 個插件。即使沒有安裝任何擴展，toyota.com 的載入時間也會超過 3 秒鐘，因此很難將隨機變化與插件的影響區分開來。

最受歡迎的 1000 個插件

讓我們看看其他不太受歡迎但安裝量仍然超過了 10萬+ 的插件。

對頁面渲染時間的影響

CPU 活動會導致頁面掛起或無響應，並增加電池消耗。如果處理是在頁面載入完畢後進行的，那麼對使用者體驗的影響可能不會那麼大。

Loom 和 Ghostery 等幾款插件會運行大量程式碼，但不會影響頁面的渲染時間。

但是，有一些插件，比如 Clever、Lastpass 和 DuckDuckGo Privacy Essentials，會在頁面開始載入時立即運行程式碼，並最終導致使用者的等待時間加長。下圖的測量使用了 First Contentful Paint 指標。

雖然蘋果頁面能夠在一秒鐘內完成渲染，但在安裝了 Dark Reader 後，需要近 4 秒的時間。

當頁面內容開始顯示時，Avira 瀏覽器安全和一些廣告攔截器也可能會造成延遲。

最受歡迎的 1000 個插件

讓我們看看最受歡迎的 1000 個插件，一個名為「壹伴 · 小插件」的社交媒體工具導致渲染時間延遲了 342 毫秒，而一個名為 Outreach Everywhere 的銷售工具則引發了 251 毫秒的延遲。

在Toyota 主頁載入期間，名為 anonymoX 的匿名瀏覽代理會造成渲染延遲 2 秒以上，不過這也並不奇怪，因為流量是通過另一臺伺服器路由的。

後臺 CPU 的使用率

Chrome 插件不僅可以在你訪問的頁面上運行程式碼，還可以在插件的後臺頁面上運行程式碼。例如，有些插件的程式碼包含可以阻止對某些域傳送請求的邏輯。

即使訪問一個簡單的頁面，Avira Safe Shopping 也會引發 2 秒多的延遲。

在較為複雜的頁面（在本例中是 Toyota 主頁）上，Dashlane 密碼管理器和 AdGuard AdBlocker 的後臺活動花費了 2 秒以上。

最受歡迎的 1000 個插件

在瀏覽 The Independent 的新聞文章時，有三個插件導致 CPU 活動超過 20 秒：uberAgent、Dashlane 和 Wappalyz。

瀏覽器記憶體的消耗

Chrome 插件會導致你所訪問的每個頁面的記憶體使用量增加，而且擴展本身還會消耗記憶體。這會嚴重影響效能，尤其是在低配置裝置上。

通常，廣告攔截器和隱私工具會儲存有關大量網站的資訊，需要大量記憶體來儲存這些資料。話雖如此，當在瀏覽器中開啟的頁面包含大量廣告時，這些插件可以減少整體記憶體的消耗。

最受歡迎的 1000 個插件

檢視前 1000 個插件就會發現，廣告攔截器佔用了大量記憶體，Trustnav 廣告攔截器增加了近 300 MB 的記憶體消耗。

廣告攔截器與隱私工具對瀏覽器效能的影響

雖然廣告攔截器可能會新增過濾廣告的處理，但遇到包含大量的廣告的網站時，它們可以大幅提升頁面的速度。我們調查了 15 款安裝次數超過 50 萬的廣告攔截器。

載入跟蹤器和呈現廣告通常都耗費大量 CPU，但具體影響因網站而異。新聞網站的廣告一般都特別多，因此這篇報告集中測試了兩大新聞網站的CPU使用率：The Independent 與 Pittsburgh Post-Gazette。

在沒有廣告攔截器的情況下，每個頁面需要的 CPU 時間為 17.5 秒。即使是性能最低的攔截器（Trustnav）也能減少 57%（ 7.4 秒）的 CPU 時間。

在我們的測試中，表現最佳的廣告攔截器是 Ghostery，它將 CPU 活動減少了 90%，平均僅為 1.7 秒。

此外，廣告攔截器和隱私工具還可以減少 43% ～ 66% 的資料量。

如果沒有廣告攔截器，每篇文章平均會產生 793 個網路請求。在使用了 Ghostery之後，這一比例下降了 90%，僅為 83 個請求。

在不安裝廣告攔截器的情況，瀏覽器開啟一篇新聞文章的平均記憶體消耗為 574 MB。Disconnect 插件可以減少 54% 的記憶體消耗，降至僅 260 MB。

然而，由於瀏覽器的插件需要一些記憶體來運行，因此 Trustnav 的廣告攔截器等插件會導致整體的記憶體消耗略微增加。也就是說，因阻止廣告而節省下來的資源還不足以抵消廣告阻止程式本身的消耗。

但是，請記住，當你只打開一個包含大量廣告的頁面才會出現這種情況。如果你開啟 10 個頁面，全部顯示新聞文章，那麼就會節省 10 倍的記憶體，但廣告攔截器消耗的記憶體通常不會增加。

安裝多個擴展有何影響？

在大多數情況下，多個 Chrome 插件造成的影響是疊加的。

下圖顯示了 Chrome DevTools 頁面效能評測工具中 Apple.com 的載入，我們安裝了4個插件：ax Web Accessibility Testing、Evernote Web Clipper、LastPass 和 Skype。

可以看到，這些插件一個接一個地運行。如果插件在頁面開始載入時立即運行，則會延遲頁面的顯示速度。

這些瀏覽器的效能與去年相比如何？

我翻看了今年和去年測試中都包含的 96 個最受歡迎的插件。

平均每個頁面的載入時間減少了 28 毫秒。

但是，2021 年的測試使用的 Chrome 91，而2020 年的測試使用的是 Chrome 83。Chrome 本身的提升也越來越快，因此這些提升可能並不一定是 Chrome 插件本身優化的結果。

在使用舊版 Chrome 運行今年的測試時，平均提升時間僅為 13 毫秒。

請注意，上述比較僅查看了一個網站（一個簡單的測試頁面）。

Grammarly、微軟 Office、Okta 瀏覽器插件、Avira Safe Shopping 和 Avira Browser Safety 顯示頁面的載入時間減少超過了 100 毫秒。退步最大的是 Save to Pocket、Loom 和 Evernote。

針對每個插件的分析

Grammarly的提升

去年，Grammarly 在每個頁面上載入了一個 1.3 MB 的 Grammarly.js 檔案。如今，在大多數網站上只加載了 112 KB Grammarly-check.js 指令碼。例如，只有當用戶關注文字區域時，該插件才會載入完整的 Grammarly.js 檔案。

但是在一些網站上，Grammarly仍然會載入完整的指令碼。比如 Gmail、Twitter、YouTube、LinkedIn、Medium、Slack、Reddit、Upwork、Zendesk 和其他常見的文字輸入網站。Grammarly對這些網站的效能影響遠大於測試中顯示的資料。

Save to Pocket 的退步

在去年的測試中，Save to Pocket 向每個頁面注入了一個很小的樣式表，對效能沒有明顯影響。

但是，如今 Save to Pocket 會載入 2 MB 的 JavaScript 檔案，導致 CPU 時間增加了 110 毫秒。

Evernote、Outreach Everywhere 和 Ubersuggest

Evernote 會在每個頁面上載入 4.3 MB 的指令碼，高於一年前的 2.9 MB。因此，解析、編譯和運行此程式碼需要花費大量時間。

Outreach Everywhere 會在每個頁面上載入 4.5 MB 的程式碼。但是，這些程式碼對效能的影響非常大，因為它是在 document_start 上載入的。這意味著程式碼在頁面開始渲染之前就會運行，因此會延遲頁面的顯示。

下圖利用 Chrome DevTools 效能配置檔案針對安裝了這兩個插件的頁面進行了分析。

Ubersuggest 會在每個頁面上載入一個 7.5 MB 的 JavaScript 檔案。其中很多是地理資料，比如下面的程式碼包含 38,279 個不同的地理位置。

Avira 安全購物

Avira Safe Shopping 擁有超過 300 萬用戶。為什麼有時候頁面渲染會延遲將近半秒？

這是因為該插件包含 39,328 個網站的安全列表。每當開啟新網站時，Avira 就會遍歷此列表，結果就會導致網站載入速度變慢。

Dashlane 和 uberAgent

在檢視 The Independent 的一篇文章時，Dashlane 和 uberAgent 都引發了 20 多秒的後臺 CPU 活動。

uberAgent 會針對每個網路請求，設定一個計時器，每 50 毫秒觸發一次，以檢查頁面是否已完成載入。如果頁面傳送出1000 個請求，uberAgent就會創建大量計時器，從而拉垮整個頁面速度。

uberAgent 會運行許多小任務，但 Dashlane 偶爾運行超過 500 毫秒的長時間任務。

檢視某個插件對效能的影響

如果你想知道某個插件對效能的影響，請點選這裡：https://www.debugbear.com/chrome-extension-performance-lookup。

方法論

我們的測試是在 Google 雲實例 n2-standard-2 上運行的，本篇報告中顯示的數字採用了 7 次測試結果的中位數。

我們使用的資料是使用 Lighthouse 收集的，測試中的結果是在沒有任何網路限流下的觀察結果，並不是模擬結果。

我們的測試總共包含 1004 個插件。很多插件只修改了新標籤頁面，通常不會影響效能，因此不包含在結果中。還有一些測試結果出錯的插件也不包括在內。

原文連結：https://www.debugbear.com/blog/chrome-extension-performance-2021

聲明：本文由CSDN翻譯，轉載請註明來源。

位元組跳動宣佈取消大小周；淘寶、支付寶等阿里系App取消開屏廣告；Python 3.10 beta 4 釋出|極客頭條
谷歌再遭反壟斷起訴：曾試圖「扼殺」三星應用商店！
從摩托羅拉、諾基亞再到航空領域應用，這款開源資料庫的成功如何成就天才程式設計師？