渲染引擎主要包括HTML解释器、CSS解释器、布局和JavaScript引擎、绘图模块等。HTML解释器解释HTML文本的解释器，主要作用是将HTML文本解释成DOM（文档对象模型）树，DOM是一种文档的表示方法。CSS解释器的作用是为DOM中的各个元素对象计算出样式信息，从而为计算最后网页的布局提供基础设施。布局是在DOM创建之后，Webkit需要将其中的元素对象同样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型。JavaScript引擎使用JavaScript代码可以修改网页的内容，也能修改CSS的信息，JavaScript引擎能够解释IavaScript代码并通过DOM接口和CSS DOM接口来修改网页内容和样式信息，从而改变渲染的结果。绘图使用图形库将布局计算后的各个网页的节点绘制成图像结果。

HTML结构

HTML是半结构化的数据表现方式，它的结构特征可以归纳为：树状结构、层次结构和框结构。

树状结构

整个网页可以看成一种树状结构，树根是html。根下面也包含两个子节点head和body。head的子女style包含的是一段CSS代码，用来定义元素的样式信息。body节点下面包含三个子节点，其一是img节点，用来在网页中显示图片资源；其二是div节点；其三是script节点，它包含一段JavaScript代码。

<html><head><style type="text/css">                <!-- CSS代码 -->img { width: 100px; }</style><title>This is a simple case.</title></head><body><img src="apic.png"></img><div>Hello world!</div><script type="text/javascript">window.onload = function(){console.log("window.onload()");}console.log("It's me.");</script></body>
</html>

框结构

框结构很早就被引入网页中，它可以用来对网页的布局进行分割，将网页分成几个框。同时，网页开发者也可以让网页嵌入其他的网页。在HTML语法中，frameset、frame和iframe可以用来在当前网页中嵌入新的框架。每个框结构包含一个HTML文档，最简单的框结构网页就是单一的框，其文档没有包含任何其他的框。

层次结构

网页的层次结构是指网页中的元素可能分布在不同的层次中，也就是说某些元素可能不同于它的父元素所在的层次，因为某些原因，WebKit需要为该元素和它的子女建立一个新层。
网页通常比我们的屏幕可视面积要大，而当前可见的区域，称为视图(viewport)。因为网页可视区域大，所以浏览器在渲染网页的时候，一般会加入滚动条以帮助翻滚网页。

WebKit渲染过程数据包括网页内容、DOM、内部表示和图像，模块包括HTML解释器、CSS解释器、JavaScript引擎以及布局和绘图模块。根据数据的流向，这里将渲染过程分成三个阶段，第一个阶段是从网页的URL到构建完DOM树，第一个阶段是从DOM树构建完WebKit的绘图上下文，第三个阶段是从绘图上下文到生成最终的图像。
从网页URL到构建完DOM树：

当用户输入网页URL的时候，WebKit调用其资源加载器加载该URL对应的网页。
加载器依赖网络模块建立连接，发送请求并接受答复。
WebKit接受到各种网页或资源的数据，其中某些资源可能是同步或异步获取的。
网页被交给HTML解释器转变成一系列的词语Token。
解释器根据词语构建节点Node，形成DOM树。
如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行。
JavaScript代码可能会修改DOM树的结构。
如果节点需要依赖其他资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前DOM树的继续创建；如果是JavaScript资源URL（没有标记异步方式），则需要停止当前DOM树的创建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。
在上述过程中，网页在加载和渲染过程中会发出DOMContent事件和DOM的onload事件，分别在DOM树构建完之后，以及DOM树构建完并且网页所依赖的资源都加载完之后发生，因为某些资源的加载并不会阻碍DOM树的创建，所以这两个事件多数时候不是同时发生的。

WebKit利用CSS和DOM树构建RenderObject树直到绘图上下文：

CSS文件被CSS解释器解释成内部表示结构
CSS解释器工作完成之后，在DOM树上附加解释后的样式信息，这就是RenderObject树
RenderObject节点在创建的同时，WebKit会根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。

根据绘图上下文生成最终图像：

