WO2014071749A1

WO2014071749A1 - 一种基于html5协议的网页展现方法及装置

Info

Publication number: WO2014071749A1
Application number: PCT/CN2013/079845
Authority: WO
Inventors: 谢成鸿
Original assignee: 北京中娱在线网络科技有限公司
Priority date: 2012-11-06
Filing date: 2013-07-23
Publication date: 2014-05-15
Also published as: KR20150079867A; JP2016505911A; CN102955854A; US20150286739A1; CN102955854B

Abstract

本申请实施例公开了一种基于HTML5协议的网页展现方法。该方法包括：获取基于HTML5协议的网页资源；以Javascript语言解析网页资源生成DOM对象节点；渲染DOM对象后进行网页展现。本申请实施例还公开了一种基于HTML5协议的网页展现的展现装置。本申请实施例无需借助外在的插件程序即可实现对HTML5协议的支持，避免了进行插件安装或者功能更新升级等操作，提高了基于HTML5协议的网页的展现效率。

Description

一种基于 HTML5协议的网页展现方法及装置本申请要求于 2012 年 11 月 6 日提交中国专利局、申请号为 201210438976.8、发明名称为 "一种基于 HTML5协议的网页展现方法及装置" 的中国专利申请的优先权，该在先申请的全部内容通过引用结合在本申请中。技术领域本申请涉及信息展现技术领域，特别涉及一种基于 HTML5协议的网页展现方法及其相应的装置。

背景技术

HTML5 ( Hypertext Markup Language 5rd, 超文本标记语言标准第 5版，又称为 HTML标准版本 )是用于取代 1999年制定的 HTML 4.01和 XHTML 1.0协议的新 HTML协议标准。 HTML5协议相对于以前的版本具有两大突出特点：一是强化了 Web网页的表现性能；二是增加了本地数据库等 Web应用功能，其目的在于通过减少浏览器对基于插件的丰富性网络应用服务（plug-in-based rich internet application, RIA, ^口 Adobe Flash、 Microsoft Silverlight, Oracle JavaFX等）的需求，提供更多有效增强网络应用的标准集。

然而，由于 HTML5协议对插件需求的减少，在现有技术框架下，目前的浏览器（比如 IE6.0〜8.0、搜狗、火狐、 Chrome等）如果没有额外的插件程序，或者不进行必要的功能升级，将无法基于 HTML5协议实现网页展现。

发明内容

为解决上述技术问题，本申请实施例提供一种基于 HTML5协议的网页展现方法及其对应的装置，以提供一种无需额外的插件程序或功能升级即可进行基于 HTML5协议的网页展现。

本申请实施例提供的基于 HTML5协议的网页展现方法包括：

获取基于 HTML5协议的网页资源；

以 Javascript语言解析网页资源生成 DOM对象节点；

渲染 DOM对象后进行网页展现。

优选地，所述以 Javascript语言解析网页资源生成 DOM对象节点具体包括：调用 DOM对象创建函数根据 HTML标签创建 DOM对象节点。进一步优选地，在以 Javascript 语言对网页资源进行词法分析以获得

HTML标签后，生成与 HTML标签相应的调用 DOM对象创建函数创建 DOM 对象节点的 Javascript代码，则所述调用 DOM对象创建函数根据 HTML标签创建 DOM对象节点具体为：

根据 HTML标签调用与该 HTML标签相应的 Javascript代码创建 DOM对象节点。

优选地，所述方法还包括：以 Javascript语言实现 DOM对象的控制，具体为：

以 Javascript语言实现 DOM对象、 DOM对象的基类以及可视元素接口，在 DOM对象中根据 HTML标签增加和 /或删除 DOM对象节点 , 和 /或 , 根据 HTML标签属性设置 DOM对象节点的属性。

优选地，所述方法还包括：对至少一个 DOM对象节点的样式进行控制，具体为：

将 DOM对象节点的样式资源编译为 Javascript代码，并将编译形成的 Javascript代码封装为函数；调用该函数对相应的 DOM对象节点进行样式控制。

进一步优选地，当 DOM对象发生变化时，所述方法还包括，对发生变化的 DOM对象节点进行排版，所述变化包括 DOM对象节点的增加、删除和 / 或样式变化，排版过程具体为通过 Javascript语言执行如下步骤：

收集发生变化的 DOM对象节点及其子节点形成排版集合；

计算排版集合内的 DOM对象节点的变化后的属性信息；

用变化后的属性信息修改变化前的属性信息。

