1 输入 URL 访问网页的全过程

1. DNS 查询请求：浏览器发起 DNS（域名解析系统）查询请求

   • DNS 监听 53 端口来获取域名解析请求
   • 浏览器缓存：寻找浏览器的 DNS 缓存记录
   • 系统缓存：浏览器做系统调用
   • 路由器缓存
   • ISP DNS 缓存
   • 递归搜索

2. TCP 连接：建立TCP 连接

   • 浏览器通过 DNS 获取 web 服务器的 IP 地址
   • 向服务器发起 TCP 连接请求
   • 三次握手后，浏览器发送 HTTP 请求数据给服务器

3. HTTP 请求：浏览器向 web 服务器发送 HTTP 请求

   • 一个 HTTP 事务由一条请求命令和一个响应结果组成
   • 请求头常见字段：host（服务器域名端口）、connection（设置当前连接和 hop-by-hop 协议请求字段列表的控制选项）、accept（设置接受的内容类型）、user-agent（用户代理的字符串值）、accept-encoding（接受编码格式）、accept-language（接受语言）、cache-control（设置请求响应链上所有的缓存机制必须遵守的指令）、cookie（发送 cookie）等

4. 响应：服务器发送响应数据给客户端

   • 服务器监听 80 端口，获取客户端 HTTP 请求
   • 服务器接受客户端数据并进行 HTTP 解码
   • 服务器根据 HTTP 请求头信息，得到响应数据给客户端

5. 解析响应：浏览器解析 HTTP 响应

   • HTML 解析
   • 获取嵌入 HTML 的对象（如 CSS 文件、图片资源）
   • CSS 解析
   • JS 解析

6. 关闭 TCP 连接：关闭 TCP 连接

   • 通过四次挥手，关闭 TCP 连接
   • 如果 connection 为 keep-alive 不会马上关闭连接

参考：

• https://blog.csdn.net/angle_chen123/article/details/85335244 (opens new window)

2 浏览器渲染页面的步骤

1. HTML 解析：浏览器拿到 HTML，通过 HTML 解析器将 HTML 转换成 DOM 树
2. CSS 解析：通过 CSS 解析器，将 CSS 样式转换成 stylesheet（CSS 规则树）
3. 布局树：根据 DOM 树和 stylesheet 创建布局树（渲染树）
4. 渲染：计算每个布局树节点的大小和位置，画出节点，最后 GPU 进行 paint 绘制在屏幕上
   • 对布局树进行分层，为每个图层生成绘制列表，再将图层分成图块，紧接着光栅化将图块转换成位图，最后合成绘制生成页面

分层的目的

避免整个页面渲染，把页面分成多个图层，尤其是动画的时候，把动画独立出一个图层，渲染时只渲染该图层就 ok，transform，z-index 等，浏览器会自动优化生成图层。

光栅化目的

页面如果很长但是可视区很小，避免渲染非可视区的样式造成资源浪费，所以将每个图层又划分成多个小个子，当前只渲染可视区附近区域。