被Chrome坑慘了！
：https://github.com/Jackpopc/CS-Books-Store
Hello，大家好，我是Jackpop。
最近一段時間使用Chrome瀏覽器的過程中遇到一個讓我非常無奈的現(xiàn)象：頻繁崩潰。
每次都是在工作比較忙碌，注意力比較集中的時候，Chrome突然全部崩潰。這讓我不得不把關(guān)掉瀏覽器，重啟一下，然后重新打開所有之前的標簽頁，體驗非常差。
由于之前比較忙，也沒有糾結(jié)這些細節(jié)，這兩天，我特意研究了一下到底什么原因?qū)е翪hrome崩潰。
話不多說，下面就來給大家介紹一下，避免大家踩同樣的坑！
Chrome本身自然是非常占用內(nèi)存的，但是，拖慢Chrome的罪魁禍首就是擴展程序。
應該有不少同學和我一樣，為了各種各樣的原因，在瀏覽器上安裝了很多不同功能的擴展插件。
正是由于這些擴展程序，使得Chrome變得臃腫無比，極大的占用CPU資源。
為了確定擴展程序?qū)hrome的影響，調(diào)查了1000個最受歡迎的Chrome擴展程序在不同網(wǎng)站上的表現(xiàn)，對比它們?nèi)绾斡绊憺g覽器性能和最終用戶體驗。
這些擴展程序中不乏印象筆記、LastPass、Dark Reader這些非常知名插件。
增加網(wǎng)站的CPU使用率
盡管一些比較良心的擴展程序只在必要時運行代碼，但是，依然有許多Chrome擴展程序會在你打開的每個頁面上運行額外的代碼。
在100個最受歡迎的Chrome擴展中，印象筆記對性能的負面影響最大。
它在你打開的每個頁面上花費368毫秒的時間運行代碼。
如果你在這段時間內(nèi)試圖與頁面互動，反應會感覺很遲鈍。
這些瀏覽器擴展中的每一個都被安裝了超過一百萬次。
雖然幾百毫秒聽起來不多，但如果安裝了多個擴展，這對用戶體驗會有很大影響。
瀏覽器擴展的速度影響取決于用戶所打開的網(wǎng)站，上述結(jié)果是在一個非常簡單的網(wǎng)站上收集的。
在蘋果主頁上測試擴展時，我們可以看到，一個名為Dark Reader的擴展花了25秒的時間來分析和調(diào)整圖片，使其更適合黑暗主題。
因此，頁面的加載速度要慢得多。
優(yōu)惠券代碼查找工具Honey也大大影響了電子商務(wù)網(wǎng)站的網(wǎng)站速度，增加了825毫秒的CPU處理時間。
最后，在豐田主頁上進行測試時，我們可以看到Norton Password增加的CPU活動最多，增加了大約1秒鐘的CPU時間。
這個圖表只顯示了對性能影響最大的5個擴展，即使沒有安裝任何擴展，toyota.com也使用了超過3秒的CPU時間，所以要把隨機變化和擴展的影響分開比較困難。
前1000名擴展
讓我們來看看其他一些不太受歡迎，但仍有超過10萬個安裝量的擴展。
Ubersuggest，一個擁有20多萬用戶的營銷工具，為每個頁面增加1.6秒的CPU活動。
Substitutions是一個Chrome擴展，可以自動替換頁面上的某些詞語。在一個小網(wǎng)站上，它對性能影響不大（增加約10毫秒的CPU時間），但在一個較大的頁面上，如toyota.com，它增加了9.7秒的CPU活動。
影響頁面渲染時間
CPU活動可能會導致頁面掛起，變得沒有反應，以及增加電池消耗。
但是，如果處理發(fā)生在最初的頁面加載之后，對用戶體驗的影響可能不會那么大。
一些擴展，如Loom和Ghostery，運行大量的代碼而不影響頁面開始渲染的時間。
然而，其他擴展，如Clever、Lastpass和DuckDuckGo Privacy Essentials在頁面開始加載時就運行代碼，延遲了用戶第一次能夠查看頁面內(nèi)容的時間。
該圖表使用First Contentful Paint指標來衡量這一點。
雖然蘋果公司的主頁通常在一秒鐘內(nèi)完成渲染，但在安裝了Dark Reader的情況下，幾乎需要4秒鐘。
在一個電子商務(wù)網(wǎng)站上，Honey也將頁面內(nèi)容的出現(xiàn)推遲了近半秒。
Avira瀏覽器安全和一些廣告攔截器也會延遲頁面內(nèi)容開始出現(xiàn)的時間。
前1000名擴展
查看1000個最受歡迎的擴展顯示，壹伴-小插件這款新媒體工具延遲了342毫秒的渲染時間，一個名為Outreach Everywhere的銷售工具增加了251毫秒的延遲。
當加載豐田汽車主頁時，一個名為anonymoX的匿名瀏覽代理延遲了超過2秒的渲染時間--然而這并不令人驚訝，因為流量是通過另一個服務(wù)器傳輸?shù)摹?/span>
Avira Browser Safety將渲染延遲了369毫秒。
這不是由于在被訪問的頁面上運行的代碼造成的，而是由擴展程序執(zhí)行的后臺工作造成的。
后臺CPU使用率
Chrome擴展程序不僅可以在你訪問的頁面上運行代碼，還可以在屬于Chrome擴展程序的背景頁面上運行代碼。
例如，這段代碼可以包含阻止對某些域的請求的邏輯。
即使在訪問一個簡單的頁面時，Avira Safe Shopping也會讓CPU工作2秒以上。
在一個更復雜的頁面上，Dashlane密碼管理器和AdGuard AdBlocker也在后臺活動中花費超過2秒。
前1000名擴展
在瀏覽一篇新聞文章時，有三個擴展程序?qū)е鲁^20秒的CPU活動：uberAgent、Dashlane和Wappalyzer。
瀏覽器內(nèi)存消耗
Chrome擴展程序會增加每個被訪問頁面的內(nèi)存使用量，以及擴展程序本身的內(nèi)存消耗。
這可能會損害性能，特別是在低規(guī)格的設(shè)備上。
廣告攔截器和隱私工具通常會存儲大量網(wǎng)站的信息，需要大量的內(nèi)存來存儲這些數(shù)據(jù)。
也就是說，當瀏覽器中打開許多廣告量大的網(wǎng)頁時，它們也能減少整體內(nèi)存消耗。
前1000名擴展
在查看前1000名擴展時，廣告攔截器繼續(xù)占用大量的內(nèi)存，Trustnav廣告攔截器增加了近300MB的內(nèi)存消耗。
廣告攔截器和隱私工具
雖然廣告攔截器會對無廣告的網(wǎng)站造成額外的處理和負擔，但它們確實可以大大加快廣告密集型網(wǎng)頁的速度。本節(jié)研究了15個安裝量超過50萬的廣告屏蔽器。
加載跟蹤器和渲染廣告通常是CPU密集型的，盡管具體影響因網(wǎng)站而異。
新聞網(wǎng)站往往是廣告密集型的，因此本報告將考察兩篇新聞文章的CPU使用情況：
在沒有廣告攔截器的情況下，每頁的CPU時間為17.5秒。即使是性能最低的攔截器（由Trustnav）也能將其減少57%，達到7.4秒。
Ghostery是這項測試中表現(xiàn)最好的廣告攔截器，它將CPU活動減少了90%，平均只有1.7秒。
uBlock Origin的作者Raymond Hill指出，雖然所有的擴展都會減少頁面上的CPU活動，但有些擴展也會在擴展的后臺頁面中引入大量的CPU活動，從而抵消了一些節(jié)省的費用。
在后臺進行的工作不太可能影響網(wǎng)頁本身的性能，但它仍然會使你的電腦整體變慢。
廣告攔截器和隱私工具也能減少43%至66%的數(shù)據(jù)量。
在沒有廣告攔截器的情況下，每篇文章平均發(fā)出793個網(wǎng)絡(luò)請求。有了Ghostery，這個數(shù)字下降了90%，只有83。
在沒有安裝廣告攔截器的情況下，打開一篇新聞文章的平均總瀏覽器內(nèi)存消耗為574 MB。
關(guān)閉后，這個數(shù)字減少了54%，只有260MB。
然而，由于瀏覽器擴展程序的運行總是需要一些內(nèi)存，其他廣告攔截器，如Trustnav公司的廣告攔截器，會稍微增加內(nèi)存消耗。在這種情況下，攔截廣告所節(jié)省的費用并沒有超過廣告攔截器的額外成本。
然而，請記住，這只適用于你有一個單一的廣告密集的頁面打開。如果你有10個標簽打開，都顯示新聞文章，那么你會看到10倍的內(nèi)存節(jié)省，但一般來說，廣告攔截器的內(nèi)存消耗沒有線性增加。
安裝擴展的影響？
在大多數(shù)情況下，多個Chrome擴展程序的影響會累積起來。
這張截圖顯示了安裝了四個擴展程序（axe Web Accessibility Testing、Evernote Web Clipper、LastPass和Skype）后，apple.com的Chrome DevTools頁面性能概況。
你可以看到，CPU任務(wù)一個接一個地運行。如果一個擴展被配置為在頁面開始加載時立即運行，這會延遲頁面的初始渲染。
擴展優(yōu)化效果
我看了96個最受歡迎的擴展，這些擴展都包括在今年的測試和去年的測試中。
取所有變化的平均值顯示，頁面上的CPU時間減少了28毫秒。
然而，2021年的測試是使用Chrome 91運行的，而2020年的測試則使用Chrome 83。隨著時間的推移，Chrome瀏覽器變得越來越快，這些改進可能并不一定意味著Chrome擴展程序本身已經(jīng)得到優(yōu)化。
當用舊版本的Chrome瀏覽器運行今年的測試時，平均改進只有13毫秒。
請注意，這種比較只看一個網(wǎng)站的一個指標（簡單的測試頁面）。
Grammarly、Microsoft Office、Okta Browser Plugin、Avira Safe Shopping和Avira Browser Safety都顯示頁面CPU時間減少了100毫秒以上。最大的減幅出現(xiàn)在Save to Pocket、Loom和Evernote中。
探究
下面，針對個別典型擴展進行逐一探究。
去年，Grammarly在每個頁面上都會加載一個1.3 MB的Grammarly.js文件。
現(xiàn)在，在大多數(shù)網(wǎng)站上，只有112KB的Grammarly-check.js腳本被加載。例如，只有當用戶關(guān)注一個文本區(qū)域時，擴展才會加載完整的Grammarly.js文件。
然而，有些網(wǎng)站仍然總是加載全量的腳本。例如，LinkedIn、Medium、Slack、Reddit、Upwork、Zendesk和其他經(jīng)常輸入文字的網(wǎng)站。
在這些網(wǎng)站上，性能影響將比這些測試中顯示的更大。
Evernote在每個頁面上加載4.3MB的內(nèi)容腳本，比一年前的2.9MB有所增加。因此，解析、編譯和運行這些代碼需要大量的時間。
Outreach Everywhere在每個頁面上加載4.5MB的代碼。然而，這段代碼的性能影響要大得多，因為它是在document_start而不是document_idle上加載的。這意味著代碼在被訪問的頁面開始渲染之前運行，從而延遲了頁面內(nèi)容顯示的時間。
這張圖片顯示了安裝了這兩個擴展的Chrome DevTools性能概況。
本文，只是選取了一些比較有代表性的插件進行了分析，無法逐一列舉。如果你想知道你安裝的插件對瀏覽器的影響有多大，你可以訪問網(wǎng)站：
大家好，我是Jackpop！我花費了半個月的時間把這幾年來收集的各種技術(shù)干貨整理到一起，其中內(nèi)容包括但不限于Python、機器學習、深度學習、計算機視覺、推薦系統(tǒng)、Linux、工程化、Java，內(nèi)容多達5T+，獲取方式：https://pan.baidu.com/s/1eks7CUyjbWQ3A7O9cmYljA（提取碼：0000）