优选地，所述渲染 DOM对象包括文字绘制步骤，该文字绘制步骤包括：根据文字尺寸检索预置图片集中是否存在与该文字尺寸匹配的图片；当存在匹配的图片时，判断该图片是否包含待绘制的文字，如果是，则利用该文字在图片中的位置信息绘制文字；如果否，则将待绘制的文字绘制到该图片中，利用该文字在图片中的位置信息绘制文字；当不存在匹配的图片时，创建与该文字尺寸匹配的图片，将待绘制的文字绘制到该图片中，利用该文字在图片中的位置信息绘制文字。

优选地，所述渲染 DOM对象包括材质合并步骤，该材质合并步骤包括：创建空白纹理；

将待绘制对象放置于纹理之中，记录待绘制对象在纹理中的位置信息；当接收到绘制触发时，根据待绘制对象在纹理中的位置信息一次性将纹理中的全部待绘制对象绘制到屏幕上。

本申请还提供了一种基于 HTML5协议的网页展现装置。该装置包括：获取单元、解析单元和渲染单元，其中：

所述获取单元，用于获取基于 HTML5协议的网页资源；

所述解析单元，用于以 Javascript语言解析网页资源生成 DOM对象节点；所述渲染单元，用于渲染 DOM对象后进行网页展现。

优选地，所述解析单元包括词法分析子单元、 DOM对象节点生成子单元，其巾：

所述词法分析子单元，用于以 Javascript语言对网页资源进行词法分析以获得 HTML标签；

所述 DOM 对象节点生成子单元，用于调用 DOM 对象创建函数根据 HTML标签创建 DOM对象节点。

进一步优选地，所述解析单元还包括代码生成子单元，用于在以 Javascript 语言对网页资源进行词法分析以获得 HTML标签后，生成与 HTML标签相应的调用 DOM对象创建函数创建 DOM对象节点的 Javascript代码 ,则所述 DOM 对象节点生成子单元具体根据 HTML 标签调用与该 HTML 标签相应的 Javascript代码创建 DOM对象节点。

优选地，所述装置还包括 DOM对象控制单元，用于以 Javascript语言实现 DOM对象的控制，具体为：

优选地，所述装置还包括样式控制单元，用于对至少一个 DOM对象节点的样式进行控制，具体为将 DOM对象节点的样式资源编译为 Javascript代码，并将编译形成的 j_avascript代码封装为函数；调用该函数对相应的 DOM对象节点进行样式控制。

优选地，当 DOM对象发生变化时，所述装置还包括排版单元，用于对发生变化的 DOM对象节点进行排版，所述变化包括 DOM对象节点的增加、删除和 /或样式变化，排版过程具体为通过 Javascript语言执行如下步骤：

收集发生变化的 DOM对象节点及其子节点形成排版集合；

计算排版集合内的 DOM对象节点变化后的属性信息；

用变化后的属性信息修改变化前的属性信息。

优选地，所述渲染 DOM对象树包括文字绘制，所述渲染单元包括文字绘制单元，所述文字绘制单元包括：检索子单元、判断子单元、创建子单元、第一绘制子单元和第二绘制子单元，其中：

所述检索子单元，用于根据文字尺寸检索预置图片集中是否存在与该文字尺寸匹配的图片，如果存在，则触发判断子单元；如果不存在，则触发创建子单元；

所述判断子单元，用于判断匹配的图片是否包含待绘制的文字，如果是，则触发第一绘制子单元利用该文字在图片中的位置信息绘制文字；如果否，则触发第二绘制子单元将待绘制的文字绘制到该图片中，并触发第一绘制子单元利用该文字在图片中的位置信息绘制文字；

所述创建子单元，用于创建与该文字尺寸匹配的图片，触发第二绘制子单元将待绘制的文字绘制到该图片中，并触发第一绘制子单元利用该文字在图片中的位置信息绘制文字。

优选地，所述渲染 DOM对象包括材质合并，所述渲染单元包括材质合并单元，所述材质合并单元包括：纹理创建子单元、位置信息记录子单元和第三绘制子单元，其中：

所述纹理创建子单元，用于创建空白纹理；

所述位置信息记录子单元，用于将待绘制的对象放置于纹理之中，记录待绘制对象在纹理中的位置信息；

所述第三绘制子单元，用于在接收到绘制触发时，根据待绘制对象在纹理中的位置信息一次性将纹理中的全部待绘制对象绘制到屏幕上。

