Web性能优化:What? Why? How?
为什么要提升web性能?
web性能对于用户体验有及其重要的影响,根据著名的`2-5-8`原则:
- 当用户在2秒以内得到响应,会感觉系统的响应非常快
- 当用户在2-5秒之内得到响应,会感觉系统的响应速度还可以
- 当用户在5-8秒之内得到响应,会感觉系统的响应非常慢,但还可以接受
- 当用户在8秒之后都没有得到响应,会感觉系统糟透了,甚至系统已经挂掉;要么打开竞争对手的网站,要么重新发起第二次请求
凡事都需要研究,通过科学的研究我们就可以找到事物的发展规律。这里要感谢雅虎的工程师总结的14条前端优化法则,使得我们可以站在巨人的肩膀上。《高性能网站建设》这本书中的14条优化原则,总结起来主要是以下个方面的优化:
- 减少HTTP请求
- 页面内部优化
- 启用缓存
- 减少下载量
- 网络连接上的优化
为什么减少HTTP请求可以提高Web性能?
要回答这个问题,我们就要了解当浏览器向服务器发送一个http请求知道获取数据都经历哪些过程:
开启一个链接(tcp/ip的三次握手过程) -》 发送请求 -》 等待(网络延迟跟服务器的处理时间)-》 下载数据
我们看一下百度首页中的http请求在各阶段耗费的时间,上面不同的颜色代表下图中的不同阶段
可以看到除了图片之外,其余大部分http请求的事件花在了建立连接与等待阶段。
http协议建立在TIC/IP协议之上,在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接。 简单来说三次握手就是一个身份确认的过程:
(<第一次握手:主机A发送位码为syn=1,随机产生seq number=1234567的数据包到服务器,主机B由SYN=1知道,A要求建立联机;<)
<晴儿:你是潇哥哥吗,我是晴儿
(<第二次握手:主机B收到请求后要确认联机信息,向A发送ack number=(主机A的seq+1),syn=1,ack=1,随机产生seq=7654321的包<)
潇剑:这货是谁,一箫一剑走江湖,下一句是什么?
(第三次握手:主机A收到后检查ack number是否正确,即第一次发送的seq number+1,以及位码ack是否为1,若正确,主机A会再发送ack number=(主机B的seq+1),ack=1,主机B收到后确认seq值与ack=1则连接建立成功。)
晴儿:这首诗。。。你真的是潇哥哥,一萧一剑走江湖,千古情愁酒一回。。。
潇剑:晴儿,你真的是晴儿。。。。
(啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪。。。。。。。。。。。。)
言归正传,这个过程也是需要消耗时间的,在百度首页找到一个极端的例子:
而等待的时间通常也大于内容下载的时间,这里同样找到一个极端例子:
由此我们可以得出结论: 一个http请求绝大多数的时间消耗在了建立连接跟等待的时间,优化的方法是减少http请求。