所示大小及绝对坐标计算单元200的可选内部结构的示意性方框图。
[0099]如图7所示，大小及绝对坐标计算单元200可以包括大小及相对坐标计算单元210和绝对坐标计算单元220。
[0100]大小及相对坐标计算单元210对VisualTree进行后根遍历以计算节点的大小和相对坐标。
[0101]绝对坐标计算单元220则根据节点的所述大小和相对坐标来对VisualTree进行先根遍历以计算节点的绝对坐标。
[0102]图9是图7所示网页渲染装置中可选包括的分类单元的示意图。在一个优选实施例中，网页植染装置可以可选地包括分类单元150。该分类单元150能够将VisualTree上的所有节点分类为table节点或非table节点。
[0103]图10是图8所示大小及相对坐标计算单元210的可选内部结构的示意性方框图。
[0104]如图10所示，大小及相对坐标计算单元210可以包括table节点大小计算单元211、非table节点大小计算单元212以及相对坐标计算单元213。
[0105]table节点大小计算单元211使用棋盘布局算法计算table节点的大小。
[0106]非table节点大小计算单元212使用画布布局算法计算块级节点和浮动节点的大小，并根据CSS信息计算内联节点的大小。
[0107]相对坐标计算单元213使用画布布局算法计算上述table节点、块级节点、浮动节点和内联节点的父节的父节点的大小并得出上述节点的相对坐标。
[0108]以上公开了根据本发明的网络渲染方法和装置。本发明的原理基于树的遍历完成，遍历过程中包含的计算量可控，且无回溯计算。发明人随机选择50000个页面进行性能测试，单页面平均渲染耗时1.63ms，平均网页渲染速度为613个/S。相比浏览器渲染速度提高了 30?60倍。
[0109]效果上而言，类似新浪首页如此结构复杂的页面，渲染效果也相当理想。除了在字体上渲染存在少量的不准确之外，在网页块的视觉信息渲染方面还是相当准确的。
[0110]此外，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的方法中限定的上述功能的计算机程序。本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。
[0111]附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
[0112]以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。
【主权项】
1.一种网页渲染方法，包括: 将网页中的html标签作为节点并引入层叠样式表(CSS)信息，以创建包含视觉信息的网页树状结构(VisualTree)，其中所述CSS信息包括节点的显示属性； 计算所述VisualTree中节点的大小和绝对坐标；以及 根据节点的大小、绝对坐标和显示属性来计算节点的可见性，以完成对网页的渲染。2.如权利要求1所述的方法，其中所述VisualTree上的节点是与植染布局有关的节点。3.如权利要求1所述的方法，其中计算所述VisualTree中节点的大小和绝对坐标包括: 对VisualTree进行后根遍历以计算节点的大小和相对坐标；以及 根据节点的所述大小和相对坐标，对VisualTree进行先根遍历以计算节点的绝对坐标。4.如权利要求3所述的方法，在计算所述VisualTree中节点的大小和绝对坐标之前还包括: 将VisualTree上的节点分类为table节点或非table节点。5.如权利要求4所述的方法，其中所述非tabI e节点包括块级节点、内联节点和浮动节点，并且对VisualTree进行后根遍历以计算节点的大小和相对坐标进一步包括: 使用棋盘布局算法计算table节点的大小；并且/或者 使用画布布局算法计算块级节点和浮动节点的大小，并根据CSS信息算出内联节点的大小；以及 使用画布布局算法计算上述table节点、块级节点、浮动节点和内联节点的父节点的大小并得出上述节点的相对坐标。6.如权利要求3所述的方法，其中根据节点的所述大小和相对坐标对VisualTree进行先根遍历以计算节点的绝对坐标包括: 将根节点的绝对坐标初始化为(O，O)，使用如下公式计算每个节点的绝对坐标，直到最末梢的节点为止: 绝对坐标=父节点的绝对坐标+相对坐标。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节点、块级节点、浮动节点和内联节点的父节点的大小并得出上述节点的相对坐标。
【专利摘要】本发明公开了一种网页渲染方法和装置。该方法包括：将网页中的html标签作为节点并引入CSS信息，以创建包含视觉信息的网页树状结构(VisualTree)，其中所述CSS信息包括节点的显示属性；计算所述VisualTree中节点的大小和绝对坐标；根据节点的大小、绝对坐标和显示属性来计算节点的可见性，以完成对网页的渲染。由此，能够在功能上保证网页块视觉显示的准确性同时，在性能上满足搜索/转码网页分析批量处理的速度要求。
【IPC分类】G06F17/30, G06F9/44
【公开号】CN104951302
【申请号】CN201510320708
【发明人】陈力, 刘振鲁, 曾洪雷
【申请人】广州神马移动信息科技有限公司
【公开日】2015年9月30日
【申请日】2015年6月11日