本申请实施例在获取基于 HTML5协议的网页资源后，以 Javascript语言解析网页资源生成 DOM对象节点，然后渲染 DOM对象后进行网页展现。与现有技术相比，本申请实施例采用 Javascript语言作为对基于 HTML5协议的网页资源的解析语言，由于该语言普遍存在于各种网页浏览器之中，本申请实施例无需借助外在的插件程序即可实现对 HTML5协议的支持，避免了进行插件安装或者功能更新升级等操作，提高了基于 HTML5协议的网页的展现效率。此外，由于本申请实施例仅依赖于 Javascript语言支持 HTML5协议 , 因此可广泛应用于包含 Javascript语言的各种平台之上，增加或提升了这些平台的网页展现性能，提供了一种全平台的开发模式。

附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图 1为本申请实施例一的基于 HTML5协议的网页展现方法流程图；图 2为本申请实施例二的基于 HTML5协议的网页展现方法流程图；图 3为本申请实施例三的实现文字绘制的方法流程图；

图 4为本申请实施例三的材质合并的方法流程图；

图 5 ( a ) 〜（e ) 为本申请实施例三的合并过程示意图；

图 6为本申请实施例四的基于 HTML5协议的网页展现装置的结构框图。具体实施方式为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。实施例一网页展现过程包括一系列紧密相连的操作，比如网页资源的下载，对网页资源的解析、渲染等。基于不同协议标准的网页资源的解析过程存在差别，正是由于这种差异导致较多的浏览器无法支持像基于 HTML5协议的网页资源，现有技术解决该问题的通常做法是借助于外在插件程序或者通过专门的升级程序包实现升级，而这些做法与 HTML5协议减少插件使用的宗旨相悖。本申请通过浏览器自带的 Javascript语言完成解析过程，从而较好地解决了上述问题。

参见图 1 , 该图示出了本申请实施例的基于 HTML5协议的网页展现方法的流程。该实施例包括：

步骤 S101 : 获取基于 HTML5协议的网页资源；

获取网页资源是进行网页展现的基础，网络资源的来源主要包括两种途径：一是从服务器端下载的网页资源（首次网页资源），二是基于从服务器端下载的资源动态生成的网页资源（二次网页资源）。来自于服务器端的网页资源，是用户通过浏览器向服务器发送包含页面地址的访问请求后，服务端响应该请求向浏览器提供该网页资源。从服务器端下载到的网页资源可以即时提供给浏览器，也可以根据实际应用需要，先将下载的网页资源进行緩存，待对网页资源的获取触发产生后才提供。与此相应地，本实施例获取基于 HTML5协议的网页资源的方式可以包括多种，比如，可以是即时请求即时获得方式，也可以是在接收到网页资源获取触发后，从緩存中提取网页资源。对于生成的网页资源，其是借助于本地系统的处理计算功能，运行下载网页资源中的某些程序段生成的网页资源，比如，脚本程序运行产生的网页代码，某些控件被触发产生的网页资源等。需要说明的是：本申请所需的网页资源既包括上述来自服务器的网页资源，也包括在本地生成的网页资源，并不特别的区分。此外，本实施例对获取的基于 HTML5协议的网页资源的具体类型不作限定，比如可以是文本、图片、声音、视频等资源中任何一种或几组的组合。

步骤 S 102：以 Javascript语言解析网页资源生成 DOM对象节点；

JavaScript语言是浏览器支持的网页脚本语言，传统使用方式主要是将其用于网页信息交互和网页逻辑控制，它依附于网页和浏览器存在。本实施例以 Javascript语言为运行语言，使用其对网页资源进行解析操作，进而生成 DOM 对象节点。 DOM ( Document Object Model, 文档对象模型 )对象是以层次结构对页面元素进行组织的节点或信息片断的集合，它是与浏览器、平台、语言无关的标准组件。

步骤 S103: 渲染 DOM对象后进行网页展现；

DOM对象反映了网页中的各个页面元素之间的关系、位置等信息，这些页面元素通过 DOM对象的节点体现，位置等信息为 DOM对象节点的属性，通过对包含多个 DOM对象节点的整个 DOM对象的渲染，即可实现页面的展现。具体实现渲染时，可以选用浏览器支持的任何一种渲染器对 DOM对象渲染，该选择操作可以在系统初始时判断。当存在多个渲染器时，比如系统同时支持 WebGL、 Falshll、 HTML5画布等渲染器，这种情形下，除可以采用随机选择一种渲染器的方式外，还可以对多个渲染器设定优先级，根据优先级进行选择。

本实施例在获取基于 HTML5协议的网页资源后，以 Javascript语言解析网页资源生成 DOM树展现结构，然后在渲染 DOM树展现结构后进行展现。与现有技术相比，本实施例采用 Javascript语言作为对基于 HTML5协议的网页资源的解析语言，由于该语言普遍存在于各种网页浏览器之中，本实施例无需借助外在的插件程序即可实现对 HTML5协议的支持，避免了进行插件安装或者功能更新升级等操作，提高了基于 HTML5协议的网页的展现效率。此外，由于本申请实施例仅依赖于 Javascript语言支持 HTML5协议，因此可广泛应用于包含 Javascript语言的各种平台之上，增加或提升了这些平台的网页展现性能，提供了一种全平台的开发模式。实施例二

