专利名称：一种基于html5协议的网页展现方法及装置的制作方法
技术领域：
本申请涉及信息展现技术领域，特别涉及一种基于HTML5协议的网页展现方法及其相应的装置。
背景技术：
HTML5 (Hypertext Markup Language 5rd,超文本标记语言标准第5版，又称为HTML标准版本)是用于取代1999年制定的HTML 4. 01和XHTML I. 0协议的新HTML协议标准。HTML5协议相对于以前的版本具有两大突出特点一是强化了 Web网页的表现性能；ニ是增加了本地数据库等Web应用功能，其目·的在于通过减少浏览器对基于插件的丰富性网络メ沒用月艮务(plug—in—basedrich internet application,RIA,如 Adobe Flash>MicrosoftSilverlight、OracleJavaFX等)的需求,提供更多有效增强网络应用的标准集。然而，由于HTML5协议对插件需求的減少，在现有技术框架下，目前的浏览器(比如IE6. 0 8. O、搜狗、火狐、Chrome等)如果没有额外的插件程序，或者不进行必要的功能升级，将无法基于HTML5协议实现网页展现。
发明内容
为解决上述技术问题，本申请实施例提供一种基于HTML5协议的网页展现方法及其对应的装置，以提供ー种无需额外的插件程序或功能升级即可进行基于HTML5协议的网页展现。本申请实施例提供的基于HTML5协议的网页展现方法包括获取基于HTML5协议的网页资源；以Javascript语言解析网页资源生成DOM对象节点；渲染DOM对象后进行网页展现。优选地,所述以Javascript语言解析网页资源生成DOM对象节点具体包括以Javascript语言对网页资源进行词法分析以获得HTML标签； 调用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对象的控制，具体为以Javascript语言实现DOM对象、DOM对象的基类以及可视元素接ロ，在DOM对象中根据HTML标签增加和/或删除DOM对象节点，和/或，根据HTML标签属性设置DOM对象节点的属性。优选地，所述装置还包括样式控制単元，用于对至少ー个DOM对象节点的样式进行控制，具体为将DOM对象节点的样式资源编译为Javascript代码，并将编译形成的Javascript代码封装为函数；调用该函数对相应的DOM对象节点进行样式控制。优选地，当DOM对象发生变化时，所述装置还包括排版单元，用于对发生变化的DOM对象节点进行排版，所述变化包括DOM对象节点的増加、删除和/或样式变化，排版过程具体为通过Javascript语言执行如下步骤收集发生变化的DOM对象节点及其子节点形成排版集合；计算排版集合内的DOM对象节点变化后的属性信息；用变化后的属性信息修改变化前的属性信息。
优选地，所述渲染DOM对象树包括文字绘制，所述渲染単元包括文字绘制单元，所述文字绘制单元包括检索子単元、判断子単元、创建子単元、第一绘制子単元和第二绘制子单元，其中所述检索子単元，用于根据文字尺寸检索预置图片集中是否存在与该文字尺寸匹配的图片，如果存在，则触发判断子単元；如果不存在，则触发创建子単元；所述判断子単元，用于判断匹配的图片是否包含待绘制的文字，如果是，则触发第一绘制子単元利用该文字在图片中的位置信息绘制文字；如果否，则触发第二绘制子単元将待绘制的文字绘制到该图片中，并触发第一绘制子単元利用该文字在图片中的位置信息绘制文字；所述创建子単元，用于创建与该文字尺寸匹配的图片，触发第二绘制子单元将待绘制的文字绘制到该图片中，并触发第一绘制子単元利用该文字在图片中的位置信息绘制文字。优选地,所述渲染DOM对象包括材质合并,所述渲染单元包括材质合并单元,所述材质合并单元包括纹理创建子単元、位置信息记录子単元和第三绘制子単元，其中所述纹理创建子単元，用于创建空白纹理；所述位置信息记录子単元，用于将待绘制的对象放置于纹理之中，记录待绘制对象在纹理中的位置信息；所述第三绘制子単元，用于在接收到绘制触发时，根据待绘制对象在纹理中的位置信息一次性将纹理中的全部待绘制对象绘制到屏幕上。本申请实施例在获取基于HTML5协议的网页资源后，以Javascript语言解析网页资源生成DOM对象节点，然后渲染DOM对象后进行网页展现。与现有技术相比，本申请实施例采用Javascript语言作为对基于HTML5协议的网页资源的解析语言，由于该语言普遍存在于各种网页浏览器之中，本申请实施例无需借助外在的插件程序即可实现对HTML5协议的支持，避免了进行插件安装或者功能更新升级等操作，提高了基于HTML5协议的网页的展现效率。此外，由于本申请实施例仅依赖于Javascript语言支持HTML5协议，因此可广泛应用于包含Javascript语言的各种平台之上，増加或提升了这些平台的网页展现性能，提供了一种全平台的开发模式。
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的ー些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图I为本申请实施例一的基于HTML5协议的网页展现方法流程图；图2为本申请实施例ニ的基于HTML5协议的网页展现方法流程图；图3为本申请实施例三的实现文字绘制的方法流程图；图4为本申请实施例三的材质合并的方法流程图； 图5(a) (e)为本申请实施例三的合并过程示意图；图6为本申请实施例四的基于HTML5协议的网页展现装置的结构框图。
具体实施例方式为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。实施例一网页展现过程包括一系列紧密相连的操作，比如网页资源的下载，对网页资源的解析、渲染等。基于不同协议标准的网页资源的解析过程存在差别，正是由于这种差异导致较多的浏览器无法支持像基于HTML5协议的网页资源，现有技术解决该问题的通常做法是借助于外在插件程序或者通过专门的升级程序包实现升级，而这些做法与HTML5协议減少插件使用的宗_相悖。本申请通过浏览器自带的Javascript语言完成解析过程，从而较好地解决了上述问题。參见图1，该图示出了本申请实施例的基于HTML5协议的网页展现方法的流程。该实施例包括步骤SlOl :获取基于HTML5协议的网页资源；获取网页资源是进行网页展现的基础，网络资源的来源主要包括两种途径ー是从服务器端下载的网页资源(首次网页资源)，ニ是基于从服务器端下载的资源动态生成的网页资源(二次网页资源)。来自于服务器端的网页资源，是用户通过浏览器向服务器发送包含页面地址的访问请求后，服务端响应该请求向浏览器提供该网页资源。从服务器端下载到的网页资源可以即时提供给浏览器，也可以根据实际应用需要，先将下载的网页资源进行缓存，待对网页资源的获取触发产生后才提供。与此相应地，本实施例获取基于HTML5协议的网页资源的方式可以包括多种，比如，可以是即时请求即时获得方式，也可以是在接收到网页资源获取触发后，从缓存中提取网页资源。对于生成的网页资源，其是借助于本地系统的处理计算功能，运行下载网页资源中的某些程序段生成的网页资源，比如，脚本程序运行产生的网页代码，某些控件被触发产生的网页资源等。需要说明的是本申请所需的网页资源既包括上述来自服务器的网页资源，也包括在本地生成的网页资源，并不特别的区分。此外，本实施例对获取的基于HTML5协议的网页资源的具体类型不作限定，比如可以是文本、图片、声音、视频等资源中任何一种或几组的组合。步骤S102 以Javascript语言解析网页资源生成DOM对象节点；
JavaScript语言是浏览器支持的网页脚本语言，传统使用方式主要是将其用于网页信息交互和网页逻辑控制，它依附于网页和浏览器存在。本实施例以Javascript语言为运行语言，使用其对网页资源进行解析操作，进而生成DOM对象节点。DOM(Document ObjectModel，文档对象模型)对象是以层次结构对页面元素进行组织的节点或信息片断的集合，它是与浏览器、平台、语言无关的标准组件。步骤S103 :渲染DOM对象后进行网页展现；DOM对象反映了网页中的各个页面元素之间的关系、位置等信息，这些页面元素通过DOM对象的节点体现，位置等信息为DOM对象节点的属性，通过对包含多个DOM对象节点的整个DOM对象的渲染，即可实现页面的展现。具体实现渲染时，可以选用浏览器支持的任 何ー种渲染器对DOM对象渲染，该选择操作可以在系统初始时判断。当存在多个渲染器吋，比如系统同时支持WebGL、FalshlU 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、webGLo 为解析出 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 = ‘I. gif’”代码段在代码文件中多次出现，当第一次进行词法分析时，将该代码段翻译成如下的Javascript代码(伪代码)
权利要求
1.一种基于HTML5协议的网页展现方法，其特征在于，该方法包括 获取基于HTML5协议的网页资源； 以Javascript语言解析网页资源生成DOM对象节点； 渲染DOM对象后进行网页展现。
2.根据权利要求I所述的方法，其特征在于，所述以Javascript语言解析网页资源生成DOM对象节点具体包括 以Javascript语言对网页资源进行词法分析以获得HTML标签； 调用DOM对象创建函数根据HTML标签创建DOM对象节点。
3.根据权利要求2所述的方法，其特征在于，在以Javascript语言对网页资源进行词法分析以获得HTML标签后，生成与HTML标签相应的调用DOM对象创建函数创建DOM对象节点的Javascript代码，则所述调用DOM对象创建函数根据HTML标签创建DOM对象节点具体为 根据HTML标签调用与该HTML标签相应的Javascript代码创建DOM对象节点。
4.根据权利要求I至3中任何一项所述的方法，其特征在干，所述方法还包括以Javascript语言实现DOM对象的控制,具体为 以Javascript语言实现DOM对象、DOM对象的基类以及可视元素接ロ，在DOM对象中根据HTML标签增加和/或删除DOM对象节点，和/或，根据HTML标签属性设置DOM对象节点的属性。
5.根据权利要求I所述的方法，其特征在于，所述方法还包括对至少ー个DOM对象节点的样式进行控制，具体为 将DOM对象节点的样式资源编译为Javascript代码，并将编译形成的Javascript代码封装为函数；调用该函数对相应的DOM对象节点进行样式控制。
6.根据权利要求5所述的方法，其特征在于，当DOM对象发生变化时，所述方法还包括，对发生变化的DOM对象节点进行排版，所述变化包括DOM对象节点的增加、删除和/或样式变化，排版过程具体为通过Javascript语言执行如下步骤 收集发生变化的DOM对象节点及其子节点形成排版集合； 计算排版集合内的DOM对象节点变化后的属性信息； 用变化后的属性信息修改变化前的属性信息。
7.根据权利要求I所述的方法，其特征在于，所述渲染DOM对象包括文字绘制步骤，该文字绘制步骤包括 根据文字尺寸检索预置图片集中是否存在与该文字尺寸匹配的图片； 当存在匹配的图片时，判断该图片是否包含待绘制的文字，如果是，则利用该文字在图片中的位置信息绘制文字；如果否，则将待绘制的文字绘制到该图片中，利用该文字在图片中的位置信息绘制文字； 当不存在匹配的图片时，创建与该文字尺寸匹配的图片，将待绘制的文字绘制到该图片中，利用该文字在图片中的位置信息绘制文字。
8.根据权利要求I所述的方法，其特征在于，所述渲染DOM对象包括材质合并步骤，该材质合并步骤包括 创建空白纹理；将待绘制对象放置于纹理之中，记录待绘制对象在纹理中的位置信息； 当接收到绘制触发时，根据待绘制对象在纹理中的位置信息一次性将纹理中的全部待绘制对象绘制到屏幕上。
9.一种基于HTML5协议的网页展现装置，其特征在于，该装置包括获取单元、解析单元和渲染单元，其中 所述获取単元，用于获取基于HTML5协议的网页资源； 所述解析单元，用于以Javascript语言解析网页资源生成DOM对象节点； 所述渲染単元，用于渲染DOM对象后进行网页展现。
10.根据权利要求9所述的装置，其特征在于，所述解析単元包括词法分析子単元、DOM对象节点生成子单元，其中 所述词法分析子単元，用于以Javascript语言对网页资源进行词法分析以获得HTML标签； 所述DOM对象节点生成子单元，用于调用DOM对象创建函数根据HTML标签创建DOM对象节点。
11.根据权利要求10所述的装置，所述解析单元还包括代码生成子単元，用于在以Javascript语言对网页资源进行词法分析以获得HTML标签后，生成与HTML标签相应的调用DOM对象创建函数创建DOM对象节点的Javascript代码，则所述DOM对象节点生成子单元具体根据HTML标签调用与该HTML标签相应的Javascript代码创建DOM对象节点。
12.根据权利要求9至11中任何一项所述的装置，其特征在于，所述装置还包括DOM对象控制单元，用于以Javascript语言实现DOM对象的控制,具体为 以Javascript语言实现DOM对象、DOM对象的基类以及可视元素接ロ，在DOM对象中根据HTML标签增加和/或删除DOM对象节点，和/或，根据HTML标签属性设置DOM对象节点的属性。
13.根据权利要求9所述的装置，其特征在干，所述装置还包括样式控制単元，用于对至少ー个DOM对象节点的样式进行控制，具体为将DOM对象节点的样式资源编译为Javascript代码,并将编译形成的Javascript代码封装为函数；调用该函数对相应的DOM对象节点进行样式控制。
14.根据权利要求13所述的装置，其特征在干，当DOM对象发生变化时，所述装置还包括排版单元，用于对发生变化的DOM对象节点进行排版，所述变化包括DOM对象节点的增カロ、删除和/或样式变化，排版过程具体为通过Javascript语言执行如下步骤 收集发生变化的DOM对象节点及其子节点形成排版集合； 计算排版集合内的DOM对象节点变化后的属性信息； 用变化后的属性信息修改变化前的属性信息。
15.根据权利要求9所述的装置，其特征在于，所述渲染DOM对象树包括文字绘制，所述渲染单元包括文字绘制单元，所述文字绘制单元包括检索子単元、判断子単元、创建子单元、第一绘制子単元和第二绘制子単元，其中 所述检索子単元，用于根据文字尺寸检索预置图片集中是否存在与该文字尺寸匹配的图片，如果存在，则触发判断子単元；如果不存在，则触发创建子単元； 所述判断子単元，用于判断匹配的图片是否包含待绘制的文字，如果是，则触发第一绘制子単元利用该文字在图片中的位置信息绘制文字；如果否，则触发第二绘制子单元将待绘制的文字绘制到该图片中，并触发第一绘制子単元利用该文字在图片中的位置信息绘制文字； 所述创建子単元，用于创建与该文字尺寸匹配的图片，触发第二绘制子単元将待绘制的文字绘制到该图片中，并触发第一绘制子単元利用该文字在图片中的位置信息绘制文字。
16.根据权利要求9所述的装置，其特征在于，所述渲染DOM对象包括材质合并，所述渲染单元包括材质合并单元，所述材质合并单元包括纹理创建子单元、位置信息记录子单元和第三绘制子単元，其中 所述纹理创建子単元，用于创建空白纹理； 所述位置信息记录子単元，用于将待绘制的对象放置于纹理之中，记录待绘制对象在纹理中的位置信息； 所述第三绘制子単元，用于在接收到绘制触发时，根据待绘制对象在纹理中的位置信息一次性将纹理中的全部待绘制对象绘制到屏幕上。
全文摘要
本发明实施例公开了一种基于HTML5协议的网页展现方法。该方法包括获取基于HTML5协议的网页资源；以Javascript语言解析网页资源生成DOM对象节点；渲染DOM对象后进行网页展现。本发明实施例还公开了一种基于HTML5协议的网页展现的展现装置。本发明实施例无需借助外在的插件程序即可实现对HTML5协议的支持，避免了进行插件安装或者功能更新升级等操作，提高了基于HTML5协议的网页的展现效率。
文档编号G06F17/30GK102955854SQ20121043897
公开日2013年3月6日 申请日期2012年11月6日 优先权日2012年11月6日
发明者谢成鸿 申请人:北京中娱在线网络科技有限公司, 谢成鸿