去掉 jQuery 後，我們的網站性能起飛，速度快了 17-

作者 | 明知山、閆園園

今年 3 月，英國公共部門信息網站 GOV.UK 前端開發主管 Matt Hobbs 宣佈該公司刪除了 jQuery 作爲所有前端應用程序的依賴項。近期，GOV.UK 高級前端開發工程師 Andy Sellick 發佈了兩篇博文詳細論述該網站刪除 jQuery 的原因、具體操作以及帶來的影響。

GOV.UK 是英國政府的在線主頁，這意味着它需要適用於所有用戶，不論他們的設備、連接速度如何。因此，開發團隊也一直在尋找改進性能和用戶體驗的方法。

我們如何在 GOV.UK 上移除 jQuery

GOV.UK 主要由靜態頁面組成，JavaScript 主要用於進行分析、cookie 和小型用戶界面交互。其中，jQuery 被廣泛應用在網站中，比如面向公衆的腳本和測試文件部分。當然應用大多使用了 jQuery 的諸多特性，特別是 Ajax 部分。

使用 jQuery 的缺點是它必須包含在頁面資源中，這會減慢網站的加載速度，GOV.UK 的頁面大小不一，但主頁約爲 246 kB ，其中 32 kB 爲 jQuery。並且 GOV.UK 在之前還使用的是舊版本的 jQuery。於是，開發團隊評估了項目情況之後，做出一個重大決定——與其升級新版 jQuery，不如直接將它從項目中刪除。

首先，開發團隊不再在 GOV.UK 中引入任何新的 jQuery。

其次，團隊中前端開發者和後端開發者都投入到這份工作中。雖然後端開發者通常並不會編寫大量 JavaScript ，但經過培訓，他們意識到這項任務的重要性並且很快取得了重要進步。

經過一系列努力，開發團隊很快發現整個應用程序基本完成了移除 jQuery 的任務，並且他們從中還發現這個額外的努力可能會將項目的開發直接縮短几年的時間。那麼，這一改變對於用戶來說又意味着什麼呢？

去掉 jQuery 究竟影響有多大

圖像數據與壓縮數據

上面提到，jQuery 庫是一個被壓縮和縮小到只有 32KB 的 JavaScript。雖然與幾兆字節大小的圖像相比，它看起來並不大。但是，從性能的角度來看，當它出現在每一個網頁上時，已經相當於大量數據。另外，圖像數據和壓縮的 JavaScript 數據之間有很大的區別。瀏覽器和設備處理這兩種數據的方式非常不同。

JavaScript 被稱爲 “阻塞渲染” 資源，瀏覽器在遇到 JavaScript 時會經歷一個多步驟的過程，包括下載、解壓、解析和執行。這一切都需要消耗設備的 CPU 和內存。根據設備和網絡連接的不同，這些任務可能會非常緩慢和消耗能量。

問題是，在這個過程中，向設備屏幕繪製像素的任務必須暫停，直到 JavaScript 執行完成。完成後，瀏覽器可以繼續爲頁面的其餘部分繪製像素。

相反，圖像和圖像數據不是 “阻塞渲染” 的，也就是說，在並行下載額外的圖像數據時，網頁的其他部分可以正常繪製。因此，一個 32KB 的圖像比 32KB 的壓縮 JavaScript 對性能的影響要小得多，對於使用較慢、較老、較便宜的低配置設備的用戶來說尤其如此。

拯救低配置設備

低配置設備通常指舊的筆記本電腦和平板電腦，或者 “經濟型” 移動設備（通常是數據流量有限的 Android 設備）。

值得一提的是，目前開發團隊從用戶設備收集的匿名真實用戶監控（Real User Monitoring，RUM）數據顯示，GOV.UK 已經是一個非常快的網站。但分佈圖（見上圖）也顯示，有些用戶的頁面加載時間高達 2.35 秒。仔細檢查了這些用戶的 RUM 性能數據，團隊發現：

從上面的統計數據來看，可以認爲很多 Android 用戶使用的是 CPU 速度和內存容量都很有限的低配置設備。基於這樣的假設，刪除 32KB 的壓縮 JavaScript 會對性能產生什麼影響？

對性能影響進行測試

“基於實驗室” 的性能測試在這個時候起到了很大的作用。開發團隊每天使用特定的模擬設備和連接速度測試 GOV.UK 的頁面。因爲他們每天都重複這些測試，所以能夠監測網站所做出的變更對於用戶來說究竟產生了怎樣的影響。

例如，對於一個使用低配置設備和 2G 移動網絡訪問統一福利金起始頁的模擬用戶，可以從圖中清楚地看到去掉 jQuery 前後的性能對比。

之所以選擇統一福利金頁面，是因爲這個頁面是 GOV.UK 訪問次數最多的頁面。如上圖所示，頁面將像素完全繪製到屏幕上所需的時間（視覺完成度）從 11.3 秒下降到 9.4 秒（速度提升了 17%）。

除了在視覺完成度方面的改進，頁面加載時間的改進也很明顯。從下圖可以看出，頁面完全加載時間從 20.42 秒下降到 18.75 秒（縮短了 8%），頁面加載總時間從 19.44 秒下降到 17.75 秒（縮短了 9%）。

最後，頁面交互性能指標也有顯著的改進。交互性指標對用戶來說很重要，因爲它們決定了用戶何時可以開始與頁面發生交互。從下圖可以看出，交互時間從 11.34 秒下降到 9.43 秒（縮短了 17%），設備第一次 CPU 空閒（First CPU Idle）從 11.32 秒下降到 9.42 秒（縮短了 17%）。

寫在最後

jQuery 於 2006 年推出，一度曾在 JavaScript 世界裏風頭無兩。但事實上，近些年對於 “jQuery 是否已死” 的討論卻從未停止。2018 年，GitHub 宣佈從 GitHub.com 的前端代碼中完全移除了 jQuery，除此之外， jQuery 的主要用武之地之一，著名的 CSS 框架 Bootstrap 在最新版本中也停用了 jQuery。

不過即便 jQuery 在近些年不再受到歡迎，但據 Wappalyzer 的分析報告顯示，在所有使用了 JavaScript 庫的網站中，jQuery 仍然佔據着超過 34% 的比例。可見，jQuery 在許多場景中仍然是非常有幫助的，當然如果你想把 Web 應用的性能優化到極致，正如 GOV.UK 團隊實踐的那樣，jQuery 並不可取。

只能說，jQuery 從始至終都更適合那些重內容而非功能的網站。

參考鏈接：

https://insidegovuk.blog.gov.uk/2022/08/11/how-and-why-we-removed-jquery-from-gov-uk/

https://insidegovuk.blog.gov.uk/2022/08/15/the-impact-of-removing-jquery-on-our-web-performance/

https://tehub.com/a/8zSJjaGliy

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/uLJyxmN7hIdk6RLeqy4iEA

猜你喜歡