上述实施例以 Javascript语言作为解析语言实现了基于 HTML5协议的网页的支持。实际应用过程中以 Javascript语言作为解析语言对网页资源的解析包括多种实现方式，本申请优选按照如下的实施例完成解析过程。参见图 2, 该图示出了本申请实施例二的基于 HTML5协议的网页展现方法流程。该实施例包括：

步骤 S201 : 获取基于 HTML5协议的网页资源；步骤 S202: 以 Javascript语言对网页资源进行词法分析以获得 HTML标签；

获取的网页资源通常以 HTML代码文件形式存在，进行网页展现，需要先从 HTML代码文件中识别出 HTML5的标签，以便利用该标签创建 DOM树的节点对象。不同 HTML协议版本支持的标签数量和标签种类存在差别，比如 HTML5协议支持的标签包括： HTML、 HEAD, STYLE、 SCRIPT, LINK, BODY, DIV、 IMG、 A、 FONT, CANVAS、 BR、 SVG, webGL。为解析出 HTML标签，本实施例以 Javascript语言对网页资源进行词法分析。具体词法分析方式可以是：逐字符读取 HTML代码文件内容，将 "<" 之后的字符识别为 HTML标签。比如对于如下代码段 "<img width= '100， src= 'l.gif >" , 经过逐字符读取代码段后，将 "<" 后的 "img" 识别为 HTML标签。

步骤 S203: 调用 DOM对象创建函数根据 HTML标签创建 DOM对象节点；

识别出 HTML 标签后，即可根据该标签调用 DOM对象创建函数创建 DOM 对象节点，该过程可以在一个标签解析出来即刻进行，也可以在一个 HTML代码文件内的全部 HTML标签解析完成后进行。比如，当采用每解析完一个 HTML 标签即生成 DOM对象节点的方式时，本步骤根据解析出的 HTML标签调用 DOM对象创建函数 laya.document.createElement (标签名 )生成与该标签对应的 DOM对象节点，然后继续解析下一个标签。值得注意的是：当标签具有属性值时，还可以调用 DOM对象 set函数设置生成的 DOM对象节点的属性。

步骤 S204: 渲染 DOM对象后进行网页展现。

本实施例同样能够取得前述实施例的技术效果。此外，在此实施例基石出上，还可以根据实际需要，对本实施例的技术方案进行改进以满足特殊要求。

比如，在实际应用过程中，为提高解析速度，可以对本实施例的解析步骤进行改进：在以 Javascript语言对网页资源进行词法分析获取 HTML标签之前，先将 HTML代码文件编译为 Javascript代码。经过这样的预处理后，在下次解析相同代码段时，将不再需要进行语法分析，进而大大提高解析效率。仍以前述代码段为例：假设 "<img width= '100， src= 'l.gif " 代码段在代码文件中多次出现，当第一次进行词法分析时，将该代码段翻译成如下的 Javascript代码（伪代码）：

function htmlCache— 1(· ..)

{

var obj=document.createElement("img");

obj.set("width",100);

obj.set("src",ⁿ 1.gif );

obj.onCreated();

}

