vue 中的虚拟DOM有什么好处？快！
参考链接：
浏览器渲染的那些事(一)
浏览器内部工作原理
浏览器的渲染原理简介
有关网页渲染，每个前端开发者都该知道的那点事
首先了解浏览器显示网页经历的5个过程
1. 浏览器的主要概念
浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括PDF、image 及其他格式。用户用 URI（统一资源标识符）来指定所请求资源的位置。
浏览器的主要构成：
浏览器主要构成
User Interface（用户接口）：浏览器中的地址栏、前进后退、书签菜单等。除了网页显示区域以外的都是。
Browser engine（浏览器引擎）：查询与操作渲染引擎的接口。
Rendering engine（渲染引擎）：负责显示请求的内容。
Networking（网络）：用于网络请求。
JavaScript Interpreter（JavaScript 解释器）：用于解析执行 JavaScript 代码。
UI Backend（UI 后端）：绘制基础原件。
Data Persistence（持久层）：数据存储。
1、解析标签，生成元素树
2. 浏览器渲染流程
- 浏览器解析 HTML/SVG/XHTML 生成 DOM 树；
- 浏览器解析 css 生成 css规则树（CSS Rule Tree）；
- 浏览器解析JavaScript，主要通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree；
- 解析完成后，浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构造 Render Tree；
- 构建好 Render Tree 会执行 布局 过程，确定节点的确切位置
- 遍历Render Tree ，使用UI后端层 绘制 每个节点。
简化图
2、解析样式，生成样式树
2.1 HTML解析
- 为了更好的用户体验，浏览器不会等到所有的 HTML 都解析完成之后再去构建和布局 Render Tree，而是解析完一部分内容就显示一部分内容，同时还可能在通过网络下载其余内容。
- 解析输出的 DOM 树，是由 DOM 元素及属性节点组成的。DOM 是文档对象模型的缩写，它是 HTML 文档的对象表示，作为 HTML 元素的外部接口供JS等调用。
- 浏览器容错：浏览器具有错误处理的能力，无效的不合法的标签浏览器会在解析的过程中修复这种错误。
- 解析结束时文档状态被设置为完成，同时会触发一个 load事件。
3、生成元素与样式的关系
2.2 css 解析
解析 css 生成 css规则树（CSS Rule Tree）。
4、生成原始的显示坐标
2.3 渲染树 Render Tree
- Render Tree 主要负责布局并将自身及其子元素绘制出来。
- 在渲染树中，每一段文本字符串都表现为独立的渲染器。每一个渲染对象都包含与之对应的 DOM 对象，或者文本块，还加上计算过的样式。
- 渲染树由元素显示序列中的可见元素组成，它是文档的可视化表示，构建这棵树是为了以正确的顺序绘制文档内容。
- 呈现树与 DOM 元素相对应，但不是一一对应。非可视化的 DOM 元素就不会插入呈现树，例如 head 元素。display 为 "none" 的元素也不会显示在呈现树中（visibility:hidden的元素仍会显示）。
5、显示页面
2.4 布局 Render Tree
对渲染树上的每个元素，计算它的坐标，确定元素的位置，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。
本文由10bet发布于Web前端,转载请注明出处：浏览器渲染机制
关键词：