绘图上下文是一个与平台无关的抽象类，它将每个绘图操作桥接到不同的具体实现类，也就是绘图具体实现类。
绘图实现类也可能有简单的实现，也可能有复杂的实现。在Chromium中它的实现相当复杂，需要Chromium合成器来完成复杂的多进程和GPU加速机制。
绘图实现类将2D图形库或者3D图形库绘制的结果保存下来，交给浏览器来同浏览器界面一起显示。

读书笔记——WebKit技术内幕 HTML结构相关推荐

WebKit技术内幕
WebKit技术内幕(浏览器内核|渲染引擎| HTML5| Chromium项目Committer重磅作品) 朱永盛著 ISBN 978-7-121-22964-0 2014年6月出版定价:7 ...
读书笔记：技术的本质-技术是什么，它是怎样进化的 (布莱恩•阿瑟)
读书笔记算不算原创? - page 30 然而.作为人类,我们实际上不应该和技术如此紧密地结合,而是应该和其它什么东西融合得更为紧密,那就是自然. 在最深的层次上.人的存在应该和自然,和我们最初的环境 ...
读书笔记：技术的本质-技术是什么，它是如何进化的 (布莱恩•阿瑟)
读书笔记算不算原创? - page 30 然而,作为人类,我们实际上不应该和技术如此紧密地结合,而是应该和其他什么东西融合得更为紧密,那就是自然.在最深的层次上,人的存在应该和自然,和我们最初的环境, ...
WebKit技术内幕（笔记）
2019独角兽企业重金招聘Python工程师标准>>> 一:浏览器 1.渲染引擎: html解释器:主要作用是将HTML文本解释成DOM树 css解释器 :为DOM中 ...
UNIX网络编程读书笔记：套接口地址结构
前言大多数套接口函数都需要一个指向套接口地址结构的指针作为参数.每个协议族都定义它自己的套接口地址结构.这些结构的名字均以"sockaddr_"开头,并以对应每个协议族的唯一后缀 ...
专栏《乔新亮的CTO成长复盘》读书笔记（技术架构篇）
架构决策能力不但非常关键,而且是技术管理者最重要的能力和职责之一,而且职级越高就越重要. 很多所谓的"技术债",也就是由一次次的决策失误不断累加而成的. 管理者要能充分利用自己的技 ...
【读书笔记】【WebKit 技术内幕（一）】浏览器架构与浏览器内核；chromium、webkit和blink的渲染过程；chromium、webkit的架构与代码结构；webkit2架构
文章目录前言 Something great 第1章浏览器和浏览器内核浏览器用户代理和浏览器行为内核特征 WebKit与blink 第2章 HTML网页和结构网页构成与结构 WebKit的 ...
【读书笔记】【WebKit技术内幕（三）】GPU硬件加速渲染、canvas与WebGL、 JavaScript与JavaScript 引擎、JavaScriptCore与V8
文章目录前言 Something great 第8章硬件加速机制硬件加速基础 -- *** Chromium的硬件加速机制 -- *** 其他硬件加速模块第9章 JavaScript引擎 Ja ...
【读书笔记】【WebKit技术内幕（二）】Chromium Webkit资源加载与网络栈、DOM树、HTML解释器、影子DOM、CSS解释器和样式布局、网页层次与渲染、绘图上下文、
文章目录前言 Something great 第4章资源加载和网络栈 Webkit 资源加载 Chromium多进程资源加载 Chromium 网络栈第5章 HTML解释器和DOM模型 DOM模 ...
《如何有效阅读一本书：超实用笔记读书法》读书笔记
作者:[日]奥野宣之文章目录前言第一章用笔记管理读书生活人与书关系的改变者让笔记成为读书时的好伙伴只要坚持就一定会有效通过笔记养成良好的读书习惯完善购书.读书和活用的方式将读书过程 ...

读书笔记——WebKit技术内幕 HTML结构

HTML结构

树状结构

框结构

层次结构

读书笔记——WebKit技术内幕 HTML结构相关推荐

最新文章

热门文章