浏览器渲染原理

---

title: 浏览器渲染原理
date: 2023-04-10 19:30:00
categories: 渲染原理
tags: 浏览器

---

浏览器渲染页面的原理及流程

1. 浏览器将域名通过网络通信从服务器拿到 html 文件
2. 根据 html 文件构建 DOM 树和 CSSOM 树，构建 DOM 树期间遇到 js，阻塞 DOM 树和 CSSOM 树的构建，优先加载 js 文件，加载完毕，再继续构建 DOM 树和 CSSOM 树
3. 构建渲染树（Render Tree）
4. 页面的重绘与重排（也叫回流）。页面渲染完成后，如果 js 操作了 DOM 节点，根据 JS 对 DOM 操作动作的大小激进型重绘或者重排

url 输入到 HTML 渲染完成都做了什么

1. 解析 URL

   1.1 首先会对 url 进行解析，获取所需要的传输协议和请求资源地址
   1.2 如果输入的 url 中的协议活主机名不合法，将会把地址栏中输入的内容传递给搜索引擎
   1.3 如果协议和主机名没有问题，浏览器会检查 url 中是否有非法字符，会选择是否对其进行转义

2. 缓存加载
   2.1 浏览器会从缓存中获取请求的资源
   2.2 如果请求的资源存在缓存中没有失效，就直接返回缓存数据，否则向服务器发起新的请求。

3. DNS 解析
   3.1 获取 URL 中域名 ip 地址
   3.2 先判断本地是否有该域名的 ip 地址的缓存
   3.2.1 如果有就使用缓存的数据；
   3.2.2 如果没有则向本地 DNS 服务器发起请求；
   3.3 本地 DNS 服务器获取 ip 地址优先使用本地缓存，如果没有缓存数据就向服务器发起请求

4. 获取 MAC 地址，数据传输需要知道目的主机 MAC 地址

5. TCP 链接（3 次握手）
   5.1 确认客户端与服务器的接受与发送能力，与目标服务器建立链接

6. HTTPS 握手

7. 发送 http 请求返回数据 HTML

8. 解析 HTML 渲染

9. TCP 断开链接（4 次挥手）

渲染过程

1. 渲染流程

render.png

渲染流程的主要四个步骤
1.1 解析 HTML 生成 DOM 树
1.2 解析 css 生成 CSSOM 树
1.3 根据 DOM 和 CSSOM 树构建 Render 树
1.4 布局 render 树
1.5 绘制 render 树

1. 渲染细节
   2.1 生成 DOM 树
   DOM 树的构建过程是一个深度遍历过程，当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。DOM 树的节点就时 document 对象
   DOM 树的生成过程中可能被 css 和 js 的加载执行阻塞
   2.2 生成 CSSOM 树
   DOM 树生成的同时会生成样式结构体 CSSOM 树，
   2.3 生成 Render 树
   根据 CSSOM 树和 DOM 树构造渲染树，渲染树包含颜色尺寸，render 树是用于显示，，那些不可见元素不在 render 树中出现
   2.4 布局
   根据 render 树的样式规则，浏览器会根据这些信息进行布局，从上到下从根节点开始画
   2.5 绘制
   渲染引擎会遍历 render 树，并且调用 render 的 paint（）方法进行绘制
   这样一个完整的页面就渲染出来了

2. 重排(回流)与重绘
   3.1 在样式的尺寸发生改变的时候就会引起浏览器的重排（回流）机制进行重新计算渲染
   3.2 在颜色等不涉及尺寸的改变时会引起浏览器的重绘机制重新绘制页面