WebKit之HTML网页和结构

一、网页构成
1、基本元素和树状结构
        简单来讲，HTML网页就是一种使用HTML语言撰写的文档。但是，现在的网页基本上都是动态网页（Dynamic HTML），也就是网页可以出现动画，可以与用户交互，这就需要CSS样式语言和JavaScript语言，其中，JavaScript代码用来控制网页内部的逻辑，CSS用来描述网页的显示信息。下面代码将演示如何使用这些技术：
                                                       
            
                
            
            
                       
                

hello world

                
            
        
        整个网页可以看成一种树状结构，其树根是“html”，这是网页的根元素。根下面也包含两个子节点“head”和“body”。“head”的子女“style”包含的就是一段CSS代码，用来定义元素的样式信息。
        CSS是一种样式表语言，用来描述元素的显示信息。在HTML的早期，内容和显示是混在一起的，最典型的例子莫过于使用table元素来展示数据。这对网页的代码结构非常不利。因为，如果Web开发者想修改数据的显示方式，也要修改数据本身，会很麻烦。有鉴于此，借鉴数据和显示分离的原理，规范设计者们可以将有关显示的信息，例如颜色、大小、字体等抽取出来，使用CSS语言编写代码来描述它们，与HTML元素的内容分离开来。
        “body”节点下面包含三个子节点，其一是“img”节点，用来在网页中显示图片资源；其二是“div”节点；其三是“script”节点，它包括一段JavaScript代码。
        JavaScript是一种解释型的脚本语言，主要目的是控制用户端逻辑、同用户交互等，它可以修改HTML元素及其内容。
        由上面的分析可以看出，一个完整的网页组成包括HTML文本、JavaScript代码、CSS代码以及各种各样的资源文件。而网络上的每个资源都是由URL标记，即对于浏览器而言，区分两个资源是否相同的唯一标准就是其URL是否一致。
        上面代码中的这些元素组成一个树状结构，这就是HTML文档的树状结构。在WebKit中，这个文档会构建成一个DOM树。
2、HTML5新特性
        在HTML4.01之后的很长时间里，规范组织都没有大而新的规范出炉，酝酿中的新规范草案在经过一番激烈的争论后，终于在2012年由两大组织WHATWG和W3C推荐为候选规范，即具有划时代意义的HTML5。
        HTML5包含了一系列的标准，一共包含了10大的类别，它们分别是离线（offline）、存储（storage）、连接（connectivity）、文件访问（file access）、语义（semantics）、音频和视频（audio/video）、3D和图形（3D/graphics）、展示（presentation）、性能（performance）和其它（Nuts and bolts）。其中，每个大的类别都是由众多技术或者规范组成，下表描述了这10个类别所包含的具体规范：

