浏览器是如何工作的系列：渲染引擎

渲染引擎的功能就是渲染，在浏览器上显示请求的内容。
默认情况下，渲染引擎可以显示HTML和XML文档和图像。他也可以显示其他类型的插件(浏览器扩展)。例如显示PDF使用PDF浏览器插件。
我们将用一个特殊的章节来讨论插件和扩展。在这个章节中，我们重点来关注使用CSS样式渲染的HTML和图片。

一、渲染引擎：
我们的参考浏览器——FF、Chrome、Safrai都是建立在两个渲染引擎下。
FF使用Gecko——“自制”Mozilla渲染引擎，Safrai和Chrome都使用Webkit引擎。
Webkit是一个开源的渲染引擎，开始时适用于linux平台，但是经过Apple公司修改之后开始支持Mac和windows系统。
获取更多详细信息，参考：http://webkit.org。

二、主要流程：
渲染引擎开始从网络层获取请求的文档内容。通常会在8K的块。
下图2.0是渲染引擎的基本流程：

渲染引擎开始解析HTML文档，并且把HTML标签转化为一个被叫做“内容树”的DOM树，它将
解析CSS样式，包括外部样式和内嵌样式。样式数据和HTML中的显示控制将共同用来创建另一棵树——渲染树。
渲染树包含带有颜色和尺寸等显示属性的矩形，这个矩形的顺序与显示顺序一致。

渲染树构建完成后就是“布局”处理。也就是确定每个节点在屏幕上的确切显示位置。下一个步骤就是绘制，
遍历渲染树并用UI后端层将每一个节点绘制出来。

一定要理解，这是一个缓慢(渐进)的过程，为了更好的用户体验，渲染引擎将尽可能的把内容显示到屏幕上。
它不会等到所有的HTML被解析完才开始创建和布局渲染树。它会在处理后续内容的同时把已经处理过的内容显示出来。
图2.1是Webkit主要流程示例：

图2.2是Gecko主要流程示例：

从图2.1和图2.2可以看出虽然Webkit和Gecko使用术语稍微不同，主要流程还是基本相同的。
Gecko 里把格式化好的可视元素称做“帧树”（Frame tree）。每个元素就是一个帧（frame）。 Webkit 则使用”渲染树”这个术语，渲染树由”渲染对象”组成。
Webkit 里使用”layout”表示元素的布局，Gecko则称为”Reflow”。Webkit使用”Attachment”来连接DOM节点与可视化信息以构建渲染树。
一个非语义上的小差别是Gecko在HTML与DOM树之间有一个附加的层，称作”content sink”，是创建DOM对象的工厂。我们会讨论流程中的每一部分。

转载于:https://www.cnblogs.com/snake-hand/archive/2013/06/12/3132880.html

浏览器是如何工作的系列：渲染引擎相关推荐

浏览器是怎样工作的：渲染引擎，HTML解析
2019独角兽企业重金招聘Python工程师标准>>> 渲染引擎渲染引擎的职责是--渲染,也就是把请求的内容显示到浏览器屏幕上. 默认情况下渲染引擎可以显示HTML,XML文档以及 ...
浏览器是如何工作的系列：页面布局
布局(Layout/Reflow): 当渲染对象被创建并添加到树中,它们并没有位置和大小,计算这些值的过程称为layout或reflow. Html使用基于流的布局模型,意味着大部分时间,可以以单一的 ...
浏览器渲染引擎学习总结
简单介绍浏览器渲染引擎情况很多人就只会用浏览器,不知道浏览器的工作原理或者说浏览器最核心的东西,浏览器的内核是最核心的东西,也叫做渲染引擎,那这个东西到底是干嘛的呢,下面本教程就为大家好好介绍一下 ...
浏览器内核-渲染引擎、js引擎
一个完整的浏览器包含浏览器内核和浏览器的外壳(shell).浏览器核心--内核分成两部分:渲染引擎和js引擎.由于js引擎越来越独立,内核就倾向于只指渲染引擎. 1 浏览器组成结构浏览器一般由七个模 ...
浏览器渲染引擎和JS引擎简介
一.定义浏览器内核分成两部分:渲染引擎和JS引擎. 由于JS引擎越来越独立,浏览器内核就倾向于单指渲染引擎. 渲染引擎:是一种对解析HTML.CSS等进行解析并将其显示在页面上的工具. JS引擎:读 ...
《十》浏览器基础及渲染引擎解析一个网页的过程、JavaScript 引擎解析 JavaScript 代码的过程
浏览器:是安装在电脑里面的一个软件,能够将页面内容渲染出来呈现给用户查看,并让用户与网页进行交互. 服务器其实就是性能比较高的计算机,这些计算机 24 小时不断电. 不关机. 开发者在本地开发出 HT ...
为什么需要考虑浏览器兼容，浏览器渲染引擎在浏览器中的作用是什么样的？
为什么需要做浏览器兼容?–渲染引擎在浏览器中的作用 Web浏览器的体系结构 User Interface:用户界面.可以使最终用户能够与界面上所有可视元素进行交互. Browser Engine:浏览 ...
【前端】浅谈浏览器内核：渲染引擎、JS引擎
浏览器内核是什么? 简而言之,浏览器内核就是把我们编写的代码转换为页面的中控件. 虽然现在大家谈起浏览器内核时,多指代渲染引擎(Rendering engine 或 layout engineer). ...
WEB前端底层知识--浏览器是如何工作的
随笔- 6 文章- 2 评论- 103 WEB前端底层知识--浏览器是如何工作的概述对于一直从事B/S架构(B/S也是一种C/S架构,只不过C/S自己写显示而B/S有相对统一的显示引擎实现而已 ...

浏览器是如何工作的系列：渲染引擎

浏览器是如何工作的系列：渲染引擎相关推荐

最新文章

热门文章