建立TCP连接后，浏览器发起http请求

如果浏览器存储了该域名下的Cookies，那么会把Cookies放入HTTP请求头里发给服务器。

下面是Chrome发起的http请求报文头部信息:

  1. GET / HTTP/1.1
  2. Host: www.tiiit.cn
  3. Connection: keep-alive
  4. Cache-Control: max-age=0
  5. User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.26 Mobile Safari/537.36
  6. Upgrade-Insecure-Requests: 1
  7. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
  8. DNT: 1
  9. Accept-Encoding: gzip, deflate, br
  10. Accept-Language: zh-CN,zh;q=0.9
  11. If-None-Match: W/"2d3-164cc2ce712"
  12. If-Modified-Since: Tue, 24 Jul 2018 12:04:12 GMT

服务器端响应http请求，浏览器得到html代码

服务器端WEB程序接收到http请求以后，就开始处理该请求，处理之后就返回给浏览器html文件。

用Chrome浏览器看到的响应头信息：

  1. HTTP/1.1 304 Not Modified
  2. Server: nginx
  3. Date: Sun, 21 Oct 2018 16:17:15 GMT
  4. Connection: keep-alive
  5. X-Powered-By: Express
  6. Cache-Control: public, max-age=2592000
  7. Last-Modified: Tue, 24 Jul 2018 12:04:12 GMT
  8. ETag: W/"2d3-164cc2ce712"

浏览器解析html代码，并请求html代码中的资源

浏览器拿到index.html文件后，就开始解析其中的html代码，遇到js/css/image等静态资源时，就向服务器端去请求下载。
浏览器会使用多线程下载（每个浏览器的线程数不一样），这个时候就用上keep-alive特性了，建立一次HTTP连接，可以请求多个资源，下载资源的顺序就是按照代码里的顺序。
但是由于每个资源大小不一样，而浏览器又多线程请求资源，所以显示的顺序并不一定是代码里面的顺序。

浏览器在请求未过期的静态资源时，向服务器端发起一个http请求，询问自从上一次修改时间到现在有没有对资源进行修改。
如果服务器端返回304状态码，告诉浏览器服务器端没有修改，那么浏览器会直接读取本地的该资源的缓存文件。

http 请求与响应 - 图1