类别	具体规范
离线	Application cache，Local storage，Indexed DB，在线/离线事件
存储	Application cache，Local storage，Indexed DB
连接	Web Sockets，Server-sent事件
文件访问	File API，File System，FileWriter，ProcessEvents
语义	各种新的元素，包括Media，structural，国际化，Link relation，属性，form类型，microdata等方面
音频和视频	HTML5 Video，Web Audio，WebRTC，Video track等
3D和图形	Canvas 2D，3D CSS变换，WebGL，SVG等
展示	CSS3 2D/3D变换，转换（transition），WebFonts等
性能	Web Worker，HTTP caching等
其它	触控和鼠标，Shadow DOM，CSS masking等

        目前，网站html5test.com提供了测试浏览器支持HTML5的情况。HTML5中的很多规范都是基于JavaScript语言来定义的。
        HTML5引入的最让人惊讶的最新能力之一是对2D和3D图形以及多媒体方面的支持，这将彻底改变网页的渲染方式和复杂度。这里包括但不限于HTML5视频、Canvas 2D、WebGL(即Canvas 3D)、CSS 3D变换和转换。HTML5视频引入可一个新的“video”元素，支持在网页中播放视频。Canvas 2D通过定义一个新的“canvas”元素，网页开发者利用该元素的2D绘图上下文（graphics context）调用标准定义的接口，绘制常见的2D图形，例如点、线、矩形、多边形等。WebGL则是使用“canvas”元素，网页开发者可以利用该元素的3D绘图上下文调用标准定义的接口，绘制3D图形，这些接口类似于OpenGL ES的接口。CSS 3D的变换和转换则可以作用于HTML的任意可视元素，制造出各种炫丽的3D效果。
        之前要想达到这种效果，都需要浏览器的第三方插件才能做到，现在HTML5原生就支持了，下面网页代码演示如何使用CSS 3D变换、HTML5视频、2D图形绘制和3D图形绘制：
        
            
                
            
            
                            
                

                    
        
                                      
                

                
            
        
        在CSS 3D变换的代码部分，将3D变换作用于“video”、“div”和“canvas”三种元素，其含义是将它们分别绕X轴和Y轴旋转30度和-45度。在元素“body”的子女中，首先是“video”元素，它用来播放HTML5视频。之后是一个“div”元素，它包括两个“canvas”元素，前者将会用来绘制2D图形，后者将会用来绘制3D图形，当然目前渲染引擎区分不出2D还是3D，因为它们是由后面的JavaScript代码决定的。在“canvas 2D”绘图的JavaScript代码中，ID为“a2d”的“canvas”元素创建2D上下文，这决定了它将采用2D绘图，之后填充该元素的颜色。在“canvas 3d(webGL绘图)”的JavaScript代码中，ID为“a3d”的“canvas”元素创建3D上下文，这决定了它将采用3D绘图，之后更新它的颜色缓冲区。    
        
二、网页结构
1、框结构
        框结构很早就被引入网页中，用来对网页的布局进行分割，将网页分成几个框，网页开发者可以让网页嵌入其它网页。在HTML语法中，“frameset”、“frame”和“iframe”可以用来在当前网页中嵌入新的框结构。
        每一个框结构包含一个HTML文档，最简单的框结构网页就是单一的框，其文档没有包含任何其它的框。
        当然，网页也可以有很复杂的框结构，也就是框里面再嵌入框，依次类推。下面以一个拥有复杂框结构的网页介绍之：
        
        上图中，左边部分是两个HTML网页的示例代码，其中“main.html”是主网页，它使用“iframe”元素来嵌入左下方的“frameset.html”网页。而“frameset.html”网页则包含两个子框，分别嵌入两个结构简单的网页。图中右侧是左边“main.html”网页所生产的框结构，图中的箭头表示源代码和框结构的对应关系。
2、层次结构
        网页的层次结构是指网页中的元素可能分布在不同的层次中，也就是说某些元素可能不同于它的父元素所在的层次，因为某些原因，WebKit需要为该元素和它的子女建立一个新层。
        这里以前面HTML5新特性时举的例子来分析网页层次结构。示例中有四个重要元素，即一个“video”元素、一个“div”元素和两个“canvas”元素。同时还要主要CSS部分代码，它也会对网页的分层策略产生重要影响。示例对应的网页层次结构如下图所示：
    
        图中最大的层为“根层”，当一个网页构建层次结构的时候，首先是根节点，此时自然地为它创建一个层即“根层”，其对应着整个网页文档对象。“层1”是为元素“video”所创建的层，之所以要为其创建一个层是因为“video”元素用来播放视频，为它创建一个新的层可以更有效地处理视频解码器和浏览器之间的交互和渲染问题。“层2”是为元素“div”创建的层，因为其需要进行3D变换，而普通的“div”元素可以不创建新层。“层3”和“层4”分别对应两个元素“canvas”，这两个元素对应着HTML5标准中复杂的2D和3D绘图操作。
        从上面分析不难看出，对于需要复杂变换和处理的元素，需要新层，这是为了渲染引擎在处理上的方便和高效。至于哪些元素或者哪些情况下，会产生新层，对于不同渲染引擎，其策略可能会不一样。
