作者：Scott Jehl翻譯：瘋狂的技術宅
原文：https://www.filamentgroup.com...
未經允許嚴禁轉載
5G 的小圖標開始逐漸出現在世界各地的手機屏幕上。如果你已經開始使用了，可能會注意到，感覺上其速度並沒有超過 4G 一大截，我同意這個觀點。據瞭解，這是因爲初期基礎設施過渡的阻礙，但隨着它的成熟，預計 5G 會極大的提高網絡速度。在2019年預測的下載速度爲平均每秒 100M 到 1G 比特。以這樣的速度，你下載朋友的整個唱片的時間與現在加載一個頁面的時間差不多。未來是令人驚訝的！
而且這不只是增加了帶寬。延遲也將通過 5G 得到改善，延遲一直是 Web 臭名昭着的性能瓶頸之一。這意味着我們首次訪問某個網站時，進行連接的時間可能會明顯降低。 同樣，太神奇了！
所以，網絡性能的提升代表更快的速度。這應該能過解決網絡的性能問題吧？
應該是這樣，但我認爲不會，至少不是很快。如果按照最近的趨勢繼續下去，對於一般的人來說 5G 可能會使 Web 性能更糟，而不是更好。
更差？怎麼會？！
更快的網絡應該可以解決性能問題，但到目前爲止，他們對 Web 產生了一種有趣的、無意識的影響。這是因爲從歷史上看，更快的網絡速度使開發人員能夠向用戶提供更多代碼 —— 特別是更多的 JavaScript 代碼。
在2011年至2019年期間，全世界 4G 覆蓋率從5％擴大到79％。在同一時期內，傳輸給移動設備的 JavaScript 平均大小中位數增加了611％，從 52kb 增加到 372.9 KB。當然，這是一種相關性，許多因素促成了這種增長。是的，在此期間，網站也變得更加互動，這可能會導致 JavaScript 使用量的增加。此外，響應式設計得到了廣泛使用，這意味着許多站點開始向所有設備發送單個 JavaScript 負載。但要明確的是，2011 年的“桌面”網站平均只比移動版本的網站多發送了大約 50kb 的JavaScript。一般來說，從那時起，UI 模式在網絡上的變化並不大。例如，我們有幸幫助建立了 2010 年推出的高度跨設備的 Boston Globe 網站，而今天的新聞網站也有相似的感覺。最後，這種趨勢仍在繼續：即使在過去幾年中，JavaScript 的平均傳輸大小也增加了 50％ 以上。
在我們去討論 JavaScript 框架之前，這些增加似乎並不完全是因爲 Web 的用戶界面功能。 實際上大部分來自第三方腳本 706％ 的增幅。 可以肯定的是，這些第三方請求可能是 JavaScript 框架，但大多數情況下，它們是跟蹤器、A/B 庫、個性化腳本、廣告和聊天機器人，所有這些都經常會啓動第四方和第五方的請求。
因此，隨着網絡的改進，JavaScript 規模也在不斷膨脹。 不過你可能會認爲，如果所有這些代碼的下載速度足夠快，它就相對無害了吧？ 好吧，不幸的是並沒有。 與我們提供的其他類型的代碼相比，JavaScript 的大小是獨一無二的。
因此，JavaScript 的規模激增的 Web 得到了改善。不過，你可能會認爲，如果所有的代碼下載速度不夠快，這是相對無害的，對不對？唉，可惜沒有。相比於其他種類的，我們提供的代碼，JavaScript是唯一昂貴的它的重量。
“在我的手機上看上去很好”
對開發人員的便利很容易讓我們誤入歧途。
在目前仍在使用的普通設備上，200kb 的 JavaScript（壓縮用於傳輸）可能需要6秒或更長時間才能解析 —— 這不包括在通過網絡下載代碼所花費的時間內。 這聽起來像是一個很大的 JavaScript，請記住，就平均而言，我們實際提供的功能幾乎是它的兩倍。 在對 JavaScript 解析期間，網頁可能是可見的但不能交互，或者它可能完全是空白的（如果腳本是以阻止頁面渲染的典型方式進行引用的話）。 這兩種情況都很糟糕，更令人擔憂的是許多在 Web 上工作的人甚至可能都沒有注意到這個問題。
普通設備不是上千美元的帶有3個鏡頭的全新 iPhone。 即使在美國，普通設備也是你在亞馬遜暢銷產品上看到的那種設備，大約 130 美元一個。它可能是一部 iPhone，更有可能是較舊的設備，最有可能的是處理器相對不足的中檔 Android。
即使人們用上了新的快速網絡，他們也很可能會對我們發送的代碼感到窒息，從而使 5G 的速度提升失去意義。
那些沒有 5G 的人呢？
5G 的覆蓋需要更新大規模的基礎設施，並且可能會首先部署在富裕的發達地區。在的農村和發展中地區不太可能很快用上 5G。 這意味着非 5G 地區的人們不僅會在他們動力不足的設備上體驗 Web，而且他們還會通過舊的 3G 或 4G 網絡下載越來越多的代碼。
該怎麼辦？
這個問題出在我們身上。 是的，我們需要更好地確定資源交付的優先順序，但最重要的是，我們需要停止提供如此多的 JavaScript。 我們需要審覈自己的腳本庫，並定期審查第三方集成，因爲有許多包被放棄或只是短暫的使用。 也許我們甚至可以刪除舊的第三方腳本，看看是否有人抱怨。 我們可以測試自己對跟蹤和個性化的依賴，像紐約時報那樣提供常規的、無特定目標的廣告實際上也可以增加收入（如果是這樣，請刪除不再需要的腳本）！ 我們可以運行 Calibre 和 SpeedCurve 等服務來監控我們的績效預算，讓團隊中的每個人都參與到績效流程中。 我們應該盡一切努力讓團隊成員瞭解他們自己對所有角色的影響。
隨着網絡的改進，有一個巨大的機會來改善我們構建的 Web，要麼抓住這個機會，要麼浪費它。
本文首發微信公衆號：前端先鋒
歡迎掃描二維碼關注公衆號，每天都給你推送新鮮的前端技術文章
歡迎繼續閱讀本專欄其它高贊文章：
- 深入理解Shadow DOM v1
- 一步步教你用 WebVR 實現虛擬現實遊戲
- 13個幫你提高開發效率的現代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的？從調用棧到Promise你需要知道的一切
- WebSocket實戰：在 Node 和 React 之間進行實時通信
- 關於 Git 的 20 個面試題
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什麼？
- 30分鐘用Node.js構建一個API服務器
- Javascript的對象拷貝
- 程序員30歲前月薪達不到30K，該何去何從
- 14個最好的 JavaScript 數據可視化庫
- 8 個給前端的頂級 VS Code 擴展插件
- Node.js 多線程完全指南
- 把HTML轉成PDF的4個方案及實現