输入 url 到页面渲染完成的过程

用户从输入 url 到页面渲染完成, 之间发生了什么?
url 解析 => dns 解析 => tcp 连接 => 反向代理 => http 连接 => 缓存 => html + css => render tree => 遍历可见节点, 根据规则, 计算位置, 大小 => 绘制

url 解析

输入 url , 会进行 url 的解析, 如果是 http 协议, 浏览器会新建一个网络请求线程去下载所需资源

DNS 解析: 将 host 字段转化为网络中具体的 IP 地址 (服务器在网络中的 " 门牌号")

查询缓存: 浏览器自身的 DNS 缓存 => 系统自身的 DNS 缓存 => 系统的 hosts 文件 => 本地域名服务器 => 根域名服务器 => COM 顶级域名服务器 => 权限域名服务器

---

通过 DNS 解析获取到目标服务器 IP 地址后, 建立网络连接进行资源的请求与响应

网络模型: 可以使网络通信更加灵活

但在数据连接传输之前, 需要建立好客户端与服务端之间的连接 即 TCP 连接 三次握手, 四次挥手

三次握手
两个都会发一个随机数, 对方收到后, 将随机数 + 1, 返还给对方, 让其进行确认, 中间穿插些标识

四次挥手

请求断开; 客户端确认应答; 服务端没数据发了, 服务端确认应答; 请求断开连接

---

建立 TCP 连接之后, 便可通过 HTTP 等协议进行前后端的通信

通常, 单一服务器难以满足需求, 于是, 将多个服务器组成集群, 然后由反向代理服务器提供给客户端用户使用, 优点: 负载均衡, 安全, 解决跨域

HTTP 在 1.0 时使用的是短连接, HTTP 操作后任务结束后会断开连接

1.1 之后, 默认使用长连接 请求头中有个字段 connection: keep-alive

HTTP 2.0 之后, 一个 TCP 连接上可以请求多个资源

服务器可对客户端的一个请求发出多个响应(实现主动推送) ; HTTP 头部压缩, 减少体积

---

前后端交互中, 使用缓存可以提高性能

强缓存: 本地缓存未过期, 直接读取本地缓存 1.1 cache-control: max-age

协商缓存: 向服务器发起 http 请求 判断本地缓存是否发生修改, 未修改, 返回状态码 304

判断头部 if-none-match 与服务器的 etag 是否匹配

---

关键路径渲染

从服务器获取到所访问的页面文件后, 如何将文件内容渲染出来?

HTML 文件: 展示文档的内容
原始字节 = 解析 > 对应字符串 = tokens 化 > tokens = 生成 nodes > nodes = 生成 dom > dom
css : 文档对象对应的样式

接下来, 将两个对象合并为渲染树

步骤: 遍历可见节点, 找到其对应规则, 计算具体位置和大小, 绘制为屏幕上实际像素

渲染完成后, 如果 dom 结果发生变化, 整个渲染过程就会重新执行一遍

来自 田佳奇 - Web 前端性能优化 - 第 2 章 前端页面生命周期