被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性能概况。

本文，只是选取了一些比较有代表性的插件进行了分析，无法逐一列举。如果你想知道你安装的插件对浏览器的影响有多大，你可以访问网站：Chrome Extension Performance Lookup

---

大家好，我是Jackpop！我花费了半个月的时间把这几年来收集的各种技术干货整理到一起，其中内容包括但不限于Python、机器学习、深度学习、计算机视觉、推荐系统、Linux、工程化、Java，内容多达5T+，获取方式：技术干货_免费高速下载|百度网盘-分享无限制（提取码：0000）