网页渲染方法及装置.pdf

本发明公开了一种网页渲染方法和装置。该方法包括：将网页中的html标签作为节点并引入CSS信息，以创建包含视觉信息的网页树状结构(VisualTree)，其中所述CSS信息包括节点的显示属性；计算所述VisualTree中节点的大小和绝对坐标；根据节点的大小、绝对坐标和显示属性来计算节点的可见性，以完成对网页的渲染。由此，能够在功能上保证网页块视觉显示的准确性同时，在性能上满足搜索/转码网页分析批量处理的速度要求。

权利要求书
1.  一种网页渲染方法，包括：
将网页中的html标签作为节点并引入层叠样式表(CSS)信息，以创建包含视觉信息的网页树状结构(VisualTree)，其中所述CSS信息包括节点的显示属性；
计算所述VisualTree中节点的大小和绝对坐标；以及
根据节点的大小、绝对坐标和显示属性来计算节点的可见性，以完成对网页的渲染。

2.  如权利要求1所述的方法，其中所述VisualTree上的节点是与渲染布局有关的节点。

3.  如权利要求1所述的方法，其中计算所述VisualTree中节点的大小和绝对坐标包括：
对VisualTree进行后根遍历以计算节点的大小和相对坐标；以及
根据节点的所述大小和相对坐标，对VisualTree进行先根遍历以计算节点的绝对坐标。

4.  如权利要求3所述的方法，在计算所述VisualTree中节点的大小和绝对坐标之前还包括：
将VisualTree上的节点分类为table节点或非table节点。

5.  如权利要求4所述的方法，其中所述非table节点包括块级节点、内联节点和浮动节点，并且对VisualTree进行后根遍历以计算节点的大小和相对坐标进一步包括：
使用棋盘布局算法计算table节点的大小；并且/或者
使用画布布局算法计算块级节点和浮动节点的大小，并根据CSS信息算出内联节点的大小；以及
使用画布布局算法计算上述table节点、块级节点、浮动节点和内联节点的父节点的大小并得出上述节点的相对坐标。

6.  如权利要求3所述的方法，其中根据节点的所述大小和相对坐标对VisualTree进行先根遍历以计算节点的绝对坐标包括：
将根节点的绝对坐标初始化为(0,0)，使用如下公式计算每个节点的绝对坐标，直到最末梢的节点为止：
绝对坐标＝父节点的绝对坐标+相对坐标。

7.  如权利要求1所述的方法，其中计算节点的可见性包括：
根据根节点的大小、绝对坐标以及显示属性来计算根节点的可见性；以及
从根节点向下遍历计算各子孙节点的可见性。

8.  如权利要求7所述的方法，其中各子孙节点的可见性与其祖先节点的可见性相关。

9.  一种网页渲染装置，包括：
创建单元，用于将网页中的html标签作为节点并引入CSS信息以创建包含视觉信息的网页树状结构(VisualTree)，其中所述CSS信息包括节点的显示属性；
大小及绝对坐标计算单元，用于计算所述VisualTree中节点的大小和绝对坐标；以及
可见性计算单元，用于根据节点的大小、绝对坐标和显示属性来计算节点的可见性以完成对网页的渲染。

10.  如权利要求9所述的装置，其中所述大小及绝对坐标计算单元包括：
大小及相对坐标计算单元，用于对VisualTree进行后根遍历以计 算节点的大小和相对坐标；以及
绝对坐标计算单元，用于根据节点的所述大小和相对坐标来对VisualTree进行先根遍历以计算节点的绝对坐标。

11.  如权利要求10所述的装置，还包括：
分类单元，用于将VisualTree上的所有节点分类为table节点或非table节点。

12.  如权利要求11所述的装置，其中所述非table节点包括块级节点、内联节点和浮动节点，并且所述大小及相对坐标计算单元还包括：
table节点大小计算单元，用于使用棋盘布局算法计算table节点的大小；和/或
非table节点大小计算单元，用于使用画布布局算法计算块级节点和浮动节点的大小，并根据CSS信息算出内联节点的大小；以及
相对坐标计算单元，用于使用画布布局算法计算上述table节点、块级节点、浮动节点和内联节点的父节点的大小并得出上述节点的相对坐标。

