Chrome 扩展程序如何影响浏览器性能？

本报告调查了 1000 个最流行的 Chrome 扩展程序如何影响浏览器性能和最终用户体验。流行的扩展程序，如 Honey、Evernote Web Clipper 和 Avira Browser Safety 会对网站速度产生重大负面影响由于不同网站对性能的影响各不相同，因此测试中包含五个不同的页面：一个简单的测试页面、apple.com、toyota .com 以及 The Independent 和 Pittsburgh Post-Gazette 的新闻文章。想知道您使用的任何扩展程序是否会减慢您的速度？在此处查找扩展名。许多 Chrome 扩展程序能够在您打开的每个页面上运行额外的代码，尽管构建良好的扩展程序仅在必要时运行代码。在 100 个最流行的 Chrome 扩展程序中，印象笔记 Web Clipper 对性能的负面影响最大。它花费 368 毫秒在您打开的每个页面上运行代码。如果您在此期间尝试与页面交互，则响应会变得缓慢。这些浏览器扩展中的每一个都已安装超过一百万次。虽然几百毫秒听起来不算多，但如果安装了多个扩展，这会对用户体验产生重大影响。

浏览器扩展对速度的影响取决于用户打开的网站。以上结果是在一个非常简单的网站上收集的，通常代表 Chrome 扩展程序对每页性能的最小影响。在 Apple 主页上测试扩展时，我们可以看到一个名为 Dark Reader 的暗模式扩展需要 25 秒来分析和调整图像，以便它们更好地适应暗主题。结果页面加载得更慢，我们稍后会看到。优惠券代码查找器 Honey 还显着影响了电子商务网站的网站速度，增加了 825 毫秒的 CPU 处理时间。最后，在 Toyota 主页上运行测试时，我们可以看到 Norton Password 增加 CPU 活动最多，增加了大约 1 秒的 CPU 时间。此图表仅显示了对性能影响最大的 5 个扩展。即使没有安装任何扩展，toyota.com 也会使用超过 3 秒的 CPU 时间，因此很难将随机变化与扩展的影响区分开来。让我们看看其他一些不太受欢迎但安装量仍然超过 100,000 的扩展程序。 Ubersuggest 是一种拥有超过 200,000 名用户的营销工具，它为每个页面增加了 1.6 秒的 CPU 活动。

Substitutions 是一个 Chrome 扩展程序，可以自动替换页面上的某些单词。在小型网站上，它对性能的影响很小（增加了大约 10 毫秒的 CPU 时间），但在像 toyota.com 这样的较大页面上，它增加了 9.7 秒的 CPU 活动。 CPU 活动可能导致页面挂起和无响应，并增加电池消耗。但是如果在初始页面加载之后进行处理，对用户体验的影响可能不会那么大。像 Loom 和 Ghostery 这样的几个扩展程序会运行大量代码，而不会影响页面开始呈现的时间。但是，其他扩展程序（例如 Clever、Lastpass 和 DuckDuckGo Privacy Essentials）会在页面开始加载时立即运行代码，从而延迟用户首次能够查看页面内容的时间点。该图表使用 First Contentful Paint 指标来衡量这一点。虽然 Apple 主页通常在一秒内呈现，但安装了 Dark Reader 则需要近 4 秒。在电子商务网站上，Honey 还将页面内容的出现延迟了近半秒。当页面内容开始显示时，Avira 浏览器安全和一些广告拦截器也可能会延迟。

从 1000 个最受欢迎的扩展程序来看，一个名为壹伴·小插件的社交媒体工具将渲染时间延迟了 342 毫秒，而一个名为 Outreach Everywhere 的销售工具则增加了 251 毫秒的延迟。加载 Toyota 主页时，名为 anonymoX 的匿名浏览代理会将渲染延迟 2 秒以上——但这并不奇怪，因为流量是通过另一台服务器路由的。 Avira 浏览器安全将渲染延迟 369 毫秒。这不是由在访问页面上运行的代码引起的，而是由扩展程序执行的后台工作引起的，我们将在下一节中看到。 Chrome 扩展程序不仅可以在您访问的页面上运行代码，还可以在属于 Chrome 扩展程序的后台页面上运行代码。例如，此代码可以包含阻止对某些域的请求的逻辑。即使访问一个简单的页面，Avira Safe Shopping 也会使 CPU 忙碌超过 2 秒。在更复杂的页面（在本例中是 Toyota 主页）上，Dashlane 密码管理器和 AdGuard AdBlocker 在后台活动上也花费了超过 2 秒的时间。在查看 The Independent 的新闻文章时，三个扩展会导致 CPU 活动超过 20 秒：uberAgent、Dashlane 和 Wappalyzer。

Chrome 扩展程序会增加被访问的每个页面的内存使用量，以及用于扩展程序本身的内存。这会损害性能，尤其是在低规格设备上。广告拦截器和隐私工具通常会存储有关大量网站的信息，需要大量内存来存储这些数据。话虽如此，当在浏览器中打开许多广告较多的页面时，它们还可以减少整体内存消耗。在查看前 1000 个扩展时，广告拦截器继续占用大量内存，Trustnav 广告拦截器增加了近 300 MB 的内存消耗。虽然广告拦截器可能会导致对无广告网站的额外处理，但它们可以显着加快广告密集页面的速度。本节将介绍 15 个安装次数超过 500,000 的广告拦截器。加载跟踪器和呈现广告通常是 CPU 密集型的，但具体影响因网站而异。新闻网站通常特别多广告，因此本报告将着眼于两篇新闻文章的 CPU 使用率：一篇来自 The Independent，另一篇来自 Pittsburgh Post-Gazette。如果没有广告拦截器，每页 CPU 时间为 17.5 秒。即使是性能最低的拦截器（由 Trustnav 开发）也能将其减少 57% 至 7.4 秒。 Ghostery 是本次测试中表现最佳的广告拦截器，它将 CPU 活动减少了 90%，平均仅为 1.7 秒。

