[0071]在一个优选实施例中，使用棋盘布局算法计算各个table节点的大小的方法具体为:用td逐个并逐行地填充棋盘，当td确定放到棋盘的哪个位置之后，td的相对坐标就确定了 ；当一行的td填充完毕后，就能确定该行tr的大小和相对坐标；当所有的tr都填充完毕后，就能确定整个table的大小。
[0072]图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，I)，相应的上部棋盘第三行的单元格全部为true。
[0073]在步骤S212中，使用画布布局算法计算块级节点和浮动节点的大小，并根据CSS信息算出内联节点的大小。
[0074]非Table节点可以分为块级节点、内联节点与浮动节点，其中内联节点的大小可以直接从CSS信息中算出。而对于另外两种节点，则可以使用生成画布再将子节点填充至画布内以求取画布真实高宽的方法(即，画布布局算法)来计算其节点大小。由于内联节点的大小可以从CSS信息中算出，因此内联节点是没有画布的，只负责填充块级节点的画布。
[0075]在一个优选实施例中，使用画布布局算法计算各个非Table节点的大小具体为:首先根据CSS初步计算的节点宽度和高度(并不能代表节点的真实大小)生成一张画布，然后根据CSS规范将其直接子节点放入画布中，所有子节点放入画布后画布的真实宽高即为节点的真实大小。
[0076]—个块级节点生成一张画布，当对块级节点进行大小计算时，如果该块级节点的直接子节点是内联节点，例如文字，贝1J先选用CSS属性font-size(字体大小)计算出每个文字的子宽，并利用CSS属性line-height (行高)计算出块级节点内部每一行的行高，然后再直接根据文字数、子宽和行高对块级节点的画布进行填充，填充完之后该画布的真实宽高即为该块级节点的大小。
[0077]当该块级节点的直接子节点不是内联节点时，计算该块级节点的大小就是用这些子节点一并对该块级节点的画布进行填充，根据子节点的大小可以计算出该子节点占据块级节点的画布的哪些空间，当其中一个子节点填充完成后，需要对该块级节点的画布进行切割，其他子节点只能在切割后的画布的剩余空间内进行填空，当所有子节点都填充完成后，该块级节点的画布被占据的大小即为该块级节点的大小。例如，节点A’有两个子节点B’和C’，在进行节点A’的大小计算时，为节点A’生成一张画布，然后将节点B’和C’放入节点A’的画布中，而在计算节点B’和C’的大小时，分别为节点B’和C’生成一张画布。也就是说，上述过程是自底向上的，即，先计算节点B’和C’的大小，再计算节点A’的大小。
[0078]在步骤S213中，使用画布布局算法计算上述table节点、块级节点、浮动节点和内联节点的父节的父节点的大小并得出上述节点的相对坐标。
[0079]节点的相对坐标的计算是在计算其父节点大小的过程中完成的，在将节点放入其父节点布局画布的过程中计算出该节点基于父节点画布原点的相对坐标。
[0080]Table节点的相对坐标的计算方法也是一样的，同样需要将该Table节点放置到其父节点的画布中时才能确定。由于Table节点的父节点一般都是块级节点，因此在计算其父节点的大小时，需要使用画布布局算法来计算，即需要将该Table节点填充到其父节点的画布中，由此确定该Table节点的相对坐标。
[0081]图6是画布布局算法的一个例子的示意图。如图所示，灰色区域代表已被占据的位置(例如，浮动块leftl、rightl、right2)，空白区域代表可布局的位置。可布局区域有所区分，即不同类型的节点选择不同的空白区域进行布局。具体地，在图6的实施例中，对于内联块，如文字、span(跨度)节点等，布局到3号区域；对于浮动块(具有CSS属性float (浮动)的节点)，布局到2号区域；而对于普通的块级元素，如display为block(块)的div元素，则布局到O号区域。完成一个节点的布局之后，需要切割画布，重新划分占据区域和可用区域。
[0082]由此，通过上述步骤S211?S213，就能够使用不同的方法获取各类节点的大小和相对坐标。由于使用了针对各类节点特征的特定方法，因此优化了计算，从而进一步提高了网页渲染速度。
[0083]显而易见的是，步骤S211和S212无需按照上述次序进行，上述步骤可以并行或以任意顺序执行，这些改变都位于本发明的精神和范围之内。
[0084]现在，结合上述公开并重新图1，对根据节点的大小、绝对坐标和显示属性来计算节点的可见性以完成对网页的渲染的步骤S300进行进一步的阐述。
[0085]计算节点的可见性关键在于计算节点的可见区域。节点内容若位于可见区域内，则说明是可见的；否则说明是隐藏的。
[0086]在一个优选实施例中，计算各个节点的可见性可以首先计算根节点的可见性。从根节点开始遍历，然后再计算根节点的直接子节点的可见性。根节点的可见区域是根据该节点的大小、绝对坐标以及显示属性(例如，overflow(溢出)属性)来计算的。
[0087]例如，假设根节点A”的绝对坐标为(0，O)，长与宽(大小)分别为100和80，且该节点的overflow属性为hidden (overflow属性为hidden (隐藏)表示超出其可见区域的子节点内容是不可见的)。因此该根节点A”的可见区域坐标为(0，0)且大小为(100，80)。
[0088]子节点的可见性可以根据父节点的坐标、可见区域，父节点的显示属性、以及自身的坐标与大小来计算。子节点可能没有相关的显示属性，但是如果其祖先节点有例如overflow属性，则会影响到该子节点的可见性。所以可见性计算不限于有例如overflow属性的节点，会涉及其所有子孙节点。
[0089]例如，根节点A”有子节点B”，子节点B”的坐标为(50，50)，长与宽(大小)分别为60和70。由于父节点A” (即根节点A”)的overflow属性为hidden，所以子节点B”的内容中只有与父节点A”重叠的区域的内容是可以显示，其余区域的内容会被隐藏。因此根据子节点B”的父节点A”的坐标、可见区域计算得到子节点B”的可见区域坐标(50，50)且大小(50，30) ο
[0090]综上，通过构建VisualTree并例如通过完成后根遍历与先根遍历来实现对网页中各个网页块的大小(和相对坐标)、绝对坐标和可见性等特征的计算，从而最终完成整个网页页面的视觉信息渲染。
[0091]上面参考图1-6详细描述了根据本发明的一种网页渲染方法。下面参考图7-10描述网页渲染装置及其相关单元的构造。
[0092]下面描述的装置的很多单元的功能分别与上面参考图1-4描述的相应步骤的功能相同。为了避免重复，这里重点描述该装置和系统可以具有的单元或装置结构，而对于一些细节则不再赘述，可以参考上文中的相应描述。
[0093]图7是根据本发明的一个实施例的网页渲染装置的示意性方框图。
[0094]如图7所示，该装置包括创建单元100、大小及绝对坐标计算单元200以及可见性计算单元300。
[0095]创建单元300将网页中的html标签作为节点并引入CSS信息以创建包含视觉信息的网页树状结构(VisualTree)。CSS信息包括节点的显示属性。
[0096]大小及绝对坐标计算单元200计算所述VisualTree中节点的大小和绝对坐标。
[0097]可见性计算单元300则根据节点的大小、绝对坐标和显示属性来计算节点的可见性以完成对网页的渲染。
[0098]图8是图7