当再次解析 "<img width= ' 100' src= 'l.gif " 代码段时，不需进行解析该代码段的标签、属性等信息的操作，而只需调用 htmlCache— 1 ( ) 即可。还比如，基于本实施例，还可以基于 Javascript语言对 DOM对象进行各种控制管理操作：将标签添加到 DOM 对象（比如， [element] . appendChild(element) )、从 DOM 对象中删除标签 ( 比如， [element]. removeChild(element) ) , 或者修改 DOM树中节点的属性（比如， [element]. setAttribute(nodeName,nodeValue) )„ 实现这种管理的基本原理是使用 javascript语言实现 document (网页文档管理对象）、 node ( Dom对象的基类，提供树形管理和属性操作等接口）、 HTMLElement (提供可视元素的基本接口）。值得强调的是：传统实现 document, node, HTMLElement等多是通过其他语言实现，比如 C++、 JAVA,采用这些语言存在如前所述的难以兼容 HTML5 的问题，针对该问题的解决的主流思路也主要是利用这些语言完成，而本申请实施例采用 Javascript语言为载体实现且实现效果达到甚至超过现有技术，克服了传统技术偏见，取得了较好的效果。通过上述管理操作可以支持新的 DOM标签，只要完成 laya.docHTML [标签名 ]Element的 j avascript对象代码，调用 document. createElement时能生成指定的 DOM对象系统就新增了 div和 img的标签功能，因此，通过本实施例，系统和开发者可以无需升级浏览器完成新的标签和功能扩展和升级，举例如下： laya.doc.HTMLDivElement=function(nodeName)

{

…代码 }

laya.doc.HTMLImgElement=function(nodeName)

{

…代码 }

传统浏览器访问 DOM通过 javascript接口调用由 C实现的本地接口，由于 javascript调用本地接口效率低，因此开发大型网络游戏无法利用浏览器的 DOM优势。本实施例由于 DOM的所有代码本身直接使用 javascript编写， javascript接口之间的调用开销远小于 javascript与本地接口的互调，因此 DOM 的操作效率提升，为以 DOM为核心的游戏或大型项目开发带来了可能。

实施例三

前述实施例详细介绍了本申请对页面资源的解析过程，解析完页面资源后，采用何种具体的渲染方式对解析生成的 DOM树展现结构进行渲染，或者在渲染之前进行何种提高渲染展现效率的预处理措施，本申请实施例对此并不作限定，这样并不影响本申请的发明目的的实现。但是，在实际应用过程，本申请还可以基于 Javascript语言实现相应的操作，以提高渲染展现个性化和效率。这些操作包括样式控制、排版、文本绘制等过程，以下依次介绍基于 Javascript实现这些操作的具体流程。

对于样式控制：样式控制是用于定义网页可视元素的显示风格的，实际应用中可以采用默认方式进行样式控制（不需要采取额外的操作），也可以根据特别需求进行指定的样式控制。样式控制需要确定样式定义源，通常情况样式定义源包括如下四种：浏览器默认样式（ browser default )、外部样式表（ external style sheet )、内部样式表 ( internal style sheet )、内嵌样式表 ( inline style ), 这些可统称为样式资源，样式资源可以以静态方式存在于内存中，也可以根据需要临时动态生成。如果 DOM对象中存在非默认的至少一个 DOM对象节点的样式控制，本实施例先将 DOM树节点的样式资源编译为 Javascript代码，并将编译形成的 j_avascript代码封装为函数；调用该函数对相应的 DOM对象节点进行样式控制。以如下代码段为例： tmpstyle{left: 10px;top:20px;color:red}。先将该样式控制代码段编译为 Javascript代码：

laya.document.styleCache["tmpstyle"]

{

this.setLeft(lO);

this.setTop(20);

this.setColor("red");

}

然后将编译形成的 Javascript 代码封装为函数： laya. document. sty leCache [ " tmpstyle" ] =function() , 这样，渲染的样式控制过程时可以直接执行 laya.document.styleCache["tmpstyle"].call(this) , 而不需分析 {left: 10px;top:20px;color:red}的描述。通过本实施例将样式控制代码段编译为 Javascript代码段的方式进行样式控制，与传统的以 C++或者 Java进行样式控制的方式相比，无需用户升级更新浏览器，提高了样式解析的速度。

对于排版：展现网页过程中包含有样式控制过程，通常会涉及到根据样式控制的要求出发排版需求，在对 DOM对象节点进行修改，比如增加、删除或修改属性等情形下，也将触发排版操作。与传统的借助于 C或 JAVA代码进行排版操作不同，本实施例同样可以采用 Javascript语言进行排版步骤：收集发生变化的 DOM对象节点及其子节点形成排版集合；计算排版集合内的 DOM 对象节点的新属性信息，该属性信息可以是折行、位置、宽度等；利用新属性信息修改 DOM对象节点的原属性信息，然后根据新属性信息对 DOM对象节点进行排版。

对于文字绘制：当面对页面展现渲染过程中的大量文字绘制时，传统的文字绘制通常采用矢量图方式进行绘制，但这种绘制文字的效率较低。本实施例对此进行改进，以绘制图片方式绘制文字，这种方式可提高包含文字绘制的渲染过程的效率。参见图 3 , 该图示出了本实施例的实现文字绘制的过程，该过程包括：

步骤 S301 : 根据文字尺寸检索预置图片集中是否存在与该文字尺寸匹配的图片，如果存在，则执行步骤 S302; 如果否，则执行步骤 S305;

步骤 S302:判断该图片是否包含待绘制的文字，如果是，则执行步骤 S303; 如果否，则执行步骤 S304:

步骤 S303: 返回该文字在图片中的位置信息，利用该信息绘制文字，结束流程；

步骤 S304: 将待绘制的文字绘制到该图片中，利用该文字在图片中的位置信息绘制文字，结束流程；

步骤 S305: 创建与该文字尺寸匹配的图片，将待绘制的文字绘制到该图片中，利用该文字在图片中的位置信息绘制文字。

对于材质合并：在实际的网页展现的渲染过程中，比如 3D、 2D的网络游戏环境，存在大量的文字、图标或表情动画的绘制。传统做法是：每个元素绘制一次，通常情况下整个屏幕上的绘制次数会可能超过 200次，而影响渲染效果的因素通常包括显卡绘制次数和屏幕填充率，超过 200次的绘制次数将大大降低渲染效率。针对该问题，本实施例提供了一种材质合并方法，该方法先将待绘制的文字、图片、表情动画等内容合并到一张预先创建的空白纹理之上，待该空白纹理填充完后再一次性进行绘制提交，从而大大减少了显卡的总绘制次数，提高了效率。参见图 4, 该图示出了本实施例的材质合并方法的流程。该流程包括：

步骤 S401 : 创建空白纹理；

创建空白纹理的过程可通过驱动层（DirectX, OpenGL )创建，其大小本实施例不作限定，可根据实际可能绘制的文字、图标等数量的多少确定；

