被 Chrome 坑惨了！

程序员宝藏库：https://github.com/Jackpopc/CS-Books-Store

Hello，大家好，我是 Jackpop。

最近一段时间使用 Chrome 浏览器的过程中遇到一个让我非常无奈的现象：频繁崩溃。

每次都是在工作比较忙碌，注意力比较集中的时候，Chrome 突然全部崩溃。这让我不得不把关掉浏览器，重启一下，然后重新打开所有之前的标签页，体验非常差。

由于之前比较忙，也没有纠结这些细节，这两天，我特意研究了一下到底什么原因导致 Chrome 崩溃。

话不多说，下面就来给大家介绍一下，避免大家踩同样的坑！

Chrome 本身自然是非常占用内存的，但是，拖慢 Chrome 的罪魁祸首就是扩展程序。

应该有不少同学和我一样，为了各种各样的原因，在浏览器上安装了很多不同功能的扩展插件。

正是由于这些扩展程序，使得 Chrome 变得臃肿无比，极大的占用 CPU 资源。

为了确定扩展程序对 Chrome 的影响，调查了 1000 个最受欢迎的 Chrome 扩展程序在不同网站上的表现，对比它们如何影响浏览器性能和最终用户体验。

这些扩展程序中不乏印象笔记、LastPass、Dark Reader 这些非常知名插件。

增加网站的 CPU 使用率

尽管一些比较良心的扩展程序只在必要时运行代码，但是，依然有许多 Chrome 扩展程序会在你打开的每个页面上运行额外的代码。

在 100 个最受欢迎的 Chrome 扩展中，印象笔记对性能的负面影响最大。

它在你打开的每个页面上花费 368 毫秒的时间运行代码。

如果你在这段时间内试图与页面互动，反应会感觉很迟钝。

这些浏览器扩展中的每一个都被安装了超过一百万次。

虽然几百毫秒听起来不多，但如果安装了多个扩展，这对用户体验会有很大影响。

浏览器扩展的速度影响取决于用户所打开的网站，上述结果是在一个非常简单的网站上收集的。

在苹果主页上测试扩展时，我们可以看到，一个名为 Dark Reader 的扩展花了 25 秒的时间来分析和调整图片，使其更适合黑暗主题。

因此，页面的加载速度要慢得多。

优惠券代码查找工具 Honey 也大大影响了电子商务网站的网站速度，增加了 825 毫秒的 CPU 处理时间。

最后，在丰田主页上进行测试时，我们可以看到 Norton Password 增加的 CPU 活动最多，增加了大约 1 秒钟的 CPU 时间。

这个图表只显示了对性能影响最大的 5 个扩展，即使没有安装任何扩展，toyota.com 也使用了超过 3 秒的 CPU 时间，所以要把随机变化和扩展的影响分开比较困难。

前 1000 名扩展

让我们来看看其他一些不太受欢迎，但仍有超过 10 万个安装量的扩展。

Ubersuggest，一个拥有 20 多万用户的营销工具，为每个页面增加 1.6 秒的 CPU 活动。

Substitutions 是一个 Chrome 扩展，可以自动替换页面上的某些词语。在一个小网站上，它对性能影响不大（增加约 10 毫秒的 CPU 时间），但在一个较大的页面上，如 toyota.com，它增加了 9.7 秒的 CPU 活动。

影响页面渲染时间

CPU 活动可能会导致页面挂起，变得没有反应，以及增加电池消耗。

但是，如果处理发生在最初的页面加载之后，对用户体验的影响可能不会那么大。

一些扩展，如 Loom 和 Ghostery，运行大量的代码而不影响页面开始渲染的时间。

然而，其他扩展，如 Clever、Lastpass 和 DuckDuckGo Privacy Essentials 在页面开始加载时就运行代码，延迟了用户第一次能够查看页面内容的时间。

该图表使用 First Contentful Paint 指标来衡量这一点。

虽然苹果公司的主页通常在一秒钟内完成渲染，但在安装了 Dark Reader 的情况下，几乎需要 4 秒钟。

在一个电子商务网站上，Honey 也将页面内容的出现推迟了近半秒。

Avira 浏览器安全和一些广告拦截器也会延迟页面内容开始出现的时间。

前 1000 名扩展

查看 1000 个最受欢迎的扩展显示，壹伴-小插件这款新媒体工具延迟了 342 毫秒的渲染时间，一个名为 Outreach Everywhere 的销售工具增加了 251 毫秒的延迟。

当加载丰田汽车主页时，一个名为 anonymoX 的匿名浏览代理延迟了超过 2 秒的渲染时间--然而这并不令人惊讶，因为流量是通过另一个服务器传输的。

Avira Browser Safety 将渲染延迟了 369 毫秒。

这不是由于在被访问的页面上运行的代码造成的，而是由扩展程序执行的后台工作造成的。

后台 CPU 使用率

Chrome 扩展程序不仅可以在你访问的页面上运行代码，还可以在属于 Chrome 扩展程序的背景页面上运行代码。

例如，这段代码可以包含阻止对某些域的请求的逻辑。

即使在访问一个简单的页面时，Avira Safe Shopping 也会让 CPU 工作 2 秒以上。

在一个更复杂的页面上，Dashlane 密码管理器和 AdGuard AdBlocker 也在后台活动中花费超过 2 秒。

前 1000 名扩展

在浏览一篇新闻文章时，有三个扩展程序导致超过 20 秒的 CPU 活动：uberAgent、Dashlane 和 Wappalyzer。

浏览器内存消耗

