绪言 前端性能的重要性 && HTTP概述

1. 性能黄金法则

    只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。

 

2. 时间分配：

    a. 有缓存：没有太多的下载活动，HTML文档下载后将阻塞HTTP请求，先进行解析HTML、JavaScript、CSS，并从缓存中获取组件；

    b. 大量的HTTP请求并行发生：因为使用了多个不同的主机名；

　 c. HTML请求得到响应后（不需要响应完全结束）就开始解析（同时构造DOM树）并开始下载解析出的组件；

    d. 在请求脚本时不会发生并行请求：大多情况下（defer，async除外）浏览器在下载脚本时会阻塞其他其他组件下载（页面呈现都会被阻塞）；

　 e. HTML和其他组件都有DOMContentLoaded（DOM树构造好） 和 load 两种事件（内部组件都下载完成）；

    e. 302重定向，并且响应头没有缓存信息，此时浏览器无法缓存该响应。

 

3. HTTP概述

    HTTP规范由W3C和IETF进行编制， 文档是RFC 2616。HTTP1.1 是今天比较常见的版本。

    HTTP是一种客户端/服务器协议，由请求和响应构成。浏览器向一个特定的URL发送HTTP请求，URL对应的宿主服务器发回HTTP响应。和许多Internet服务一样，该协议使用简单的纯文本格式。请求类型有GET、POST、HEAD、PUT、DELETE、OPTIONS和TRACE。

    GET请求包含一个URL，然后是头。HTTP响应包含状态码、头和响应体。

 

4. HTTP压缩

    浏览器可以使用Accept-Encoding头来声明它支持的压缩。服务器用Content-Encoding头来确认响应已被压缩。

 

5. 条件GET请求

    如果浏览器在其缓存中保留了组件的副本，但并不确定它是否有效，就会生成一个GET请求。如果确认缓存的副本仍然有效，浏览器就使用缓存中的副本，这会得到更小的响应和更快的用户体验。浏览器会使用If-Modified-Since头将最后修改时间发给服务器。

    典型情况下，缓存副本的有效性源自其最后修改时间。基于响应中的Last-Modified头，浏览器可以知道组件的最后修改时间。如果组件的Last-Modified和If-Modefined-Since一致，服务器还会返回一个“304 Not Modified”状态码并不再发送响应体。ETag和If-None-Match头是进行条件GET请求的另外一种方式。

 

6. Expires

    Expires头通过明确指出浏览器是否可以使用组件的缓存副本来消除这个条件GET的需要。Expires指出缓存组件过期时间。

 

7. Keep-Alive

    HTTP构建在TCP之上。早期每个HTTP请求都要打开一个socket连接。这样做效率很低，因为一个web页面中很多http请求都指向同一个服务器。持久连接的引入解决了多对一请求服务器导致的socket连接低效性问题。它使浏览器可以在一个单独的连接上进行多个请求。浏览器和服务器使用Connection：Keep-Alive头来支持持久连接，发送Connection:close头来关闭连接。Connection:Keep-Alive并不是HTTP1.1必需的，但很多浏览器和服务器都支持它。

    HTTP 1.1中定义的管道可以在一个单独的socket上发送多个请求而无需等待响应，管道性能要优于持久连接。但是目前浏览器大多不支持。持久连接对HTTPS更重要。

    Note：HTTP是单工通信，浏览器请求服务器后，然后就等待服务器向浏览器发送数据，直到服务器发送数据结束，服务器关闭连接，然后浏览器关闭请求（Connection:close时会关闭连接）。浏览器只能发送请求，请求后不能向服务器发送数据。而Web Sockets协议则是能够提供全双工、双向通信。