「閱」——JSCourse 旗下欄目，專門推薦我們?yōu)榇蠹揖奶暨x的優(yōu)質 JavaScript 相關技術內容
大家好，我是小 J，本期為大家分享一個事情——據(jù)統(tǒng)計，現(xiàn)在平均一個 web 頁面體重已經(jīng)重達 3 MB 了。具體怎么回事呢？請繼續(xù)往下看：
一位來自 SpeedCurve （就是大名鼎鼎的 Steve Souders 創(chuàng)辦的公司）的工程師——Tammy Everts 發(fā)布了一篇文章，里面提到根據(jù) HTTP Archive （它會對 Alexa 排名前一百萬的網(wǎng)站進行性能分析，并產(chǎn)生報表）的統(tǒng)計，如今平均一個 web 頁面的重量已經(jīng)重達 3 MB 了。什么概念？要知道在 2011 年這個數(shù)字才 929 KB，也就是 6 年重了 3 倍多（想想你自己的體重 6 年重 3 倍是什么概念）。
那么到底重在哪里呢？或者說到底胖在哪里呢？統(tǒng)計結果顯示，視頻和自定義字體是兩個大頭。這里小編要說明一下，自定義字體目前主要還是英文網(wǎng)站（統(tǒng)計中英文網(wǎng)站是絕大多數(shù)）用的居多，畢竟字符少，中文網(wǎng)站一般不會用自定義中文字體，所以這個指標可能對中文網(wǎng)站不適用。來看看這張圖：
你看上圖中 2017 年很明顯視頻大小明顯變大。再來看看自定義字體的走勢：
網(wǎng)站變胖了，接下來自然會聯(lián)想到性能，來看看下面這張圖
上圖的意思是，隨著頁面重量逐漸變大的過程中，三項性能指標所需的時間變化情況。仔細看，其中 Start render（從瀏覽器觸發(fā)第一次 navigation，也就是輸入 URL 按下回車后，瀏覽器會觸發(fā)一次 navigation，到頁面上第一個非空白內容被渲染出來的時間）幾乎沒有太大的變化，Speed Index（很重要的性能衡量指標，表示頁面渲染平均耗時） 從 500K 多的頁面需要大約 2.4 秒到最后 **20MB **的頁面需要約 10 秒。而變化最大的就是 Onload（這個不用多做介紹了，就是到 window.onload 觸發(fā)所需的時間，也就是整個頁面內容都加載完畢了，包括圖片和視頻等資源）了。所以頁面變重對性能影響是很明顯的。
事實上，你總是希望頁面可以呈現(xiàn)更多豐富的內容，也希望能夠以最快的速度呈現(xiàn)給用戶。所以小編始終認為這兩者沒有辦法兼得，只能進行權衡和取舍，然后在這基礎上實施有效的優(yōu)化手段。這里分享這篇文章是為了讓大家認識到這個客觀的事實，大家也可以結合自己的業(yè)務場景對頁面進行瘦身。我們之后會專門制作和性能優(yōu)化相關的課程，幫助大家了解這部分的技術點。
好了，以上就是本期內容了，大家如果想詳細了解 Tammy Everts 的文章，可以點擊原文 《The average web page is 3MB. How much should we care?》 進行閱讀。
關注「jscourse」微信公眾號第一時間獲取最新課程和學習資源哦！
