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前端,转载请注明出处:浏览器渲染机制
关键词: