9输入URL到渲染

输入 URL 到页面渲染的整个流程

1. DNS解析

DNS查询过程 域名 -> 转化为 IP地址

1. 查看浏览器内部缓存
2. 系统缓存 本地host
3. 路由器、IPS缓存
4. 本地DNS服务器
5. 域名服务器 根域名 -> 顶级域名 -> 主域名

2. 建立TCP连接

IP发出，三次握手

三次握手

客户端 -> SYN -> 服务端

服务端 -> SYN + ACK -> 客户端

客户端 -> ACK + 1 -> 服务端 = 校验成功开始通信

四次挥手

客户端 -> 发送释放请求 FIN -> 服务端 服务端 -> 发送ACK 并进入close状态 -> 客户端 服务端 -> FIN -> 客户端 客户端 -> ACK + 1 -> 服务端确认并关闭

3. 开始HTTP请求

1. HTTP协议
2. 报文传输
3. 服务端 根据 状态码 返回资源

4. 渲染

1. 解析资源 根据编码格式 去解码
2. 根据HTML构建DOM树
3. 根据CSS构建CSSOM树
4. 遇到script判断是否有async(并行下载并执行js)、defer(先下载，等待html解析完并顺序执行)
5. Render Tree -> 浏览器GPU绘制 合并图层显示在屏幕上
6. 等待用户响应