uBlock Origin 的作者 Raymond Hill 在 Twitter 上指出，虽然所有扩展都会减少页面上的 CPU 活动，但有些扩展也会在扩展的后台页面中引入大量 CPU 活动，从而抵消了一些节省。在后台完成的工作不太可能影响网页本身的性能，但它仍然会降低您的计算机整体速度。如果没有广告拦截器，每篇文章平均会产生 793 个网络请求。使用 Ghostery，这一比例下降了 90%，仅为 83。如果没有安装广告拦截器，打开一篇新闻文章的平均浏览器总内存消耗为 574 MB。断开连接将其减少了 54% 至仅 260 MB。然而，由于浏览器扩展总是需要一些内存来运行，像 Trustnav 的其他广告拦截器会稍微增加内存消耗。在这种情况下，阻止广告带来的节省不会超过广告阻止程序的额外成本。但是，请记住，这仅适用于打开单个广告密集页面的情况。如果您打开了 10 个标签，全部显示新闻文章，那么您将看到 10 倍的内存节省，但通常不会增加广告拦截器的内存消耗。此屏幕截图显示了 Apple.com 的 Chrome DevTools 页面性能配置文件，当安装了四个扩展程序时：ax Web Accessibility Testing、Evernote Web Clipper、LastPass 和 Skype。

可以看到 CPU 任务一个接一个地运行。如果将扩展配置为在页面开始加载时立即运行，则会延迟页面的初始呈现。我查看了今年和去年测试中都包含的 96 个最受欢迎的扩展。取所有更改的平均值显示页面 CPU 时间减少了 28 毫秒。但是，2021 年的测试使用 Chrome 91 运行，2020 年的测试使用 Chrome 83。随着 Chrome 随着时间的推移变得更快，这些改进可能并不一定意味着 Chrome 扩展程序本身已经过优化。在使用旧版 Chrome 运行今年的测试时，平均改进仅为 13 毫秒。请注意，此比较仅查看一个网站（简单测试页面）上的一个指标。 Grammarly、Microsoft Office、Okta 浏览器插件、Avira Safe Shopping 和 Avira Browser Safety 都显示页面 CPU 时间减少超过 100 毫秒。最大的退化出现在 Save to Pocket、Loom 和 Evernote 中。

去年，Grammarly 在每个页面上加载了一个 1.3 MB 的 Grammarly.js 文件。现在在大多数网站上只加载了 112 KB Grammarly-check.js 脚本。例如，只有当用户关注文本区域时，扩展才会加载完整的 Grammarly.js 文件。但是，一些网站仍然总是加载完整大小的脚本。此列表包括 Gmail、Twitter、YouTube、LinkedIn、Medium、Slack、Reddit、Upwork、Zendesk 和其他常见文本输入的网站。在这些网站上，性能影响将大于这些测试中显示的影响。在去年的测试中，Save to Pocket 向每个页面注入了一个小样式表，但这对性能没有明显影响。但是，Save to Pocket 现在总是加载一个 2 MB 的 JavaScript 文件，增加了 110 毫秒的 CPU 时间。 Evernote 在每个页面上加载 4.3 MB 的内容脚本，高于一年前的 2.9 MB。因此，解析、编译和运行此代码需要花费大量时间。 Outreach Everywhere 在每个页面上加载 4.5 MB 的代码。但是，此代码的性能影响要大得多，因为它是在 document_start 而不是 document_idle 上加载的。这意味着代码在访问的页面开始呈现之前运行，从而延迟页面内容的显示时间。 Ubersuggest 在每个页面上加载一个 7.5 MB 的 JavaScript 文件。其中很多似乎是地理数据——例如，这个包含 38,279 个不同位置的列表。

Avira Safe Shopping 拥有超过 300 万用户。为什么有时候页面渲染会延迟将近半秒？该扩展程序包含 39,328 个网站的安全列表。导航到新网站时，Avira 会遍历此列表，导致网站加载速度变慢。在查看 The Independent 的文章时，Dashlane 和 uberAgent 都有超过 20 秒的后台 CPU 活动。对于每个网络请求，uberAgent 都会设置一个计时器，每 50 毫秒触发一次，以检查页面是否已完成加载。对于发出近 1000 个请求的页面，这意味着创建了许多计时器并且计算机显着变慢。虽然 uberAgent 运行许多小任务，但 Dashlane 偶尔运行超过 500 毫秒的长任务。测试在 n2-standard-2 Google Cloud 实例上运行；本报告中的数字显示了 7 次测试运行的中位数。数据是使用 Lighthouse 收集的，此测试中的结果显示未节流的观察指标，而不是模拟结果。

测试中总共包含 1004 个扩展。很大一部分扩展只修改了新标签屏幕；这些通常不会影响性能，因此大多数不包含在结果中。一些测试结果有错误的扩展也不包括在内。 Chrome 扩展程序对浏览器性能有什么影响？我测试了 1000 个流行的扩展来找出答案。查看以下主要发现的线程👇 https://t.co/oLwdFMlrYY — DebugBear (@DebugBear) 2021 年 7 月 6 日