步骤 S402: 将待绘制对象放置于空白纹理之中，记录待绘制对象在纹理中的位置信息；

本实施例并不直接将待绘制对象绘制到屏幕上，而是先将其合并到空白纹理中，然后记录下这些待绘制对象在纹理中的位置信息。这里的待绘制对象包括文字、图片、动画表情等。步骤 S403: 当接收到绘制触发时，根据待绘制对象在纹理中的位置信息一次性将绘制纹理中的全部待绘制对象绘制到屏幕上；

上述步骤 S402的实现方式可以具体包括多种，比如可以采取格子算法，先将整个空白纹理划分为多个格子（16*16 ), 再根据待绘制对象的宽、高等信息确定要占用的格子数，然后逐行遍历格子，通过获取格子信息确定待绘制对象在空白纹理中的位置。这种方式尽管能够实现多个待绘制对象在空白纹理中的合并，但是逐行遍历格子的方式最大缺点是循环遍历次数过多，严重影响效率提高。一种改进的方式是：每个格子都保存自己右、下连续格子的个数，每次遍历时不再考虑周边格子的状态，直接确定待绘制对象可以放置的位置，然后进行合并操作，进而调整自己左边、上边格子的信息。参见图 5 ( a ) 〜（e ), 其中：图 5 ( a )是空白纹理的开始状态，该空白纹理被划分为 8*8的网格，图 5 ( b )为在该空白纹理中填充了一张占（2*2 )个格子的待绘制对象后的纹理情况，图 5 ( c )为填充第二张待绘制对象（ 1*1 )的纹理情况；图 5 ( d )为填充第三张待绘制对象（7*2 ) 的纹理情况，由于第一行、第二行已不能放置下该待绘制对象，所以将其放置到纹理的第三行中；图 5 ( e ) 为填充第四张待绘制对象（1*1 )的纹理情况。另一种改进方式是：存储每行的空白格子数，遍历时先判断待绘制对象的宽度是否超出该行的空白格子数，如果超过，则直接转入下一行，依次类推。实施例四

以上是对本申请方法实施例的描述，本申请还提供了基于 HTML5协议的网页展现装置实施例。参见图 6, 该图示出了基于 HTML5协议的网页展现装置的结构框图。本装置实施例包括：获取单元 601、解析单元 602和渲染单元 603 , 其中：

获取单元 601 , 用于获取基于 HTML5协议的网页资源；

解析单元 602 , 用于以 Javascript语言解析网页资源生成 DOM对象节点；渲染单元 603 , 用于渲染 DOM对象后进行网页展现。

本装置实施例的工作过程是：获取单元 601先获取基于 HTML5协议的网页资源，然后由解析单元 602以 Javascript语言解析网页资源生成 DOM对象节点，最后渲染单元 603渲染 DOM对象后进行网页展现。

本装置实施例在获取基于 HTML5协议的网页资源后，以 Javascript语言解析网页资源生成 DOM树展现结构，然后渲染 DOM树展现结构后进行展现。与现有技术相比，本装置实施例采用 Javascript语言作为对基于 HTML5协议的网页资源的解析语言，由于该语言普遍存在于各种网页浏览器之中，本装置实施例无需借助外在的插件程序即可实现对 HTML5协议的支持，避免了进行插件安装或者功能更新升级等操作，提高了基于 HTML5协议的网页的展现效率。此外 , 由于本装置实施例仅依赖于 Javascript语言支持 HTML5协议 , 因此可广泛应用于包含 Javascript语言的各种平台之上，增加或提升了这些平台的网页展现性能，提供了一种全平台的开发模式。

