浏览器渲染
详细总结从浏览器地址栏输入url到显示页面的步骤
1、在地址栏中输入URL
2、浏览器查看缓存，如果请求资源在缓存中且尚未过期，跳转到跳码阶段。
- 如果资源未缓存，发起新请求
- 如果已缓存，检查是否新鲜（未过期），足够新鲜则直接提供给客户端，不然需要和服务器进行验证。
- 如何检查是否过期（新鲜？）有两个HTTP头进行控制，
Expires和Cache-Control
- HTTP 1.0 提供
Expires,值为一个绝对时间表示缓存的过期时间- HTTP 1.1 增加了
Cache-Control:max-age = ;值为以秒为单位的最大新鲜时间
3、浏览器解析URL获得协议，主机，端口，path
4、浏览器组装一个HTTP的GET请求报文
5、浏览器获取主机ip地址，查询路径如下：
浏览器缓存 ==> 本机缓存 ==> hosts文件 ==> 路由器缓存 ==> ISP DNS缓存 ==> DNS递归查询（由于负载均衡可能导致每次IP不一样。）
6、打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。
Chrome 在同一个域名下要求同时最多只能有 6 个 TCP 连接，超过 6 个的话剩下的请求就得等待
- 客户端发送一个TCP 的SYN=1,Seq=X的包到服务器端口
- 服务器返回SYN=1,ACK=X+1,Seq=Y的响应包
- 客户端发送ACK=Y+1, Seq = Z
7、 TCP链接建立后发送HTTP请求
8、服务器接收请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host 头部判断请求的服务程序
9、服务器检查HTTP请求头是否包含缓存验证信息，如果验证缓存新鲜，返回304或对应状态码。
10、处理程序读取完整请求并准备HTTP响应，可能涉及数据库查询
11、服务器将相应报文通过TCP链接发送回浏览器
12、浏览器接收到了HTTP响应，会分析是关闭TCP链接或保持重用。关闭TCP链接的四次挥手：
- 主动方发送Fin=1,Ack=Z, Seq = X 报文
- 被动方发送ACK=X+1, Seq=Z报文
- 被动方发送Fin=1, ACK=X, Seq=Y报文
- 主动方发送ACK=Y,Seq = X 报文
到此，我们明白，TCP 连接通过什么手段来保证数据传输的可靠性，一是三次握手确认连接，二是数据包校验保证数据到达接收方，三是通过四次挥手断开连接。
13、浏览器检查响应状态码：（参考资料）
14、如果资源可缓存，则进行缓存
15、对响应进行解码（可使用gzip压缩）
16、根据资源得类型决定如何处理—>假设资源为HTML文档
17、解析HTML文档、构建DOM树、下载资源、构造CSSOM树、执行js脚本
操作不严格先后顺序，解释如下
- 构建DOM树：
- Tokenizing: 根据HTML规范将字符流解析为标记
- Lexing: 词法分析将标记转换为对象并定义属性和规则
- DOM construction: 根据HTML标记关系将对象组成DOM树
- 解析过程中遇到的图片、样式表、js文件、启动下载
- 构建CSSOM树：
- Tokenizing: 字符流转换为标记流
- Node: 根据标记创建节点
- CSSOM： 节点创建CSSOM树
- 根据DOM树和CSSOM树构建渲染树
- js解析：