Chrome 扩展程序会增加每个被访问页面的内存使用量，以及扩展程序本身的内存消耗。

这可能会损害性能，特别是在低规格的设备上。

广告拦截器和隐私工具通常会存储大量网站的信息，需要大量的内存来存储这些数据。

也就是说，当浏览器中打开许多广告量大的网页时，它们也能减少整体内存消耗。

前 1000 名扩展

在查看前 1000 名扩展时，广告拦截器继续占用大量的内存，Trustnav 广告拦截器增加了近 300MB 的内存消耗。

广告拦截器和隐私工具

虽然广告拦截器会对无广告的网站造成额外的处理和负担，但它们确实可以大大加快广告密集型网页的速度。本节研究了 15 个安装量超过 50 万的广告屏蔽器。

加载跟踪器和渲染广告通常是 CPU 密集型的，尽管具体影响因网站而异。

新闻网站往往是广告密集型的，因此本报告将考察两篇新闻文章的 CPU 使用情况：

在没有广告拦截器的情况下，每页的 CPU 时间为 17.5 秒。即使是性能最低的拦截器（由 Trustnav）也能将其减少 57%，达到 7.4 秒。

Ghostery 是这项测试中表现最好的广告拦截器，它将 CPU 活动减少了 90%，平均只有 1.7 秒。

uBlock Origin 的作者 Raymond Hill 指出，虽然所有的扩展都会减少页面上的 CPU 活动，但有些扩展也会在扩展的后台页面中引入大量的 CPU 活动，从而抵消了一些节省的费用。

在后台进行的工作不太可能影响网页本身的性能，但它仍然会使你的电脑整体变慢。

广告拦截器和隐私工具也能减少 43%至 66%的数据量。

在没有广告拦截器的情况下，每篇文章平均发出 793 个网络请求。有了 Ghostery，这个数字下降了 90%，只有 83。

在没有安装广告拦截器的情况下，打开一篇新闻文章的平均总浏览器内存消耗为 574 MB。

关闭后，这个数字减少了 54%，只有 260MB。

然而，由于浏览器扩展程序的运行总是需要一些内存，其他广告拦截器，如 Trustnav 公司的广告拦截器，会稍微增加内存消耗。在这种情况下，拦截广告所节省的费用并没有超过广告拦截器的额外成本。

然而，请记住，这只适用于你有一个单一的广告密集的页面打开。如果你有 10 个标签打开，都显示新闻文章，那么你会看到 10 倍的内存节省，但一般来说，广告拦截器的内存消耗没有线性增加。

安装扩展的影响？

在大多数情况下，多个 Chrome 扩展程序的影响会累积起来。

这张截图显示了安装了四个扩展程序（axe Web Accessibility Testing、Evernote Web Clipper、LastPass 和 Skype）后，apple.com 的 Chrome DevTools 页面性能概况。

你可以看到，CPU 任务一个接一个地运行。如果一个扩展被配置为在页面开始加载时立即运行，这会延迟页面的初始渲染。

扩展优化效果

我看了 96 个最受欢迎的扩展，这些扩展都包括在今年的测试和去年的测试中。

取所有变化的平均值显示，页面上的 CPU 时间减少了 28 毫秒。

然而，2021 年的测试是使用 Chrome 91 运行的，而 2020 年的测试则使用 Chrome 83。随着时间的推移，Chrome 浏览器变得越来越快，这些改进可能并不一定意味着 Chrome 扩展程序本身已经得到优化。

当用旧版本的 Chrome 浏览器运行今年的测试时，平均改进只有 13 毫秒。

请注意，这种比较只看一个网站的一个指标（简单的测试页面）。

Grammarly、Microsoft Office、Okta Browser Plugin、Avira Safe Shopping 和 Avira Browser Safety 都显示页面 CPU 时间减少了 100 毫秒以上。最大的减幅出现在 Save to Pocket、Loom 和 Evernote 中。

探究

下面，针对个别典型扩展进行逐一探究。

去年，Grammarly 在每个页面上都会加载一个 1.3 MB 的 Grammarly.js 文件。

现在，在大多数网站上，只有 112KB 的 Grammarly-check.js 脚本被加载。例如，只有当用户关注一个文本区域时，扩展才会加载完整的 Grammarly.js 文件。

然而，有些网站仍然总是加载全量的脚本。例如，LinkedIn、Medium、Slack、Reddit、Upwork、Zendesk 和其他经常输入文字的网站。

在这些网站上，性能影响将比这些测试中显示的更大。

Evernote 在每个页面上加载 4.3MB 的内容脚本，比一年前的 2.9MB 有所增加。因此，解析、编译和运行这些代码需要大量的时间。

Outreach Everywhere 在每个页面上加载 4.5MB 的代码。然而，这段代码的性能影响要大得多，因为它是在 document_start 而不是 document_idle 上加载的。这意味着代码在被访问的页面开始渲染之前运行，从而延迟了页面内容显示的时间。

这张图片显示了安装了这两个扩展的 Chrome DevTools 性能概况。

本文，只是选取了一些比较有代表性的插件进行了分析，无法逐一列举。如果你想知道你安装的插件对浏览器的影响有多大，你可以访问网站：https://www.debugbear.com/chrome-extension-performance-lookup

大家好，我是 Jackpop！我花费了半个月的时间把这几年来收集的各种技术干货整理到一起，其中内容包括但不限于 Python、机器学习、深度学习、计算机视觉、推荐系统、Linux、工程化、Java，内容多达 5T+，获取方式：https://pan.baidu.com/s/1eks7CUyjbWQ3A7O9cmYljA（提取码：0000）