上述装置实施例中的解析单元根据不同的解析方式可以具有不同的结构，比如，解析单元 602可以包括词法分析子单元 6021、 DOM对象节点生成子单元 6022, 其中：词法分析子单元 6021 , 用于以 Javascript语言对网页资源进行词法分析以获得 HTML标签； DOM对象节点生成子单元 6022,用于调用 DOM 对象创建函数根据 HTML标签创建 DOM对象节点。此外，解析单元还可以包括代码生成子单元 6023 , 用于在以 Javascript语言对网页资源进行词法分析以获得 HTML标签后，生成与 HTML标签相应的调用 DOM对象创建函数创建 DOM对象节点的 Javascript代码，则所述 DOM对象节点生成子单元具体根据 HTML标签调用与该 HTML标签相应的 Javascript代码创建 DOM对象节点。

上述装置实施例中的渲染单元根据执行渲染操作的具体情况，可以包括不同的结构单元，从而具有不同的内部结构。此外，在渲染单元之前，根据实际需要还可以增加一些单元，用于实现特定目的。

比如，上述装置实施例还可以包括 DOM对象控制单元，用于以 Javascript 语言实现 DOM对象的控制，具体为：以 Javascript语言实现 DOM对象、 DOM 对象的基类以及可视元素接口，在 DOM对象中根据 HTML标签增加和 /或删除 DOM对象节点，和 /或，根据 HTML标签属性设置 DOM对象节点的属性。通过该控制单元可以为开发者提供自定义标签的功能。

还比如，上述装置实施例还可以包括样式控制单元 604, 用于对至少一个 DOM对象节点的样式进行控制，具体为：将 DOM对象节点的样式资源编译为 Javascript代码，并将编译形成的 Javascript代码封装为函数；调用该函数对相应的 DOM树节点进行样式控制。如果样式控制过程触发了渲染的排版操作或者 DOM对象节点发生增加、删除或属性修改等变化，进一步地，上述装置实施例还可以包括排版单元 605,用于对发生变化进的 DOM对象节点的排版，所述变化包括 DOM对象节点的增加、删除和 /或样式变化，排版过程具体为通过 Javascript语言执行如下步骤：收集发生发生变化的 DOM对象节点及其子节点形成排版集合；计算排版集合内的 DOM对象节点变化后的属性信息；利用新属性信息修改 DOM对象节点的原属性信息，从而实现排版。

再比如，当渲染 DOM对象包括文字绘制时，渲染单元 603可以包括文字绘制单元 6031 , 文字绘制单元 6031进一步包括：检索子单元、判断子单元、创建子单元、第一绘制子单元和第二绘制子单元，其中：检索子单元，用于根据文字尺寸检索预置图片集中是否存在与该文字尺寸匹配的图片，如果存在，则触发判断子单元；如果不存在，则触发创建子单元；判断子单元，用于判断匹配的图片是否包含待绘制的文字，如果是，则触发第一绘制子单元利用该文字在图片中的位置信息绘制文字；如果否，则触发第二绘制子单元将待绘制的文字绘制到该图片中，并触发第一绘制子单元利用该文字在图片中的位置信息绘制文字；创建子单元，用于创建与该文字尺寸匹配的图片，触发第二绘制子单元将待绘制的文字绘制到该图片中，并触发第一绘制子单元利用该文字在图片中的位置信息绘制文字。

还比如，当渲染 DOM对象包括材质合并时，渲染单元 603可以包括材质合并单元 6032, 该材质合并单元 6032包括：纹理创建子单元、位置信息记录子单元和第三绘制子单元，其中：纹理创建子单元，用于创建空白纹理；位置信息记录子单元，用于将待绘制的对象放置于纹理之中，记录待绘制对象在纹理中的位置信息；第三绘制子单元，用于在接收到绘制触发时，根据待绘制对象在纹理中的位置信息一次性将纹理中的全部待绘制对象绘制到屏幕上。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和 /或硬件中实现，比如，将上述实现网页展现的装置集合浏览器的其他功能后形成一个浏览器，该浏览器能够支持 HTML5。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中 ,如 ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

本申请可用于众多通用或专用的计算系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络 PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

以上所述仅是本申请的具体实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和'; 饰也应视为本申请的保护范围。

Claims

权利要求

1、一种基于 HTML5协议的网页展现方法，其特征在于，该方法包括：获取基于 HTML5协议的网页资源；

以 Javascript语言解析网页资源生成 DOM对象节点；

