从URL到页面到页面展现发生了什么？

总共六个部分：

1. 输入URL;
2. 解析域名；
3. 构造并发送HTTP请求；
4. HTTP报文传输过程；
5. 服务器接受并处理HTTP报文；
6. 服务器构造并发送响应报文；
7. 浏览器接收报文，并开始构建页面

2.解析域名

互联网中的每个服务器都有一个IP，IP地址是由一串数字组成，由于不便于用户记忆，所以折中采用域名绑定IP的方式，浏览器需要解析域名对应的IP。

1. 浏览器会搜索浏览器自身的DNS缓存，看自身缓存中是否有对应的条目，如果有且没有过期则解析到此结束；
2. 如果浏览器自身的缓存中没有找到对应的条目，那么浏览器会搜索系统中的DNS缓存，如果有且没有过期则解析到此结束；
3. 如果还没有，那么浏览器就会发起一个DNS的系统调用，像本地配置的首选DNS服务器（一般为电信运营商）发起域名解析请求。这里，DNS解析有两种方式：递归解析（默认方式），迭代解析。

   递归解析

jirengu
如上图，客户端发送请求后，由本地服务器完成剩下的工作，最后返回最终结果。本地服务器如果没有该IP，就会向根服务器发送请求，根服务器会将顶级域名服务器的DNS地址给本地服务器，依次最后查询到域名对应的IP。

迭代解析

[图片上传失败...(image-7fdc60-1513085626517)]
迭代解析中，客户端参与了所有过程，最终查询到IP地址。

3.构造并发送HTTP请求

客户端查询到IP之后，就会构造并发送HTTP请求。HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。HTTP是一种无状态协议，无状态是指浏览器和服务器之间不需要建立持久的连接，HTTP遵循请求（request）/应答（response）模型。
在HTTP工作之前，浏览器首先需要通过网络与服务器建立连接，该连接通过TCP完成，该协议与IP协议共同构建Internet，既著名的TCP/IP 协议。HTTP是比TCP更高层次的应用层协议，根据规则，只有底层协议建立之后才能进行更高层次的协议连接，因此，首先要建立TCP连接。

三次握手

TCP是主机对主机层的传输控制协议，提供可靠的连接服务，采用三次握手确认建立一个连接，TCP标志位有6种：SYN（建立连接），FIN（关闭连接），ACK（响应），PSH（表示有DATA数据传输），RST（连接重置）。
TCP协议规定，只有ACK=1时有效，也规定连接建立后所有发送的报文的ACK必须为1；
TCP规定，当SYN=1时，不能携带数据，但要消耗一个序号；
当SYN=1，ACK=0，表明这是一个请求报文；当SYN=1，ACK=1，表明这是一个响应报文。
当FIN=1时，表明数据发送完毕，并要求释放连接。
[图片上传失败...(image-606f70-1513085626517)]

• 第一次握手：客户端发送请求，即SYN=1，ACK=0，声明一个序号seq=x;
• 第二次握手：服务器应答确认，即SYN=1，ACK=1，seq=y,ack=x+1;
• 第三次握手：ACK=1，seq=x+1;ack=y+1;

为什么采用三次握手：
因为通过三次传递，客户端和服务器都能确认自己的发送信息和接受信息功能正常，为了达到这一点最少 需要三次握手。

HTTP请求

建立了TCP连接后，浏览器会向服务器发送请求命令。HTTP请求由请求行、请求头部、空格、请求正文构成。

• 请求行：请求方法 URL 协议版本（GET/sample.jsp HTTP/1.1）
• 请求头部：请求头包含许多有关的客户端环境和请求正文的有用信息
• 空格：请求头和请求正文之间是一个空行，这个行非常重要，它表示请求头已经结束，接下来的是请求正文。
• 请求正文：请求正文中可以包含客户提交的查询字符串信息

4. HTTP报文传输过程（没查到相关内容）

5. 服务器接受并处理HTTP报文

后端由MVC框架，即模型（model），视图（view），控制器（controller）;
控制器接收前端的信息，验证信心，在模型中查找到相关信息，发送到视图转化为html文件，控制器将该文件发送给浏览器

7. 浏览器接收报文，并开始构建页面

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，以计算每个节点的几何信息。
5. 将各个节点绘制到屏幕上

浏览器缓存

WEB缓存策略包含了强缓存、协商缓存和应用程序缓存。强缓存与协商缓存都是在HTTP的层面上进行的，但是两者相关联的Header字段不同，规则不同。应用程序缓存是处在web应用的层面上，是HTML5提出的新功能，允许用户进行离线使用，允许用户在html文件中添加标签中增加mainfest属性，用于声明各个文件的缓存规则。
浏览器首次访问服务器资源时，与服务器进行缓存机制的协商，之后根据对应机制判断从缓存中读取资源或者从服务器获取资源。
1. 强缓存
与强缓存相关的header字段包含Expire/Pragma(http1.0中使用)/Cache-control(http1.1中使用)。
Cache-control
是HTTP1.1协议中新增规则，会覆盖其他规则。字段值：no-store(对所有资源禁止进行本地缓存)；no-cache（强制要求从服务器下载资源，禁止使用缓存资源）；max-age（在某一段时间后过期）；public(缓存所有资源)；private（缓存只对某个用户有效）。
相比较而言，http 1.0 协议中所使用的 Pragma 字段仅仅实现了no-cache的功能。
Expire 字段信息与Cache-control中max-age相类似，都是通过时间进行缓存资源可用性的判断。区别在于：max-age信息为缓存资源的有效时长，而Expire信息则是缓存资源过期的时间点。两者看似比较相似，但是实际使用过程中，http 1.1协议所提出的max-age功能与Expire相比更具有鲁棒性。由于全球各地时间因时区差异，存在一定区别，因此在使用Expire时服务器时间与用户终端时间可能存在差异，使得Expire规则不再可靠。

2.协商缓存
与协商缓存相关的header字段包括：If-None-Match/Etag,If-Modified-Since/Last-Modified.
Etag表示请求资源实体，具体值由服务器端决定算法生产。浏览器从服务器端获取资源后，服务端在响应的请求头中附上Etag信息，由浏览器记录，当浏览器再次请求资源时，请求头中附上If-None-Match字段，服务器端对比其Etag值与当前有效资源的Etag值，判断是否相等从而决定是否允许浏览器使用缓存内容。
**Last-Modified表示请求资源最后一次更改的时间。与Etag类似，服务端在请求头中附上If-Modified-Since，并有服务端判断是否使用缓存。

参考文章

HTTP深入浅出 http请求
TCP通信的三次握手和四次撒手的详细流程（顿悟）
浏览器缓存机制详解
HTTP基本原理-缓存
和我一起学《HTTP权威指南》——Web服务器
DNS递归和迭代解析