浏览器渲染机制

来源:http://www.chinese-glasses.com 作者:Web前端 人气:50 发布时间:2020-05-06
摘要:vue 中的虚拟DOM有什么好处?快! 参考链接: 浏览器渲染的那些事(一) 浏览器内部工作原理 浏览器的渲染原理简介 有关网页渲染,每个前端开发者都该知道的那点事 首先了解浏览器显

vue 中的虚拟DOM有什么好处?快!

参考链接:
浏览器渲染的那些事(一)
浏览器内部工作原理
浏览器的渲染原理简介
有关网页渲染,每个前端开发者都该知道的那点事

首先了解浏览器显示网页经历的5个过程

1. 浏览器的主要概念

  • 浏览器的主要功能是将用户选择的 web 资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是 HTML,也包括PDF、image 及其他格式。用户用 URI(统一资源标识符)来指定所请求资源的位置。

  • 浏览器的主要构成:

![](https://upload-images.jianshu.io/upload_images/2704790-81e86123bc853d88.png)

浏览器主要构成
  • 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 TreeCSS Rule Tree 构造 Render Tree
  • 构建好 Render Tree 会执行 布局 过程,确定节点的确切位置
  • 遍历Render Tree ,使用UI后端层 绘制 每个节点。

图片 1

简化图

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

关键词:

最火资讯