×

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

96
goddyzhao
2017.09.08 20:45 字数 903

「阅」——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/

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

图片来自 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/

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

图片来自 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」微信公众号第一时间获取最新课程和学习资源哦!

jscourse
Web note ad 1