从输入 URL 到页面展示到底发生了什么？ ​

• URL 解析，域名解析。涉及到 DNS 寻址的过程，获取对应的服务器 IP 地址
• 缓存检查。首先检查强缓存，其次是协商缓存。
  • 如果强缓存生效，则直接从浏览器缓存获取资源
  • 如果强缓存失效，则浏览器向服务器发起一个 http 请求，当然这中间还有一个 tcp 三次握手的一个过程。建立连接后，服务器检查资源是否更改，如果没有更改，则返回 304 告诉浏览器读取缓存，否则响应 200 并发送资源文件给浏览器
• 拿到资源文件后，浏览器开始解析并构建 dom 树和 cssom 树。这中间又涉及两种过程。
  • 如果有 js 脚本，那么 cssom 树的构建会阻塞 js 的执行，js 的执行会阻塞 dom 树的构建
  • 如果没有 js 脚本，那么 cssom 树的构建和 dom 树的构建是并行的，当然大部分网页都会包含 js 脚本。
• 有了 cssom 树和 dom 树后，就开始构建 render tree。render tree 并不是和 dom 树一一对应的，render tree 并不包含 display:none 等元素，以及 style，link，head 这些标签。
• 构建完 render tree，布局（Layout，也叫重排）阶段会为每个节点计算精确的位置和大小信息。
• 布局阶段完成后，就是绘制阶段（paint），将各个节点绘制到屏幕上，页面就呈现出来了。