说明书网页渲染方法及装置
技术领域
本发明涉及网页，尤其涉及网页渲染方法及装置。
背景技术
近年来，随着网络技术的迅猛发展，互联网上的信息也越来越多。如何从海量的互联网信息中有效地提取、利用并呈现这些信息成为挑战。在这样的背景下，发展出了用于网页搜索和网页转码的大型系统。
在这些网页搜索和转码系统中，需要网页分析作为基本的计算手段。网页分析例如可以用于提取网页主体，去除网页杂质信息，或是识别网页结构。一般而言，根据视觉位置可将网页分为若干结构块(即，网页块)，例如位于网页顶部的导航块、位于网页左或右侧的推荐列表块、以及位于网页中心的正文块等。进行上述网页分析都需要对各网页块的视觉信息进行识别，即，对各网页块在整个网页中的绝对坐标、大小及可见性等特征进行确定和识别。
由上可知，网页视觉信息分析是进行上述网页搜索和网页转码等所必须进行的处理。现今的浏览器内核提供了强大的网页视觉信息渲染功能。但强大渲染功能的实现是以牺牲处理速度为代价的。例如，对于主流的火狐(firefox)浏览器，其浏览器内核的渲染速度经测试只能达到每秒10～20个页面。这样的渲染速度对于每日都需要处理上亿级别网页的搜索/转码服务的网页分析而言显然是不可接受的。
从搜索/转码网页分析的功能需求来讲，网页视觉信息的渲染并不需要像浏览器要求的那么精确。比如说，对于供用户浏览的网页渲染而言，哪怕只是一个字符的视觉错位都会是难以接受的。但用于网页分析的网页渲染则可以容忍字符级别的视觉错位，仅要求网页块视觉布局的准确性。
因此，需要一种在功能上能够保证网页块视觉显示的准确性，同时在性能上能够满足搜索/转码网页分析批量处理的速度要求的网页渲染方法和装置。
发明内容
本发明所要解决的一个技术问题是提供一种网页渲染方法和装置，其能够在保证网页块视觉显示的准确性的同时实现能够满足搜索/转码网页分析批量处理的速度要求的网页渲染。
根据本发明的一个方面，公开了一种网页渲染方法，包括：将网页中的超文本标记语言(html)标签作为节点并引入层叠样式表(CSS)信息，以创建包含视觉信息的网页树状结构(VisualTree)，其中CSS信息包括节点的显示属性；计算所述VisualTree中节点的大小和绝对坐标；以及根据节点的大小、坐标和显示属性来计算节点的可见性，以完成对网页的渲染。
由此，通过使用本发明定义的VisualTree，实现对组成网页的各个网页块的大小、绝对坐标进而对可见性的计算，由此完成对网页的快速渲染。
优选地，VisualTree上的节点是与渲染布局有关的节点。
这样就将需要处理的节点进一步限定为那些涉及渲染布局的节点，从而排除对例如无需显示的节点的相关计算，由此进一步提高计算效率。
优选地，步骤计算所述VisualTree中节点的大小和绝对坐标包括：对VisualTree进行后根遍历以计算节点的大小和相对坐标；以及根据节点的所述大小和相对坐标，对VisualTree进行先根遍历以计算节点的绝对坐标。
这样就进一步明确了是使用自下而上的方式计算节点的大小和相对坐标，并使用自上而下的方式计算节点的绝对坐标，由此进一步提高了对各网页块大小和坐标的计算速度。
优选地，所述方法在计算所述VisualTree中节点的大小和绝对坐 标之前还包括：将VisualTree上的所有节点分类为表格(table)节点或非table节点。
这样，通过分类节点来优化计算，从而提高网页渲染的效率。
优选地，非table节点包括块级节点、内联节点和浮动节点，并且对VisualTree进行后根遍历以计算节点的大小和相对坐标进一步包括：使用棋盘布局算法计算table节点的大小；并且/或者使用画布布局算法计算块级节点和浮动节点的大小，并根据CSS信息算出算出内联节点的大小；以及使用画布布局算法计算上述table节点、块级节点、浮动节点和内联节点的父节点的大小并得出上述节点的相对坐标。
这样，通过对不同的节点是要不同的算法来明确和优化对节点大小和相对坐标的具体计算，能够进一步加快计算速度，从而提高网页渲染的效率。
优选地，根据节点的所述大小和相对坐标对VisualTree进行先根遍历以计算节点的绝对坐标包括：将根节点的绝对坐标初始化为(0,0)，使用如下公式计算每个节点的绝对坐标，直到最末梢的节点为止：绝对坐标＝父节点的绝对坐标+相对坐标。
这样，通过首先将根节点的绝对坐标定为原点，再根据已知的各下层节点的相对坐标求取绝对坐标，就能够进一步改善对网页块所处位置的计算，从而提高网页渲染的效率。
优选地，计算节点的可见性包括：根据根节点的大小、绝对坐标以及显示属性来计算根节点的可见性；以及从根节点向下遍历计算各子孙节点的可见性。
这样就进一步明确了可见性的计算是从根节点开始使用自下而上的方式进行的，由此进一步提高了对各网页块可见性的计算速度，并最终提高网页渲染速度。
优选地，各子孙节点的可见性与其祖先节点的可见性相关。
这样就进一步明确了可见性自上而下的决定方式，进一步方便对网页的渲染。
根据本发明的另一个方面，公开了一种网页渲染装置，包括：创 建单元，用于将网页中的html标签作为节点并引入CSS信息以创建包含视觉信息的网页树状结构(VisualTree)，其中CSS信息包括节点的显示属性；大小及绝对坐标计算单元，用于计算所述VisualTree中节点的大小和绝对坐标；以及可见性计算单元，用于根据节点的大小、绝对坐标和显示属性来计算节点的可见性以完成对网页的渲染。
优选地，大小及绝对坐标计算单元包括：大小及相对坐标计算单元，用于对VisualTree进行后根遍历以计算节点的大小和相对坐标；以及绝对坐标计算单元，用于根据节点的所述大小和相对坐标来对VisualTree进行先根遍历以计算节点的绝对坐标。
优选地，网页渲染装置还包括：分类单元，用于将VisualTree上的所有节点分类为table节点或非table节点。
优选地，非table节点包括块级节点、内联节点和浮动节点，并且所述大小及相对坐标计算单元还包括：table节点大小计算单元，用于使用棋盘布局算法计算table节点的大小；和/或非table节点大小计算单元，用于使用画布布局算法计算块级节点和浮动节点的大小，根据CSS信息算出内联节点的大小；以及相对坐标计算单元，用于使用画布布局算法计算上述table节点、块级节点、浮动节点和内联节点的父节点的大小并得出上述节点的相对坐标。
由此，就为实现依据本发明的快速网页渲染提供了装置上的支持。
附图说明
通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。
图1是根据本发明的一个实施例的网页渲染方法的示意性流程图。
图2是图1所示步骤S200可以包括的子步骤的流程图。
图3是图1所示方法的一个可选步骤S150的流程图。
图4是图2所示步骤S210可以包括的子步骤的流程图。
图5是棋盘布局算法的一个例子的示意图。
图6是画布布局算法的一个例子的示意图。
图7是根据本发明的一个实施例的网页渲染装置的示意性方框图。
图8是图7所示大小及绝对坐标计算单元200的可选内部结构的示意性方框图。
图9是图7所示网页渲染装置中可选包括的分类单元的示意图。
图10是图8所示大小及相对坐标计算单元210的可选内部结构的示意性方框图。
具体实施方式
下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。
图1是根据本发明的一个实施例的网页渲染方法的示意性流程图。
在步骤S100，将网页中的html标签作为节点并引入CSS信息，由此建立包含视觉信息的网页树状结构(VisualTree)，其中引入的CSS信息包括节点的显示属性。
在步骤S200，计算VisualTree中节点的大小和绝对坐标。
在步骤S300，根据节点的大小、绝对坐标和显示属性来计算节点的可见性，以完成对网页的渲染。
众所周知，html(超文本标记语言)是用来描述网页的一种标记语言，其使用标签用来结构化信息，例如标题、段落和列表等。而CSS(层叠样式表)则是一种为结构化文档(诸如，html文档)添加样式(诸如，字体、间距和颜色等)的计算机语言，被引入以方便对网页的内容与显示进行区分。
根据html自身的结构层次特性，一个标签中可以包含若干子标签。这在视觉上体现为一个网页块可以包含若干网页块，而且这种包含层次关系是可以嵌套的。由于每一个html标签基本上可以代表一个网页 块，因此计算网页的视觉信息就可以转化为计算各网页块的视觉信息，即是网页块在整个网页中的绝对坐标、网页块大小和网页块可见性等特征，针对网页块的渲染布局就是计算网页块视觉信息的过程。
在本发明中，通过将网页中的html标签作为节点并引入CSS信息，建立包含视觉信息的网页树状结构，即VisualTree。VisualTree中的各个节点与网页中的各个网页块相对应，并且引入定义了各网页块样式的CSS信息，因此通过读取CSS信息中包括的显示属性，并且计算VisualTree中的各个节点的大小和绝对坐标，就能够计算节点的可见性，由此实现对网页的渲染布局。
在现有技术中，浏览器内核进行网页渲需要与多个模块进行各种交互和调用，并且需要大量的计算。例如，火狐浏览器内核的网页渲染速度经测试只能达到每秒10～20页面。相比之下，通过使用本发明中自定义的VisualTree来将网页渲染简化为网页块级的计算，就能够在保证网页搜索和网页转码等场景所需要的准确性的同时，大大提高网页渲染速度。例如，在一个优选实施例中，以字符误差的准确性实现每秒600页面以上的渲染速度。
另外，本发明所公开的上述方法基于html和CSS，完全遵循W3C(万维网联盟)现行的CSS2.1规范，具有良好的兼容性和可移植性。
在一个优选实施例中，VisualTree上只包括和渲染布局有关的节点。例如，在创建VisualTree时排除CSS属性display(显示)为none(无)的节点，因为它和布局无关。
这样就将需要处理的节点进一步限定为那些涉及渲染布局的节点，从而排除与显示无关的节点的相关计算，由此提高计算效率。显而易见的是，VisualTree上也可以包括全部节点，这并不影响本发明所要实现的效果。
图2是图1所示步骤S200可以包括的子步骤的流程图。
在步骤S210，对VisualTree进行后根遍历以计算节点的大小和相对坐标。
在步骤S220，根据计算出的节点的大小和相对坐标，对VisualTree 进行先根遍历以计算节点的绝对坐标。
在本发明的一个优选实施例中，对VisualTree中各节点大小和绝对坐标的计算可以通过可以对VisualTree进行一遍后根遍历，再进行一遍先根遍历来实现。
具体地，对VisualTree进行后根遍历可以实现对VisualTree中各个节点的大小(即长度和宽度)和相对坐标的计算。当遍历到根节点时，全局视图限于该根节点及其所有直接子节点，因此能够算出该根节点的子节点针对于其父节点的相对坐标。
对VisualTree进行后根遍历是自底向上遍历。例如，当一个body(主体)节点A包含了两个div(分割)节点B和C时，会先完成两个div节点B和C的大小(即长度和宽度)和相对坐标的计算，再完成body节点A的大小(即长度和宽度)和相对坐标的计算。
在计算出各节点的大小和相对坐标之后，就能够根据算出的大小和相对坐标对VisualTree进行先根遍历，由此计算各个节点的绝对坐标。
在一个优选实施例中，计算节点的绝对坐标的方法可以是：先将根节点的绝对坐标初始化为(0,0)，从根节点开始遍历，该根节点的直接子节点的绝对坐标等于该根节点的绝对坐标加上该直接子节点的相对坐标；因此任意一个节点的绝对坐标的算法即为：节点的绝对坐标＝该节点的父节点的绝对坐标+该节点的相对坐标。
例如，根节点为body节点，首先将body节点的绝对坐标初始化为(0,0)，遍历从body节点开始，该body节点的直接子节点的绝对坐标＝body节点绝对坐标+该直接子节点相对坐标。当计算出直接子节点的绝对坐标后，该直接子节点的直接子节点的绝对坐标也可以采用该方式计算。所有节点的绝对坐标采用先根遍历递归调用方式完成。
由此，通过上述优选实施例的描述，进一步明确了是使用自下而上的方式计算节点的大小和相对坐标，并使用自上而下的方式计算节点的绝对坐标，由此进一步提高了对各网页块大小和坐标的计算速度。
虽然上文给出了通过后根先根两次遍历来计算节点大小和绝对坐 标的方法，但是本领域技术人员也可以根据此处的公开想到其他求取节点大小和绝对坐标的方法，而不被背离本发明的精神和范围。
图3是图1所示方法的一个可选步骤S150的流程图。
在步骤S150，将VisualTree上的节点分类为table(表格)节点或非table节点。
在计算节点大小和绝对坐标的步骤200之前，可以先对VisualTree上的节点进行分类。可以根据CSS信息来定义节点的分类标准。在一个优选实施例中，根据现有技术，节点主要分为table节点与非table节点。对于不同的节点，可以使用不同的方法来获取节点的大小与相对坐标。
图4是图2所示步骤S210可以包括的子步骤的流程图。
非table节点(非t节点)包括块级节点、内联节点和浮动节点。因此，在一个优选实施例中，可以使用不同的方法来获取对上述非table节点及table节点(t节点)的大小和相对坐标，由此进一步优化计算效率。
在步骤S211中，使用棋盘布局算法计算table节点的大小。
在html语言中，使用<table>标签来定义html表格。html表格由table元素以及一个或多个tr和td元素组成，其中tr元素定义表格行，td元素定义表格单元。
在本发明所定义的VisualTree上，table标签变为table节点。由于table节点通常分为若干行，即若干个tr节点，一个tr节点又分为若干列，即包括若干td节点，所以一个table节点由若干td节点组成，整个table节点类似棋盘，每个td节点类似棋盘上的格子，同一行的td节点组成了tr节点。td节点可能会跨行跨列(由td元素的rowspan(行跨度)和colspan(列跨度)属性决定)，table节点每行的所有td节点高度必须一致，每列的td节点宽度必须一致；因此针对table节点的特殊性，使用棋盘布局算法来计算各个table节点的大小，棋盘的每一个格子放入一个td节点，可以方便的解决table的行列一致性问题及跨行跨列问题。
在一个优选实施例中，使用棋盘布局算法计算各个table节点的大小的方法具体为：用td逐个并逐行地填充棋盘，当td确定放到棋盘的哪个位置之后，td的相对坐标就确定了；当一行的td填充完毕后，就能确定该行tr的大小和相对坐标；当所有的tr都填充完毕后，就能确定整个table的大小。
图5是table棋盘布局算法的一个例子的示意图。如图5所示，图5的上半部分是以td为单元格的棋盘，每个格子容纳一个td节点，格子为true代表有效，false为无效。图5的下半部分为对应的实际表格，第一行只有一个td，该td的colspan＝6，即该td的大小为(1,6)，所以看到上部棋盘的第一行仅有第一个单元格为true，代表被第一行的td占据，其余都为false，表示不可用。类似的情况也发生在第二行，共有两个td元素，每个td元素都具有属性colspan＝3，即该每个td的大小为(1,3)。第三行有六个td元素，每个td的大小为(1,1)，相应的上部棋盘第三行的单元格全部为true。
在步骤S212中，使用画布布局算法计算块级节点和浮动节点的大小，并根据CSS信息算出内联节点的大小。
非Table节点可以分为块级节点、内联节点与浮动节点，其中内联节点的大小可以直接从CSS信息中算出。而对于另外两种节点，则可以使用生成画布再将子节点填充至画布内以求取画布真实高宽的方法(即，画布布局算法)来计算其节点大小。由于内联节点的大小可以从CSS信息中算出，因此内联节点是没有画布的，只负责填充块级节点的画布。
在一个优选实施例中，使用画布布局算法计算各个非Table节点的大小具体为：首先根据CSS初步计算的节点宽度和高度(并不能代表节点的真实大小)生成一张画布，然后根据CSS规范将其直接子节点放入画布中，所有子节点放入画布后画布的真实宽高即为节点的真实大小。
一个块级节点生成一张画布，当对块级节点进行大小计算时，如果该块级节点的直接子节点是内联节点，例如文字，则先选用CSS属 性font-size(字体大小)计算出每个文字的子宽，并利用CSS属性line-height(行高)计算出块级节点内部每一行的行高，然后再直接根据文字数、子宽和行高对块级节点的画布进行填充，填充完之后该画布的真实宽高即为该块级节点的大小。
当该块级节点的直接子节点不是内联节点时，计算该块级节点的大小就是用这些子节点一并对该块级节点的画布进行填充，根据子节点的大小可以计算出该子节点占据块级节点的画布的哪些空间，当其中一个子节点填充完成后，需要对该块级节点的画布进行切割，其他子节点只能在切割后的画布的剩余空间内进行填空，当所有子节点都填充完成后，该块级节点的画布被占据的大小即为该块级节点的大小。例如，节点A’有两个子节点B’和C’，在进行节点A’的大小计算时，为节点A’生成一张画布，然后将节点B’和C’放入节点A’的画布中，而在计算节点B’和C’的大小时，分别为节点B’和C’生成一张画布。也就是说，上述过程是自底向上的，即，先计算节点B’和C’的大小，再计算节点A’的大小。
在步骤S213中，使用画布布局算法计算上述table节点、块级节点、浮动节点和内联节点的父节的父节点的大小并得出上述节点的相对坐标。
节点的相对坐标的计算是在计算其父节点大小的过程中完成的，在将节点放入其父节点布局画布的过程中计算出该节点基于父节点画布原点的相对坐标。
Table节点的相对坐标的计算方法也是一样的，同样需要将该Table节点放置到其父节点的画布中时才能确定。由于Table节点的父节点一般都是块级节点，因此在计算其父节点的大小时，需要使用画布布局算法来计算，即需要将该Table节点填充到其父节点的画布中，由此确定该Table节点的相对坐标。
图6是画布布局算法的一个例子的示意图。如图所示，灰色区域代表已被占据的位置(例如，浮动块left1、right1、right2)，空白区域代表可布局的位置。可布局区域有所区分，即不同类型的节点选 择不同的空白区域进行布局。具体地，在图6的实施例中，对于内联块，如文字、span(跨度)节点等，布局到3号区域；对于浮动块(具有CSS属性float(浮动)的节点)，布局到2号区域；而对于普通的块级元素，如display为block(块)的div元素，则布局到0号区域。完成一个节点的布局之后，需要切割画布，重新划分占据区域和可用区域。
由此，通过上述步骤S211～S213，就能够使用不同的方法获取各类节点的大小和相对坐标。由于使用了针对各类节点特征的特定方法，因此优化了计算，从而进一步提高了网页渲染速度。
显而易见的是，步骤S211和S212无需按照上述次序进行，上述步骤可以并行或以任意顺序执行，这些改变都位于本发明的精神和范围之内。
现在，结合上述公开并重新图1，对根据节点的大小、绝对坐标和显示属性来计算节点的可见性以完成对网页的渲染的步骤S300进行进一步的阐述。
计算节点的可见性关键在于计算节点的可见区域。节点内容若位于可见区域内，则说明是可见的；否则说明是隐藏的。
在一个优选实施例中，计算各个节点的可见性可以首先计算根节点的可见性。从根节点开始遍历，然后再计算根节点的直接子节点的可见性。根节点的可见区域是根据该节点的大小、绝对坐标以及显示属性(例如，overflow(溢出)属性)来计算的。
例如，假设根节点A”的绝对坐标为(0,0)，长与宽(大小)分别为100和80，且该节点的overflow属性为hidden(overflow属性为hidden(隐藏)表示超出其可见区域的子节点内容是不可见的)。因此该根节点A”的可见区域坐标为(0,0)且大小为(100,80)。
子节点的可见性可以根据父节点的坐标、可见区域，父节点的显示属性、以及自身的坐标与大小来计算。子节点可能没有相关的显示属性，但是如果其祖先节点有例如overflow属性，则会影响到该子节点的可见性。所以可见性计算不限于有例如overflow属性的节点，会 涉及其所有子孙节点。
例如，根节点A”有子节点B”，子节点B”的坐标为(50,50)，长与宽(大小)分别为60和70。由于父节点A”(即根节点A”)的overflow属性为hidden，所以子节点B”的内容中只有与父节点A”重叠的区域的内容是可以显示，其余区域的内容会被隐藏。因此根据子节点B”的父节点A”的坐标、可见区域计算得到子节点B”的可见区域坐标(50,50)且大小(50,30)。
综上，通过构建VisualTree并例如通过完成后根遍历与先根遍历来实现对网页中各个网页块的大小(和相对坐标)、绝对坐标和可见性等特征的计算，从而最终完成整个网页页面的视觉信息渲染。
上面参考图1-6详细描述了根据本发明的一种网页渲染方法。下面参考图7-10描述网页渲染装置及其相关单元的构造。
下面描述的装置的很多单元的功能分别与上面参考图1-4描述的相应步骤的功能相同。为了避免重复，这里重点描述该装置和系统可以具有的单元或装置结构，而对于一些细节则不再赘述，可以参考上文中的相应描述。
图7是根据本发明的一个实施例的网页渲染装置的示意性方框图。
如图7所示，该装置包括创建单元100、大小及绝对坐标计算单元200以及可见性计算单元300。
创建单元300将网页中的html标签作为节点并引入CSS信息以创建包含视觉信息的网页树状结构(VisualTree)。CSS信息包括节点的显示属性。
大小及绝对坐标计算单元200计算所述VisualTree中节点的大小和绝对坐标。
可见性计算单元300则根据节点的大小、绝对坐标和显示属性来计算节点的可见性以完成对网页的渲染。
图8是图7所示大小及绝对坐标计算单元200的可选内部结构的示意性方框图。
如图7所示，大小及绝对坐标计算单元200可以包括大小及相对 坐标计算单元210和绝对坐标计算单元220。
大小及相对坐标计算单元210对VisualTree进行后根遍历以计算节点的大小和相对坐标。
绝对坐标计算单元220则根据节点的所述大小和相对坐标来对VisualTree进行先根遍历以计算节点的绝对坐标。
图9是图7所示网页渲染装置中可选包括的分类单元的示意图。在一个优选实施例中，网页渲染装置可以可选地包括分类单元150。该分类单元150能够将VisualTree上的所有节点分类为table节点或非table节点。
图10是图8所示大小及相对坐标计算单元210的可选内部结构的示意性方框图。
如图10所示，大小及相对坐标计算单元210可以包括table节点大小计算单元211、非table节点大小计算单元212以及相对坐标计算单元213。
table节点大小计算单元211使用棋盘布局算法计算table节点的大小。
非table节点大小计算单元212使用画布布局算法计算块级节点和浮动节点的大小，并根据CSS信息计算内联节点的大小。
相对坐标计算单元213使用画布布局算法计算上述table节点、块级节点、浮动节点和内联节点的父节的父节点的大小并得出上述节点的相对坐标。
以上公开了根据本发明的网络渲染方法和装置。本发明的原理基于树的遍历完成，遍历过程中包含的计算量可控，且无回溯计算。发明人随机选择50000个页面进行性能测试，单页面平均渲染耗时1.63ms，平均网页渲染速度为613个/s。相比浏览器渲染速度提高了30～60倍。
效果上而言，类似新浪首页如此结构复杂的页面，渲染效果也相当理想。除了在字体上渲染存在少量的不准确之外，在网页块的视觉信息渲染方面还是相当准确的。
此外，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的方法中限定的上述功能的计算机程序。本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。
附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。