3、理解网页结构
        （1）框结构：为了理解框结构，可以将网页“main.html”和“frameset.html”保存下来，将之前的两段代码分别保存为“example1.html”和“example2.html”网页，在Chrome浏览器中打开“main.html”网页，就可以看到如下图所示的渲染效果：
        
        上图中，“框2”对应“example1.html”，“框3”对应“example2.html”，“框1”是它们的父亲“frameset.html”，而主框则是整个网页的结果。
        （2）层次结构：还是用浏览器打开前面HTML5新特性时举的例子，然后打开Chrome浏览器开发工具，单击“设置”按钮，在“General”标签页选择“Show composited layer borders”，页面中就会如下图一样显示网页的层次结构：
        
        “层1”和“层2”被设置3D变换，所以边框成平行四边形，而不是“根层”的矩形形状。同理，“层3”和“层4”也被设置3D变换，但发现角度比“层2”更大，原因在于3D变换的叠加效应。两个“canvas”元素本身需要进行3D变换，同时它们的父亲“div”元素也需要，两者叠加，出现了图中所示的效果。
        从上图不难发现，“根层”中包含有很多大小一样的方块，同时，“层2”也是一样，这是WebKit故意将它们划分成小块的瓦片所致。
        
三、网页渲染过程
1、加载和渲染
        浏览器的主要作用是将用户输入的URL转变成可视化的图像，其包含两个过程：其一是网页加载过程，即从URL到构建DOM树；其二是网页渲染过程，即从DOM树到生成可视化图像。实际中，这两个过程会交叉在一起，很难明确区分。
        网页渲染还有一个特性就是网页通常比我们的屏幕可视面积要大（在移动设备上尤其明显），而当前可见区域，我们称为视图（viewport）。因为网页比可视区域大，所以浏览器在渲染网页的时候，一般会加入滚动条以帮助翻滚网页，就用户体验而言，垂直方向滚动效果好于水平方向。
2、渲染过程
        根据数据流向，将渲染过程分为三个阶段：
        （1）从网页的URL到构建完DOM树，具体如下图所示：
        
        （A）当用户输入网页URL的时候，WebKit调用其资源加载器加载该URL对应的网页。
        （B）加载器依赖网络模块建立连接，发送请求并接收答复。
        （C）WebKit接收到各种网页或者资源的数据，其中某些资源可能是同步或者异步获取的。
        （D）网页被交给HTML解释器转变成一系列的词语（Token）。
        （E）解释器根据词语构建节点（Node），形成DOM树。
        （F）如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行。
        （G）JavaScript代码可能会修改DOM树的结构。
        （H）如果节点需要依赖其它资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前DOM树的继续创建；如果是JavaScript资源URL（没有标记异步方式），则需要停止当前DOM树的创建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。
        （2）从DOM树到构建完WebKit的绘图上下文，具体如下图所示：
        
        （A）CSS文件被CSS解释器解释成内部表示结构。
        （B）CSS解释器工作完之后，在DOM树上附加解释后的样式信息，这就是RenderObject树。
        （C）RenderObject节点在创建的同时，WebKit会根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。
        （3）从绘图上下文到生成最终的图像，具体如下图所示：
        
        （A）绘图上下文是一个与平台无关的抽象类，它将每个绘图操作桥接到不同的具体实现类，也就是绘图具体实现类。
        （B）绘图实现类也可能有简单的实现，也可能有复杂的实现，在Chromium中需要合成器来完成复杂的多进程和GPU加速机制。
        （C）绘图实现类将2D或者3D图形库绘制的结果保存下来，交给浏览器来同浏览器界面一起显示。
        上面介绍的是一个完成的渲染过程，现代网页很多是动态网页，这意味着在渲染完成之后，由于网页的动画或者用户的交互，浏览器其实一直在不停地重复执行渲染过程。