[阅 #4] 你知道吗？现在平均一个 web 页面已经重达 3

「阅」——JSCourse 旗下栏目，专门推荐我们为大家精心挑选的优质 JavaScript 相关技术内容

大家好，我是小 J，本期为大家分享一个事情——据统计，现在平均一个 web 页面体重已经重达 3 MB 了。具体怎么回事呢？请继续往下看：

一位来自 SpeedCurve （就是大名鼎鼎的 Steve Souders 创办的公司）的工程师——Tammy Everts 发布了一篇文章，里面提到根据 HTTP Archive （它会对 Alexa 排名前一百万的网站进行性能分析，并产生报表）的统计，如今平均一个 web 页面的重量已经重达 3 MB 了。什么概念？要知道在 2011 年这个数字才 929 KB，也就是 6 年重了 3 倍多（想想你自己的体重 6 年重 3 倍是什么概念）。

图片来自 https://speedcurve.com/blog/web-performance-page-bloat/

那么到底重在哪里呢？或者说到底胖在哪里呢？统计结果显示，视频和自定义字体是两个大头。这里小编要说明一下，自定义字体目前主要还是英文网站（统计中英文网站是绝大多数）用的居多，毕竟字符少，中文网站一般不会用自定义中文字体，所以这个指标可能对中文网站不适用。来看看这张图：

图片来自 https://speedcurve.com/blog/web-performance-page-bloat/

你看上图中 2017 年很明显视频大小明显变大。再来看看自定义字体的走势：

图片来自 https://speedcurve.com/blog/web-performance-page-bloat/

网站变胖了，接下来自然会联想到性能，来看看下面这张图

图片来自 https://speedcurve.com/blog/web-performance-page-bloat/

上图的意思是，随着页面重量逐渐变大的过程中，三项性能指标所需的时间变化情况。仔细看，其中 Start render（从浏览器触发第一次 navigation，也就是输入 URL 按下回车后，浏览器会触发一次 navigation，到页面上第一个非空白内容被渲染出来的时间）几乎没有太大的变化，Speed Index（很重要的性能衡量指标，表示页面渲染平均耗时） 从 500K 多的页面需要大约 2.4 秒到最后 **20MB **的页面需要约 10 秒。而变化最大的就是 Onload（这个不用多做介绍了，就是到 window.onload 触发所需的时间，也就是整个页面内容都加载完毕了，包括图片和视频等资源）了。所以页面变重对性能影响是很明显的。

事实上，你总是希望页面可以呈现更多丰富的内容，也希望能够以最快的速度呈现给用户。所以小编始终认为这两者没有办法兼得，只能进行权衡和取舍，然后在这基础上实施有效的优化手段。这里分享这篇文章是为了让大家认识到这个客观的事实，大家也可以结合自己的业务场景对页面进行瘦身。我们之后会专门制作和性能优化相关的课程，帮助大家了解这部分的技术点。

好了，以上就是本期内容了，大家如果想详细了解 Tammy Everts 的文章，可以点击原文 《The average web page is 3MB. How much should we care?》 进行阅读。

关注「jscourse」微信公众号第一时间获取最新课程和学习资源哦！