5G 有可能會使 Web 明顯變慢[每日前端夜話0xC2]

2019 年 10 月 5 日
筆記

正文共：1872 字

預計閱讀時間：10 分鐘

作者：Scott Jehl

翻譯：瘋狂的技術宅

來源：filamentgroup

5G 的小圖標開始逐漸出現在世界各地的手機屏幕上。如果你已經開始使用了，可能會注意到，感覺上其速度並沒有超過 4G 一大截，我同意這個觀點。據了解，這是因為初期基礎設施過渡的阻礙，但隨着它的成熟，預計 5G 會極大的提高網絡速度。在2019年預測的下載速度為平均每秒 100M 到 1G 比特【https://www.quora.com/How-fast-is-a-5G-network】。以這樣的速度，你下載朋友的整個唱片的時間與現在加載一個頁面的時間差不多。未來是令人驚訝的！

而且這不只是增加了帶寬。延遲也將通過 5G 得到改善，延遲一直是 Web 臭名昭着的性能瓶頸之一。這意味着我們首次訪問某個網站時，進行連接的時間可能會明顯降低。同樣，太神奇了！

所以，網絡性能的提升代表更快的速度。這應該能過解決網絡的性能問題吧？

應該是這樣，但我認為不會，至少不是很快。如果按照最近的趨勢繼續下去，對於一般的人來說 5G 可能會使 Web 性能更糟，而不是更好。

更差？怎麼會？！

更快的網絡應該可以解決性能問題，但到目前為止，他們對 Web 產生了一種有趣的、無意識的影響。這是因為從歷史上看，更快的網絡速度使開發人員能夠向用戶提供更多代碼 —— 特別是更多的 JavaScript 代碼。

在2011年至2019年期間，全世界 4G 覆蓋率從5％擴大到79％【https://www.ericsson.com/en/mobility-report/mobility-visualizer?f=16&ft=2&r=1&t=2,19&s=14&u=4&y=2011,2019&c=6】。在同一時期內，傳輸給移動設備的 JavaScript 平均大小中位數增加了611％，從 52kb 增加到 372.9 KB【https://httparchive.org/reports/page-weight#bytesJs】。當然，這是一種相關性，許多因素促成了這種增長。是的，在此期間，網站也變得更加互動，這可能會導致 JavaScript 使用量的增加。此外，響應式設計得到了廣泛使用，這意味着許多站點開始向所有設備發送單個 JavaScript 負載。但要明確的是，2011 年的「桌面」網站平均只比移動版本的網站多發送了大約 50kb 的JavaScript。一般來說，從那時起，UI 模式在網絡上的變化並不大。例如，我們有幸幫助建立了 2010 年推出的高度跨設備的 Boston Globe 網站，而今天的新聞網站也有相似的感覺。最後，這種趨勢仍在繼續：即使在過去幾年中，JavaScript 的平均傳輸大小也增加了 50％以上。

在我們去討論 JavaScript 框架之前，這些增加似乎並不完全是因為 Web 的用戶界面功能。實際上大部分來自第三方腳本 706％的增幅【https://speedcurve.com/blog/javascript-growth/】。可以肯定的是，這些第三方請求可能是 JavaScript 框架，但大多數情況下，它們是跟蹤器、A/B 庫、個性化腳本、廣告和聊天機械人，所有這些都經常會啟動第四方和第五方的請求。

因此，隨着網絡的改進，JavaScript 規模也在不斷膨脹。不過你可能會認為，如果所有這些代碼的下載速度足夠快，它就相對無害了吧？好吧，不幸的是並沒有。與我們提供的其他類型的代碼相比，JavaScript 的大小是獨一無二的。

因此，JavaScript 的規模激增的 Web 得到了改善。不過，你可能會認為，如果所有的代碼下載速度不夠快，這是相對無害的，對不對？唉，可惜沒有。相比於其他種類的，我們提供的代碼，JavaScript是唯一昂貴的它的重量。

「在我的手機上看上去很好」

對開發人員的便利很容易讓我們誤入歧途。

在目前仍在使用的普通設備上，200kb 的 JavaScript（壓縮用於傳輸）可能需要6秒或更長時間才能解析 —— 這不包括在通過網絡下載代碼所花費的時間內。這聽起來像是一個很大的 JavaScript，請記住，就平均而言，我們實際提供的功能幾乎是它的兩倍【https://httparchive.org/reports/page-weight#bytesJs】。在對 JavaScript 解析期間，網頁可能是可見的但不能交互，或者它可能完全是空白的（如果腳本是以阻止頁面渲染的典型方式進行引用的話）。這兩種情況都很糟糕，更令人擔憂的是許多在 Web 上工作的人甚至可能都沒有注意到這個問題。

普通設備不是上千美元的帶有3個鏡頭的全新 iPhone。即使在美國，普通設備也是你在亞馬遜暢銷產品上看到的那種設備，大約 130 美元一個。它可能是一部 iPhone，更有可能是較舊的設備，最有可能的是處理器相對不足的中檔 Android。

即使人們用上了新的快速網絡，他們也很可能會對我們發送的代碼感到窒息，從而使 5G 的速度提升失去意義。

那些沒有 5G 的人呢？

5G 的覆蓋需要更新大規模的基礎設施，並且可能會首先部署在富裕的發達地區。在的農村和發展中地區不太可能很快用上 5G。這意味着非 5G 地區的人們不僅會在他們動力不足的設備上體驗 Web，而且他們還會通過舊的 3G 或 4G 網絡下載越來越多的代碼。

該怎麼辦？

這個問題出在我們身上。是的，我們需要更好地確定資源交付的優先順序，但最重要的是，我們需要停止提供如此多的 JavaScript。我們需要審核自己的腳本庫，並定期審查第三方集成，因為有許多包被放棄或只是短暫的使用。也許我們甚至可以刪除舊的第三方腳本，看看是否有人抱怨。我們可以測試自己對跟蹤和個性化的依賴，像紐約時報那樣提供常規的、無特定目標的廣告實際上也可以增加收入（如果是這樣，請刪除不再需要的腳本）！我們可以運行 Calibre 【https://calibreapp.com/】和 SpeedCurve 【https://speedcurve.com/】等服務來監控我們的績效預算，讓團隊中的每個人都參與到績效流程中。我們應該盡一切努力讓團隊成員了解他們自己對所有角色的影響。

隨着網絡的改進，有一個巨大的機會來改善我們構建的 Web，要麼抓住這個機會，要麼浪費它。

原文：https://www.filamentgroup.com/lab/5g/