优化性能

有效优化内容

我们的网页应用的内容、目标和功能都在不断成长 - 这样很好。然而,我们拼命地让这个网站不断丰满,却导致了另一个趋势:每个应用中的每个步骤所下载的数据总量不断上涨。为了实现优异性能,我们需要优化每一比特数据的传输过程!

一个现代网页应用应该是什么样的?HTTP Archive 可以帮助我们回答这个问题。这个项目跟踪了世界上最流行的网站(从Alexa排名前一百万的网站中选取超过30万个站点),周期性检查这些网站是如何建设的,并记录、统计分析每个目标的资源数量、内容类型和元数据

HTTP Archive trends

第50百分位数 第75百分位数 第90百分位数
HTML 13 KB 26 KB 54 KB
图片 528 KB 1213 KB 2384 KB
JavaScript 207 KB 385 KB 587 KB
CSS 24 KB 53 KB 108 KB
其他 282 KB 308 KB 353 KB
合计 1054 KB 1985 KB 3486 KB

上面数据展示了2013年1月到2014年1月之间,访问网上流行的网站目标所需下载数据量的增长趋势,并不是每个网站都是按照此比率增长,也不是说每个网站都需要这么多的数据量,因此我们选了了三个不同的百分位数:第50(中位),第75和第90。

2014年初的中位网站总共需要75个请求,共计1054KB传输数据,而这个总数据(和请求数)在去年一年间一直在稳步增长。这件事本身并不令人惊讶,但是它确实带来性能上的潜在问题:是的,网速正在不断增长,但是在不同国家,其增长速率是不同的,很多用户仍旧受制于流量上限和高昂的套餐费用,这之中手机用户尤甚。

和那些电脑软件不同,网页应用并不需要一个独立的安装过程,它只需要输入RUL地址,然后我们就可以开始运行应用了——这就是网络应用的一个关键特性。然而要想获得这种瞬间达成的效果,我们非得先获取那些加起来足有几MB的数据,然后在几百毫秒内,把这几十上百份资源集合起来才行。

在这些要求下做出一个拥有即时性的网络体验绝非易事,这就是为什么有效优化内容如此关键了:去除不必要的下载,通过不同的压缩技术优化每份资源的传输代码,尽可能借助缓存以去掉多余的下载。

更多课程

  1. 去除冗余下载 — 最快和最优化的资源是那些未经传送的资源。你最近有没有检查过你的资源?你不仅应该检查,而且应该定期检查,以确保所有资源都有助于传递更好的用户体验。

  2. 优化编码以及文本资源传输体积。 — 我们的网页应用的内容、目标和功能都在不断成长 - 这样很好。然而,我们拼命地让这个网站不断丰满,却导致了另一个趋势:每个应用中的每个步骤所下载的数据总量不断上涨。为了实现优异性能,我们需要优化每一比特数据的传输过程!

  3. 图像优化 — 图像通常是网页中需要下载字节最多的部分,并且通常占据着一些重要的视觉空间。因此,优化图像通常可以为你的网站带来最大量的数据节省和性能提升:浏览器需要下载的数据量越少,客户端的带宽压力就越小,并且浏览器可以下载并在屏幕内渲染有效内容的速度越快。

  4. HTTP缓存 — 通过网络获取内容是昂贵且费时的:大量的响应需要客户端与服务器之间的多次往返,这样使得浏览器可以处理那些内容的时机被延后了,另外也让访问者承担了数据消耗。因此,使用缓存和再次使用之前获取过的资源是优化性能的一个关键方向。

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部