渲染 DOM对象后进行网页展现。

2、根据权利要求 1所述的方法，其特征在于，所述以 Javascript语言解析网页资源生成 DOM对象节点具体包括：调用 DOM对象创建函数根据 HTML标签创建 DOM对象节点。

3、根据权利要求 2所述的方法，其特征在于，在以 Javascript语言对网页资源进行词法分析以获得 HTML标签后，生成与 HTML标签相应的调用 DOM 对象创建函数创建 DOM对象节点的 Javascript代码，则所述调用 DOM对象创建函数根据 HTML标签创建 DOM对象节点具体为：

4、根据权利要求 1至 3中任何一项所述的方法，其特征在于，所述方法还包括：以 Javascript语言实现 DOM对象的控制，具体为：

5、根据权利要求 1所述的方法，其特征在于，所述方法还包括：对至少一个 DOM对象节点的样式进行控制，具体为：

6、根据权利要求 5所述的方法，其特征在于，当 DOM对象发生变化时，所述方法还包括，对发生变化的 DOM对象节点进行排版，所述变化包括 DOM 对象节点的增加、删除和 /或样式变化，排版过程具体为通过 Javascript语言执行如下步骤：收集发生变化的 DOM对象节点及其子节点形成排版集合；

计算排版集合内的 DOM对象节点变化后的属性信息；

用变化后的属性信息修改变化前的属性信息。

7、根据权利要求 1所述的方法，其特征在于，所述渲染 DOM对象包括文字绘制步骤，该文字绘制步骤包括：

根据文字尺寸检索预置图片集中是否存在与该文字尺寸匹配的图片；当存在匹配的图片时，判断该图片是否包含待绘制的文字，如果是，则利用该文字在图片中的位置信息绘制文字；如果否，则将待绘制的文字绘制到该图片中，利用该文字在图片中的位置信息绘制文字；

当不存在匹配的图片时，创建与该文字尺寸匹配的图片，将待绘制的文字绘制到该图片中，利用该文字在图片中的位置信息绘制文字。

8、根据权利要求 1所述的方法，其特征在于，所述渲染 DOM对象包括材质合并步骤，该材质合并步骤包括：

创建空白纹理；

9、一种基于 HTML5协议的网页展现装置，其特征在于，该装置包括：获取单元、解析单元和渲染单元，其中：

所述获取单元，用于获取基于 HTML5协议的网页资源；

10、根据权利要求 9所述的装置，其特征在于，所述解析单元包括词法分析子单元、 DOM对象节点生成子单元，其中：

11、根据权利要求 10所述的装置，所述解析单元还包括代码生成子单元，与 HTML标签相应的调用 DOM对象创建函数创建 DOM对象节点的 Javascript 代码，则所述 DOM对象节点生成子单元具体根据 HTML标签调用与该 HTML 标签相应的 Javascript代码创建 DOM对象节点。

12、根据权利要求 9至 11中任何一项所述的装置，其特征在于，所述装置还包括 DOM对象控制单元，用于以 Javascript语言实现 DOM对象的控制，具体为：

13、根据权利要求 9所述的装置，其特征在于，所述装置还包括样式控制单元，用于对至少一个 DOM对象节点的样式进行控制，具体为将 DOM对象节点的样式资源编译为 Javascript代码，并将编译形成的 Javascript代码封装为函数；调用该函数对相应的 DOM对象节点进行样式控制。

14、根据权利要求 13所述的装置，其特征在于，当 DOM对象发生变化时，所述装置还包括排版单元，用于对发生变化的 DOM对象节点进行排版，所述变化包括 DOM对象节点的增加、删除和 /或样式变化，排版过程具体为通过 Javascript语言执行如下步骤：

收集发生变化的 DOM对象节点及其子节点形成排版集合；

计算排版集合内的 DOM对象节点变化后的属性信息；

用变化后的属性信息修改变化前的属性信息。

15、根据权利要求 9所述的装置，其特征在于，所述渲染 DOM对象树包括文字绘制，所述渲染单元包括文字绘制单元，所述文字绘制单元包括：检索子单元、判断子单元、创建子单元、第一绘制子单元和第二绘制子单元，其中：所述检索子单元，用于根据文字尺寸检索预置图片集中是否存在与该文字尺寸匹配的图片，如果存在，则触发判断子单元；如果不存在，则触发创建子单元；

16、根据权利要求 9所述的装置，其特征在于，所述渲染 DOM对象包括材质合并，所述渲染单元包括材质合并单元，所述材质合并单元包括：纹理创建子单元、位置信息记录子单元和第三绘制子单元，其中：

所述纹理创建子单元，用于创建空白纹理；