CN111259301B - Html页面内元素渲染的方法、装置、设备和存储介质 - Google Patents

Abstract

本发明提供了一种超文本标记语言HTML页面内元素渲染的方法、装置、设备和存储介质，涉及计算机软件技术领域。方法包括：根据HTML页面内的待渲染元素确定画布对象，并确定渲染待渲染元素的渲染器的运行模式；根据待渲染元素加载渲染器；根据渲染器，通过用户代理接口获取待渲染元素的属性和参数；根据待渲染元素的属性和参数，使用渲染器对待渲染元素进行渲染得到第一渲染结果；将第一渲染结果存储在画布对象中；根据渲染器的运行模式从画布对象中复制第一渲染结果到HTML页面。本发明实施例提供的HTML页面内元素的渲染方法能够方便的得到HTML的支持。

Description

HTML页面内元素渲染的方法、装置、设备和存储介质

技术领域

本申请涉及计算机软件技术领域，尤其涉及一种HTML页面内元素渲染的方法、装置、设备和存储介质。

背景技术

现有技术中，对于修改复杂元素的渲染效果，所使用的接口复杂，缺乏标准或者规范约束，导致开发成本高且可维护性降低，而画布(canvas)元素的实现机制和超文本标记语言(HyperText Mark-up Language，HTML)以及级联样式表(Cascading Style Sheets，CSS)等已有的规范之间出现了鸿沟，这导致代码规模变大，学习成本上升，也导致了性能的下降。

另外，由于canvas元素自身的限制，目前无法将canvas元素所实现的复杂控件作为表单(form)的一部分放到表单中，从而无法将用户的输入或者复杂控件的当前值作为参数传递到后台服务器处理，不能对canvas元素的参数实现方便的调试或调整。而在HTML文档中嵌入可缩放矢量图形(Scalable Vector Graphics，SVG)，以实现类似canvas元素的功能，SVG把要绘制的矢量图形使用类似HTML的标签语言进行定义并组织了起来，然后通过脚本通过控制其参数或者CSS属性来实现动态的效果，比如表盘指针的旋转，可以通过对指针做旋转转换来实现表盘指针旋转的动态效果。在使用画布时，这种定义矢量图形的过程变成了直接的接口调用，其结果是，使用SVG实现复杂元素渲染的方法，甚至没有画布的灵活性好，性能也比使用画布元素差。因此，无论是使用canvas元素还是SVG来实现复杂元素的渲染，都不能方便的得到HTML的支持。

发明内容

本发明提供一种HTML页面内元素渲染的方法、装置、设备和存储介质，通过为HTML新增一种用来代表复杂控件的元素，能够方便的得到HTML的支持，以提高对复杂元素的渲染的性能，降低代码的规模。

第一方面，本发明实施例提供了一种超文本标记语言HTML页面内元素渲染的方法，该方法包括：根据HTML页面内的待渲染元素确定画布对象，并确定渲染待渲染元素的渲染器的运行模式；

根据待渲染元素加载渲染器；

根据渲染器，通过用户代理接口获取待渲染元素的属性和参数；

根据待渲染元素的属性和参数，使用渲染器对待渲染元素进行渲染得到第一渲染结果；

将第一渲染结果存储在画布对象中；

根据渲染器的运行模式从画布对象中复制第一渲染结果到HTML页面。

在第一方面的一些可实现方式中，待渲染元素包括指示信息，根据渲染元素加载渲染器，包括：根据指示信息加载待渲染元素指定的渲染器。

在第一方面的一些可实现方式中，根据待渲染元素加载渲染器，包括：根据待渲染元素获取渲染器类型和渲染器设计类型；

根据渲染器类型和渲染器设计类型，加载渲染器类型和渲染器设计类型对应的渲染器。

在第一方面的一些可实现方式中，若根据渲染器类型和渲染器设计类型，加载渲染器类型和渲染器设计类型对应的渲染器失败，则根据渲染器设计类型加载渲染器设计类型对应的渲染器。

在第一方面的一些可实现方式中，待渲染元素包括外部资源获取指令信息，方法还包括：

根据外部资源获取指令信息确定外部资源的统一资源定位符URL，URL用于查找并获取外部资源，外部资源用于渲染器渲染得到第一渲染结果。

在第一方面的一些可实现方式中，将外部资源存储于本地缓存系统，并为存储于本地缓存系统的外部资源重新分配本地链接，待渲染元素包括重新分配的本地链接。

在第一方面的一些可实现方式中，方法还包括：移除所述重新分配的本地链接；销毁所述第一渲染结果。

在第一方面的一些可实现方式中，用户代理接口由统一的语言封装。

在第一方面的一些可实现方式中，根据待渲染元素加载渲染器之前，方法还包括：验证渲染器的合法性。

在第一方面的一些可实现方式中，根据渲染器的运行模式从画布对象中复制第一渲染结果到HTML页面之后，方法还包括：接收用户的输入操作指令；

根据输入操作指令，确定HTML页面中的第一渲染结果；

根据渲染器，通过用户代理接口获取第一渲染结果的属性和参数；

根据第一渲染结果的属性和参数，使用渲染器对第一渲染结果进行渲染得到第二渲染结果；

将第二渲染结果存储在画布对象中；

根据渲染器的运行模式复制第二渲染结果到HTML页面。

第二方面，本发明实施例还提供了一种HTML页面内元素渲染的装置，该装置包括：

确定模块，用于根据超文本标记语言HTML页面内的待渲染元素确定画布对象，并确定渲染待渲染元素的渲染器的运行模式；

加载模块，用于根据待渲染元素加载渲染器；

获取模块，用于根据渲染器，通过用户代理接口获取待渲染元素的属性和参数；

渲染模块，用于根据待渲染元素的属性和参数，使用渲染器对待渲染元素进行渲染得到第一渲染结果；

存储模块，用于将第一渲染结果存储在画布对象中；

加载模块，还用于根据渲染器的运行模式从画布对象中复制第一渲染结果到HTML页面。

第三方面，本发明实施例提供了一种超文本标记语言HTML页面内元素渲染的设备，该设备包括：处理器以及存储有计算机程序指令的存储器；处理器执行计算机程序指令时实现如第一方面或者第一方面任一可实现方式中的超文本标记语言HTML页面内元素渲染的方法。

第四方面，本发明实施例提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序指令，计算机程序指令被处理器执行时实现如第一方面或者第一方面任一可实现方式中的超文本标记语言HTML页面内元素渲染的方法。

本发明提供一种HTML页面内元素渲染的方法及计算机设备，通过为HTML新增一种用来代表复杂控件的元素，能够方便的得到HTML的支持，在实现复杂元素的渲染过程中，可以调用用户代理的内部接口，通过用户代理的内部接口获取实现复杂元素渲染的参数及属性，以提高对复杂元素的渲染的性能，也降低了代码的规模。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例中所需要使用的附图作简单的介绍，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的一种模拟表盘；

图2是本发明实施例提供的另一种模拟表盘；

图3是本发明实施例提供的一种数字表盘；

图4是本发明实施例提供的一种HTML页面内元素渲染的方法的流程示意图；

图5是本发明实施例提供的一种HTML页面内元素渲染的方法的流程示意图；

图6是本发明实施例提供的一种HTML页面内元素渲染的方法的流程示意图；

图7是本发明实施例提供的HTML页面内元素渲染的流程示意图；

图8是本发明实施例提供的一种HTML页面内元素渲染的装置示意图；

图9是本发明实施例提供的一种HTML页面内元素渲染的硬件结构示意图。

具体实施方式

下面将详细描述本发明的各个方面的特征和示例性实施例，为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细描述。应理解，此处所描述的具体实施例仅被配置为解释本发明，并不被配置为限定本发明。对于本领域技术人员来说，本发明可以在不需要这些具体细节中的一些细节的情况下实施。下面对实施例的描述仅仅是为了通过示出本发明的示例来提供对本发明更好的理解。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

超文本标记语言(HyperText Mark-up Language，HTML)，用于表述网页内容结构的标准。最新的发布标准是HTML5.3。

级联样式表(Cascading Style Sheets，CSS)，用于定义HTML页面元素布局、渲染效果等的规范。在CSS2.2之后，CSS规范开始按照模块划分，各模块分头演进。

HTML和CSS等规范和标准是由万维网联盟(World Wide Web Consortium，W3C)组织制定的，用来规范全球广域网(World Wide Web，Web)页面内容的编写和渲染行为。

可缩放矢量图形(Scalable Vector Graphics，SVG)，用来定义矢量图形的标记语言，可嵌入HTML文档中。目前普遍支持的规范为SVG1.1，最新规范为SVG2.0。

JavaScript/ECMAScript是一种符合脚本程序设计语言(European ComputerManufacturers Association Scrip，ECMAScript)规范的脚本编程语言，最初由网景公司设计给浏览器使用，用于操控HTML页面中的内容和渲染行为，现在由欧洲计算机制造商协会和国际标准化组织负责制定相关标准，最新的标准为ECMA-262。由于JavaScript是商业公司(Oracle)的商标，所以，在发明实施例中使用ECMAScript这一术语。

用户代理(User Agent)是HTML规范的一个术语，用来指代可以解析HTML、CSS等W3C规范，并对HTML文档内容进行渲染，进而呈现给用户并实现用户交互的计算机程序。

例如，浏览器就是用户代理。但用户代理不限于浏览器，可以是一个软件组件，也可以是一个应用框架。例如，内嵌到电子邮件客户端程序中，用以解析和渲染HTML格式邮件的软件组件，本质上也是HTML用户代理。

网页前端技术，是HTML、CSS、ECMAScript等技术的通称。

控件(Widget/Control)指构成图形用户界面的可编程功能对象，比如标签、编辑框、按钮、列表框等。开发者通过将不同的控件放置到界面上来实现特定的用户交互。控件有时候也被称为构件。

起先，HTML页面主要用于文字和图片混排的文档内容，所以用于网页的布局排版和渲染的CSS相关规范，主要基于矩形区域，在CSS规范中称为“块(Block)”进行，比如用来控制其宽度(width)和高度(height)的属性(CSS property)和，用于控制HTML元素布局属性的display、position属性等。

随着HTML5及CSS3技术的发展，很多运行在PC、智能手机上的应用(App)，开始使用Web技术来为用户呈现内容，并作为人机交互的界面。

但是，将网页前端技术用于客户端应用的开发时，基于矩形块的CSS样式表无法为各种复杂的控件提供有效支持。例如，要在网页中实现一个手表表盘以及旋转的、复杂形状的指针，就很难直接使用HTML和CSS实现。

为满足这一需求，现有方案常用方法有两种：

一种是借助于HTML5引入的画布(canvas)元素，通过脚本编程来实现复杂控件的渲染。

另一种是借助插件技术，使用HTML的对象(object)或嵌入(embed)元素嵌入外部对象实现复杂或者特定对象的渲染。

具体的，在现有技术中，常使用HTML5 canvas元素，然后使用脚本编程调用canvas元素提供的接口绘制HTML页面的元素。但是使用canvas元素，需要编写额外的脚本程序，这导致在用户代理的脚本功能被禁止的情形下，无法工作。

而且ECMAScript是解释性编程语言，执行效率相对较低，且占用内存大。在修改复杂控件的渲染效果时，需要修改脚本。

若要同时在一个界面上支持多种不同的复杂元素，则需要使用更多脚本程序。

而使用canvas元素，还会导致使用接口复杂，无法通过设置HTML元素的属性(attribute)或内容来方便操控复杂的控件，这会提高了前端开发人员的学习成本。

例如，在HTML规范中，元素可以设置其属性(attribute)，通过设置属性，即可改变其行为。例如，progress元素可用于设置进度条的进度，开发者可通过简单的脚本代码设置其value属性的值，从而改变当前的进度。HTML代码如下所示：

在上面的HTML代码中，脚本首先调用getElementById获取了需要操控的控件对象，然后通过一行代码my_progress.value＝50设置了其value值。此后，进度条将显示进度在50％的位置。

这是一种标准的HTML属性值设置方法，当使用基于canvas元素实现的复杂控件时，需要根据具体的实现来设置这个值，比如针对手表表盘，则需要编写更多的代码来实现相同的功能。

另外一方面，在使用浏览器提供的检查元素(Inspect Element)功能时，例如，在页面某个元素上方点击鼠标右键将出现“检查元素”功能，Chrome、Safari等流行浏览器均提供该功能，可以通过浏览器提供的调试界面手工修改HTML属性的值来观察该元素的变化，而不需要使用脚本。而对基于canvas实现的复杂控件，无法使用这种机制来方便地进行调试或调整。

也就是说，使用canvas元素结合脚本语言给网页的前端开发带来了一定的便利，但canvas的实现机制和HTML/CSS等已有规范之间却出现了鸿沟，这导致代码规模变大，学习成本上升，也导致了性能的下降。

另外，无法将通过canvas元素渲染的控件像HTML支持的固有控件，如input、meter、progress等那样嵌入到表单中使用。

由于canvas元素的限制，目前无法将canvas元素所描述的复杂控件作为表单的一部分放到表单(form)中，从而无法将用户的输入或者复杂控件的当前值作为参数传递到后台服务器处理。

如果需要，开发者就要编写更多的脚本代码来实现这个功能。下面的HTML码实现了一个简单的表单，该表单将把表单(form)元素中所有输入或者控件类型的子元素组织成参数提交给指定统一资源定位符

    

如果在上述的输入框中输入HTML，点击查找(Search)提交按钮后，浏览器将向使用get方法向如下网页提交请求：

https://www.bing.com/search？q＝HTML

需要注意的是，这是用户代理的固有功能，无需任何脚本支持即可实现。然而，却无法通过将canvas元素置于form元素之内来实现这个功能。

进一步的，由于基于canvas元素实现的复杂控件接口存在大量随意性，缺乏标准或者规范的约束，这也使得代码的可维护性降低。

在其他的替代方案中，可以在HTML文档中嵌入SVG来绘制复杂图形从而实现类似canvas元素的功能。但本质上讲，使用SVG和基于画布的方法几乎是一样的。

SVG把要绘制的矢量图形使用类似HTML的标签语言进行定义并组织了起来，然后通过脚本通过控制其参数或者CSS属性来实现动态的效果，比如表盘指针的旋转，就可以通过对指针做旋转转换而实现。在使用画布时，这种定义矢量图形的过程变成了直接的接口调用，其结果是，使用SVG实现复杂控件渲染的方法，甚至没有画布的灵活性好，性能也较画布差。

而使用传统插件技术作为替代方案中，使用HTML的对象(object)或嵌入(embed)元素，也可以实现类似的功能。

典型用法就是Java Applet，代码如下所示：

在浏览器中，对object或embed元素的支持通常通过插件实现。

比如，当用户代理集成了Java支持插件后，上述HTML代码将创建一个object元素，并在其中展示Java语言编写的小应用程序(Java Applet)的内容，用户甚至可以和JavaApplet执行交互。

然而，这种方案存在如下不足：

(1)和canvas的实现类似，HTML文档中的其他元素和object元素之间存在数据交互鸿沟。

根据HTML规范的描述，HTML面中的其他模块，如脚本语言，只能通过修改相关参数(param)元素的属性来向object元素中的对象传递一些参数，但object元素所代表的对象之状态改变，却无法反馈给脚本或者其他HTML元素，比如集成到表单当中。

(2)通过object或者embed元素实现的对象，主要用来支持复杂外部内容的渲染或者用户交互，比如Java Applet、Abode Flash等，和HTML相比，基本上属于另外一套自包含(self-contained)的技术。例如，插件对象要使用字体来渲染文本，插件实现代码中就需要包含有字体的支持代码，而无法使用用户代理本身已经提供的字体支持功能。因此，就本发明实施例要实现的支持复杂控件这一目标，插件机制显然比较重(heavy)。

目前，常用的浏览器插件机制使用网景插件编程接口(Netscape Plugin API，NPAPI)。

而在Google Chrome提供了重新定义的浏览器扩展接口中，Google Chrome的扩展机制提供的是ECMAScript接口，插件主要通过Chrome对象来实现对应的扩展功能。因此，Chrome的扩展机制和基于画布和脚本的机制有着灵活性差，不能够方便的得到HTML的支持的缺陷和不足。

为了克服灵活性差，不能够方便的得到HTML的支持的缺陷和不足，本发明实施例提供的HTML页面内元素渲染方法，是一种轻量级用户代理扩展方法，用于在HTML用户代理中实现可扩展的复杂控件支持，在实现复杂控件的渲染过程中，具有接口简单，性能好，方便扩展，安全性好等优点。

为了能够方便的得到HTML的支持，实现对HTML叶面的灵活渲染，因此，为HTML新增一个标签，这个标签可以称为view。

可以使用view标签定义一个view元素，该元素代表一个HTML页面中的一个复杂控件，并可通过HTML param元素定义该复杂控件的参数。

作为一个具体的实现方式，示例性的HTML代码可以为：

view元素的实现例如可以定义如下几个属性(attribute)信息：

类型(type)属性信息：用来区别不同的渲染器类型，比如针对常见的手表类应用，可以定义两种类型：手表表盘(watchface)和秒表(stopwatch)。

设计类型(design)属性信息：用来区别同一种渲染器的不同设计类型。设计类型可以包括各种可能影响复杂控件外观和行为的因素，比如针对手表表盘类型和设计类型的渲染器，通过design可以提供数码或者模拟两种基本的设计形式。

更进一步的，针对模拟表盘，提供更多不同的设计风格，如图1-图3所示的不同风格表盘。

其中，图1和图2为模拟表盘，图3为数字表盘。图1所示的表盘上还可以显示有日期信息。

vendor：当用户代理运行环境中安装有特定type和design的多个不同厂商的渲染器时，可通过厂商域名(vendor)指定使用特定的渲染器厂商的实现。

value：通过使用字符串可以使用value来定义元素当前状态代表的值，用于脚本或者其他HTML页面访问获得当前控件的表述值(presentation value)。例如，手表表盘类型的元素，可以用09:13:45这样的字符串定义表盘当前的时间。考虑到表盘可能显示日期或者时区，可以使用2019-09-12T11:32:08+08:00这种符合ISO8601标准规范的字符串来定义手表表盘所表达的日期、时间和时区。

state：用于脚本程序获取该元素的当前状态，比如移动(moving)、暂停(paused)等，该属性为只读属性。

width和height：可以用来表示某view元素的固有尺寸(intrinsic size)，宽度和高度。

用户代理调用渲染器实现的特定函数接口来完成某个类型view元素的渲染，其中，渲染器能够再次使用用户代理提供的接口获取相应的渲染资源，之后由用户代理将渲染结果复制到网页上展示出来。

在面向对象编程中，渲染器所能够实现的接口又被称为“方法”。

渲染器至少能够实现的接口有：

initialize接口，可以用于初始化渲染器。通过初始化(initialize)接口可以执行一些安全性验证，例如数字签名等合法性验证，从而保障渲染器的合法性。

create接口，可以用于创建(create)和返回一个渲染器实例(instance)以及运行模式，该实例和具体的view元素一一对应。

渲染器的运行模式，可以为主动模式、被动模式或者混杂模式。

render接口，可以用于在画布对象中完成复杂元素的渲染。通过render接口可以再次调用用户代理提供的接口获得当前被渲染的view元素的各个属性以及参数，甚至CSS属性的值，从而实现view元素的渲染。

onXXX接口，可以用于处理用户在对应view元素上的用户交互事件。

destroy接口，调用销毁(destroy)接口，可以用于渲染器实例对应的view元素被销毁时，实现释放渲染器实例。

terminate接口，调用终止(terminate)接口可以用于在用户代理销毁某个HTML网页渲染实例，例如，关闭某个浏览器窗口时调用，实现释放渲染器。

在实现不同类型的view元素可以被称为实现不同的渲染器(renderer)，而用户代理所运行的环境可以被称为“宿主环境”。

共享函数库，又称动态函数库；作为一个具体的实施例，在Linux/Unix平台上，称为so文件，在Windows平台上，称为DLL文件。

作为一个具体的实现方式，宿主环境支持动态函数库的情况下，渲染器的实现也可称加载动态函数库。

用户代理根据可以根据事先约定的接口通过宿主环境提供的加载动态函数库的方式加载渲染器并完成渲染器的初始化，然后调用渲染器提供的方法来完成复杂控件的渲染，最后将渲染器的渲染结果展示在复杂控件在网页上的区域。

图4是本发明实施例提供的一种HTML页面内元素渲染的方法的流程示意图。如图4所示，该HTML页面内元素渲染的方法可以包括S110-S160，具体步骤如下：

S110、根据HTML页面内的待渲染元素确定画布对象，并确定渲染待渲染元素的渲染器的运行模式。

在一些实施例中，当用户代理根据HTML文档构建文档的渲染树(rendering tree)时，用户代理根据每个view元素的宽(width)和高(height)属性指定的固有尺寸创建画布对象(canvas object)，并调用渲染器的create接口创建渲染器实例。

在一些实施例中，为节省内存，对使用默认view元素渲染器的情况，用户代理可创建一个宽、高均为0的画布对象。用户代理调用create接口时，将画布对象作为参数传入该接口。

其中，width和height：这两个属性可以用来表示该view元素的固有尺寸，可以根据实际需要，设置width和height的默认值。

在一些实施例中，当HTML文档未定义width和heigh这两个属性时，例如用户代理可以设置width和height分别为200和150作为默认值。

根据超文本标记语言HTML页面内的渲染元素确定画布对象，并确定渲染待渲染元素的渲染器的运行模式后，继续S120步骤。

S120、根据待渲染元素加载渲染器。

若待渲染元素包括指示信息，根据指示信息加载渲染元素指定的渲染器。

作为一个具体的实现方式，view元素可以指定可选的渲染器的厂商域名(vendor)属性值，根据指定的vendor属性值，始终尝试加载指定vendor属性值对应目录下的渲染器。

在一些实施例中，这些渲染器保存在用户代理规定的系统目录之下，在上层目录中，可使用不同渲染器的厂商目录，以区分不同渲染器厂商的实现。

在一些实施例中，在用户代理还可设置一种机制，使用户可设定优先加载的厂商名称。若有设定，则在优先厂商目录中进行查找，否则按照安装日期倒序选择要加载的渲染器。

在一些实施例中，若指定的渲染器加载失败，则加载用户代理内部提供的默认渲染器。

在一些实施例中，根据待渲染元素加载渲染器，还包括根据待渲染元素获取渲染器类型和渲染器设计类型；

根据渲染器类型和渲染器设计类型，加载所述渲染器类型和渲染器设计类型对应的渲染器。

作为一个具体的实现方式，view元素未指定vendor属性值，则获取view元素的渲染器类型(type)和渲染器设计类型(design)属性值。

每对type和design对应一个渲染器或者称为对应一个动态函数库。

使用type和design组成渲染器的名称在用户代理设定的目录中搜索并加载对应的渲染器，例如，libwatchface-simple.so。

若根据渲染器类型和渲染器设计类型，加载渲染器类型和渲染器设计类型对应的渲染器失败，则根据渲染器设计类型加载所述渲染器设计类型对应的渲染器。

作为一个具体的实现方式，若根据type和design加载对应的渲染器失败，则根据design为默认值default加载对应的渲染器，比如libwatchface-default.so。

作为一个具体的实现方式，若根据design加载渲染器失败，则加载用户代理内部提供的默认渲染器。

作为一个具体的实现方式，通过view元素的type属性来指定复杂控件的类型。

由于view元素的类型是不受限制的，因此可以根据view元素的实际需求加载渲染器。

通过将渲染器的厂商域名作为一级子目录的组织方式，将所有该厂商提供的view的渲染器，或者可执行程序放到该子目录中。直接使用type和design两个view元素的属性名称来按照给定的规则定义动态库的名称或者可执行程序名称，避免了使用复杂的配置文件。

进一步的，由于渲染器是相对独立的软件模块，两个不同view类型渲染器之间不存在依赖关系，因此也无需定义依赖关系。在切换不同厂商和设计的实现时，还能够灵活控制同一类或同一个view元素的不同外观或者风格。

在一些实施例中，根据渲染元素加载渲染器之前，还包括：验证渲染器的合法性。

由于网络环境的复杂性，用户可能安装含有恶意代码的渲染器，从而导致泄漏隐私或者让渲染器可以利用宿主环境的漏洞运行病毒或者传播蠕虫等等。

在本发明实施例的复杂元素渲染的方法中，渲染器与用户代理运行在同一进程地址空间，因此提供了最佳的性能。为了避免带来安全性降低的问题，因此，安装渲染器之前通过验证机制验证渲染器的合法性，确保用户可以检验安装来源的合法性，避免复杂元素渲染过程出现使用安装不明来源的渲染器的情况。

在一些实施例中，将安装到用户代理运行环境中的渲染器按照厂商组织为不同的子目录，而厂商名称就对应于一个特定的域名，例如views.fmsoft.cn、views.foo.com等，还能够方便渲染器的合法性验证。

作为一个具体的实现方式，渲染器安装包中可以包含如下信息：

代表开发者的来源域名，如views.fmsoft.cn。

使用views.fmsoft.cn域名证书的私钥对渲染器动态库进行数字签名生成的数字签名文件，以sig为后缀名存放。渲染器如果含有其他外部资源文件，例如，图片等，则包含对应文件的数字签名文件。其次，当用户向用户代理运行环境中安装某个特定渲染器时，可以执行如下数字签名的验证工作：

使用https协议访问来源域名对应的服务器，获取域名证书。

使用TLS验证证书公钥是否有效，比如颁发机构、证书有效时间等。

如果证书公钥有效，则使用证书公钥对渲染器每个文件的数字签名进行验证。

验证通过后，将渲染器及其数字签名文件安装到用户代理的运行环境中。

在一些实施例中，在加载渲染器时，进行二次验证，以避免使用过期证书。

在一些其他的可实现方式中，还可以通过人工审核机制确保渲染器不含有恶意代码，或者确保渲染器的基本稳定性。在用户代理中增加渲染器运行情况的审核机制，当发现运行异常的渲染器时，可自动禁止渲染器的装载。

在一些实施例中，在对第三方渲染器来源合法性验证过程中，由于厂商域名作为一级子目录的组织方式，因此，为重用HTTPS验证域名合法性打下基础，从而无须另行开发的第三方渲染器合法性验证机制，实现降低开发渲染器的工作量。

在渲染器验证和加载完成后，继续执行以下步骤。如图4所示的S130。

S130、根据渲染器，通过用户代理接口获取待渲染元素的属性和参数。

在一些实施例中，在需要渲染该view元素时，用户代理可以调用渲染器的render方法，即调用render接口。

作为一个具体的实现方式，在render接口的实现中，渲染器可以再次调用用户代理提供的接口获得当前view元素的各个属性以及参数，甚至CSS属性的值，从而实现相应的渲染。

在渲染器render接口中，渲染器可以再次调用用户代理提供的渲染器开发接口来绘制内容。

作为一个具体的实现方式，为了实现view渲染器，用户代理可以提供用户代理提供的接口以供渲染器调用。

(1)用户代理提供的接口能够用于设置和获取对应view元素value属性值的接口。

(2)用户代理提供的接口能够用于遍历对应view元素中paramlist子元素以及获取特定param子元素及其value属性值的接口。

(3)用户代理提供的接口能够用于获取view元素对应的CSS属性值的接口。

(4)用户代理提供的接口能够用于在画布对象中绘制图形的2D矢量图形绘图接口，甚至3D绘制接口。

(5)用户代理提供的接口能够从外部数据流构建Image对象，或者其他多媒体对象的接口，以用于复杂控件的渲染。

(6)其他，能够用于从URL中获取流数据的接口。

这些用户代理提供的接口就是用户代理的解析、装载资源和渲染网页使用的内部接口。

在一些实施例中，用户代理接口由统一的语言封装。

作为一个具体的实现方式，可以将这些接口封装成为标准的C语言接口，供渲染器开发者使用。

这样，不论用户代理是用C还是C++实现的，或者使用不同的编程语言实现，通过为渲染器开发者提供统一的语言封装的接口，由于只需要开发一次，因此，可以降低渲染器针对不同用户代理开发渲染器的工作量。

下面提供了一组具体的实施例：

//表示view对象的句柄

typedef HVIEW uintptr_t；

//获取指定VIEW对象的value属性值

const char*view_get_value(HVIEW view)；

//设置指定VIEW对象的value属性值

void view_set_value(HVIEW view,const char*value)；

//表示param对象的句柄

typedef HPARAM uintptr_t；

//获取指定param子元素句柄

HPARAM view_get_param(HVIEW view,const char*name)；

//获取paramlist元素之子元素的个数

unsigned int view_get_paramlist_count(HVIEW view,const char*name)；

//获取paramlist元素中特定param子元素对象句柄

HPARAM view_get_param_in_list(HVIEW view,const char*name,int index)；

//获取特定param子元素对象的value属性值

const char*view_get_param_value(HVIEW view,HPARAM param)；

//获取特定param子元素对象的外部内容对象，即src属性定义的外部数据流对象

typedef HDATA uintptr_t；

HDATA view_fetch_param_data(HVIEW view,HPARAM param)；

//装载指定URL数据流

//装载成功后，用户代理调用on_ready通知数据已就绪

typedef void(*ON_READY_CB)(HDATA data,size_t size)；

void view_fetch_param_data(HVIEW view,const char*URL,ON_READY_CB on_ready)；

//释放外部数据流

void view_do_with_data(HVIEW view,HDATA data)；

//获取view元素特定CSS属性值(已计算值)

//这里略去CSSValue以及CSSPropertyId的定义

CSSValue view_get_css_property(HVIEW view,CSSPropertyId id)；

//表示画布对象的句柄

typedef HCANVAS uintptr_t；

//获取画布对象及其尺寸

HCANVAS view_get_canvas(HVIEW view,float*width,float*height)；

//在画布对象上绘制直线

void view_canvas_set_pen(HCANVAS canvas,PenType type,float pen_width)；

void view_canvas_move_to(HCANVAS canvas,float x,float y)；

void view_canvas_line_to(HCANVAS canvas,float x,float y)；

//装载数据流对象并绘制到画布上

typedef HIMAGE uintptr_t；

HIMAGE view_load_image(HDATA data)；

void view_canvas_draw_image(HCANVAS canvas,HIMAGE img,float x,floaty,float width,float height)；

void view_release_image(HIMAGE img)；

当渲染器完成对HTML页面内元素的渲染，则继续执行以下步骤，如图4所示的S140。

S140、根据待渲染元素的属性和参数，使用渲染器对待渲染元素进行渲染得到第一渲染结果。

S150、将第一渲染结果存储在画布对象中。

具体的，当渲染器完成渲染，获得第一渲染结果后，第一渲染结果将存储在创建的画布对象中。

S160、根据渲染器的运行模式从画布对象中复制第一渲染结果到HTML页面。

作为一个具体的实现方式，render接口将第一渲染结果缓存到画布对象中，画布对象获得在render接口返回第一渲染结果后，用户代理将画布对象中的渲染结果复制到HTML页面中，从而展示给用户。

其中，渲染器的运行模式可以包括：主动模式、被动模式和者混杂模式。

作为一个具体的实现方式，在主动模式下，create接口返回一个时间间隔，例如20ms，此时可达到每秒50帧的刷新速率，用户代理则每隔20ms的时间间隔就调用一次render接口，在render接口返回渲染结果时，渲染结果即被渲染完成的元素，将画布对象中的渲染结果复制到HTML页面。主动模式可以适合于渲染器主动并更新被渲染内容的情形。

作为一个具体的实现方式，在被动模式下，当view元素value属性发生变化或者参数发生变化时，或者CSS属性发生变化时调用render接口，随后将render接口返回渲染结果复制到HTML页面。被动模式可以适合于被渲染内容仅根据属性和参数变化的情形。

作为一个具体的实现方式，在混在模式下，用户代理每隔指定的时间间隔或者当view元素value属性发生变化或者参数发生变化时，调用render接口，随后将render接口返回渲染结果复制到HTML页面。

其中，混在模式可以适合于上述两者情形同时存在的情形。

作为一个具体的实现方式，渲染器的运行模式设置可以通过create接口实现，根据具体的需要可以具体设定，在此不做具体的限定。

作为一个具体的实施方式，view元素的渲染器还可访问对应元素的CSS属性值，从而可直接使用用户代理为该元素准备设定的各种CSS属性，例如，字体(font)、颜色(color)等，从而使得渲染器的渲染效果可以和元素对应的CSS属性关联起来，以通过设置这些CSS属性来控制渲染效果，例如，表盘或指针的颜色。

而已有的CSS属性并不能用来描述复杂控件的所有的渲染属性。例如，要想分别定义表盘三个指针的颜色，就没有办法使用已有的CSS属性，因为CSS属性的颜色属性只能用来定义一个渲染属性，通常用于文本的颜色。此种情况下，view元素可以通过param参数来定义复杂控件一些渲染属性，实现表盘三个指针的颜色的渲染。

作为一个具体的实施方式，当需要把一个view元素包含在表单中，将其value属性表达的值作为表单的一部分提交给后台服务器时，可以通过定义name属性实现。示例性的HTML代码可以为：

如果在上述HTM展示出的输入框中输入HTML，点击Search...提交按钮后，用户代理将使用get方法向如下URL提交请求：https://www.bing.com/search？q＝HTML&time＝2019-09-12T11:40:08+08:00

通过上述示例性的HTML代码创建的手表表盘类型控件并没有指定初始的value属性，此时，该元素会设置为系统时间并走动，并将时间值反映到该view元素的value属性上。当脚本或者用户代理读取view元素的value属性值时，就会获得2019-09-12T11:40:08+08:00这样的字符串。

在一些实施例中，当需要定义其他参数时，可以使用view元素中包含的param元素来定义其他的参数。示例性的，针对手表表盘类型的元素，可以使用param元素定义一些可以控制复杂控件外观或者行为的参数，示例性的HTML代码可以为：

通过如上示例性的HTML代码，该手表表盘类型的view元素通过param元素能够定义两个参数：

move：用于控制表盘指针是静止的还是运动的。

hands：用于控制表盘显示哪些指针，例如，时针、分针和/或秒针。

通过上述实施例可以看出，明确定义view元素对应的value属性含义，及可以支持的参数，不管通过design指定何种设计实现，脚本或者HTML中的其他部分，都可以通过同样的接口来使用这个元素，或者和其交互。

需要说明的是，view元素的value属性和通过param元素定义的参数所扮演的角色有一些区别：

在一些实施例中，value属性代表某个复杂控件的当前值，是对脚本或者系统中的其他模块有实际价值的值。例如，手表表盘，它当前的时间是有实际价值的值，而表盘上有没有秒针，对其他模块就无关紧要。value属性可用于传递复杂控件的初始值，并且随着程序的运行以及和用户的交互，这个值会发生变化。

脚本或HTML文档的其他部分通过读取这个属性的值就可以知悉该复杂控件当前的状态。另外，脚本也可以通过修改这个属性的值来改变复杂控件的当前值。也就是说，value属性所代表的值是双向的。

在一些实施例中，param子元素用来控制复杂控件的外观或者行为。复杂控件的实现代码不会去修改这些元素，但脚本或者HTML文档的其他部分可通过修改这些元素来改变复杂控件的外观和行为。也就是说，param子元素所代表的值是单向的。

另外，view元素的不同类型会产生对应的事件，用于向脚本通知其状态的变化。比如，手表表盘在走动时，会产生一个名为手动(handsmoved)的事件，前端开发者可以在脚本中处理这个事件，从而完成表盘和其他HTML部分之间的交互，示例性的HTML代码可以为：

在一些实施例中，基于view元素的复杂控件，通过type属性来指定复杂控件的类型。一旦类型确定，就能够确定复杂控件的接口。通过design属性可选择特定类型的设计。

而且，通过使用value属性设置复杂控件的值，或者获取复杂控件的当前表述值，使用param元素定义复杂控件可接受的参数，并通过修改这些参数来调整复杂控件的行为，可以实现通过标准的文档对象模型(Document Object Model，DOM)接口实现和复杂控件的交互。

在一些实施例中，在脚本中处理复杂控件产生的事件，从而监听复杂控件的状态改变。

还可以直接将view元素定义的复杂控件包含在表单中，实现表单提交的自动化。

在本发明实施例提供的HTML页面内元素渲染的方法中，通过提供了一种统一的规范来实现复杂控件的支持，并使得复杂控件和其他HTML文档之间建立了基于DOM接口的关联性，降低了前端开发者的编码工作量。

进一步的解决了使用传统插件技术实现用户代理扩展存在安全性问题，通过验证渲染器来源，从而从一定程度上提高了使用第三方渲染器的安全性。

本发明实施例提供的一种HTML页面内元素渲染的方法，在实现复杂元素的渲染过程中，可以调用用户代理的内部接口，通过用户代理的内部接口获取实现复杂元素渲染的参数及属性，使得复杂控件的元素能够方便的得到HTML页面的支持，不仅降低了代码的规模，也提高了对复杂元素的渲染的性能。

进一步的，本发明实施例还能提供以下HTML页面内复杂元素渲染的渲染方式，具体步骤如图5所示。

图5是本发明实施例提供的一种HTML页面内元素渲染的方法的流程示意图。

S201、接收用户的输入操作指令。

具体的，HTML页面内第一渲染结果可以接收用户的输入操作指令，当接收到输入操作指令时，执行以下步骤。

S202、根据输入操作指令，确定HTML页面中的第一渲染结果；

S203、根据渲染器，通过用户代理接口获取第一渲染结果的属性和参数；

S204、根据第一渲染结果的属性和参数，使用渲染器对第一渲染结果进行渲染得到第二渲染结果；

S205、将第二渲染结果存储在画布对象中；

S206、根据渲染器的运行模式复制第二渲染结果到HTML页面。

在一些实施例中，当用户在view元素上执行输入操作时，用户代理调用渲染器的onXXX方法，若需要重新渲染对应的view元素，调用用户代理提供的接口来实现对渲染元素的渲染。

onXXX接口可以用于处理用户在对应view元素上的用户交互事件，比如按键(onKey)、鼠标点击移动、触摸以及手势操作等，以及获取或失去输入焦点(onFocusKilled)等交互事件。

当onXXX接口的返回值为true时，用户代理调用render接口，以更新渲染结果。

用户代理调用render接口，以更新渲染结果的过程和步骤同图4所示的HTML页面内元素渲染的方法，因此，不再赘述。

作为一个具体的实施例，通过为HTML增加view标签所定义的view元素，还可以支持数组型参数。

HTML param元素的基础上增加paramlist元素，通过paramlist元素还可以实现对数组型参数的定义。

作为一个具体的实施例，当某个复杂元素需要使用数量不定的图片时，通过paramlist元素实现传递数量不定的多张图片资源参数，可以如下定义其参数：

上述view元素定义了一个使用多张图片依次播放而形成的动画，以实现如GIF动画图片的效果。

作为一个具体的实施例，为了传递数量不定的多张图片资源参数，我们使用了paramlist元素。而再具体的实现方式中，paramlist元素中的param元素的名字(name)属性可以忽略，若name属性未设定，则用户代理可自动设定其值，示例性的HTML代码可以为：

作为一个具体的实施例，通过paramlist元素可实现对数组型参数的定义，不仅能够获取图片，还可以用来定义背景音乐或者其他多媒体内容，从而实现多媒体的支持。例如，可以在手表表盘中增加秒针移动时的滴答声支持参数，从而带来更好的用户体验。在此，不做具体的限定。

作为一个具体的实施例，可以通过增加的paramlist元素，能够快速获得其成员的个数，例如，子元素个数，而使用param元素，则需要使用类别(category)属性做分类工作才能获取这些信息，通过category属性描述参数的类别，具有同一类别的所有参数，组成数组型参数，在一些具体的实现方式中，示例性的HTML代码可以为：

虽然，用param元素以及category属性定义数组型参数，同样可以获得更好的性能支持，但是，却不如使用paramlist元素实现对数组型参数定义所需的开发工作量低。

作为一个具体的实施例，当复杂元素含有src属性时，用户代理可以根据src属性值获取所需的外部资源，获取后传递给view元素，用于复杂元素的渲染。

作为一个具体的实施例，在使用src元素时，可以利用用户代理已有的外部内容获取功能来下载这些外部资源，从而减轻view元素的实现复杂度，具体过程如图6所示。

图6是本发明实施例提供的一种复杂元素渲染的方法的流程示意图。

当待渲染元素包括外部资源获取指令信息时，执行以下步骤：

S301、根据外部资源获取指令信息确定外部资源的统一资源定位符URL，URL用于查找并获取外部资源，外部资源用于渲染器渲染得到第一渲染结果。

S302、将外部资源存储于本地缓存系统，并为存储于本地缓存系统的外部资源重新分配本地链接，待渲染元素包括重新分配的本地链接。

在一些实施例中，移除重新分配的本地链接，销毁第一渲染结果。

在一些实施例中，若不包括重新分配的本地链接，可直接销毁第一渲染结果。

在一些实施例中，当第一渲染结果需要被销毁时，第一渲染结果包括重新分配的本地链接时，在销毁第一渲染结果前，移除重新分配的本地链接，从而不删除缓存系统中保存的文件。

作为一个具体的实现方式，通过使用src属性，当需要被渲染的元素含有该属性时，用户代理根据src属性获得外部资源获取指令信息后，则会发起外部资源的获取(fetch)请求。

这些外部资源通可以保存在基于文件系统的缓存系统中，并具有一个根据外部资源的重新分配的本地链接，生成的唯一名称，示例性的，可以是一个md5散列字符串。

作为一个具体的实现方式，可以以view-<identifier>-param-<name>为名称在本地缓存系统上建立一个符号链接或者快捷方式，该名称可以指向已获取的外部资源对应的在缓存系统所存放的文件。

其中，<identifier>可以是用户代理为当前HTML页面创建的每个view元素给定的标识符，可以取view元素的渲染器中的指针值或者跨进程实现view元素的渲染器时的进程标识符。<name>是定义外部资源的param元素的名称。

外部资源获取成功后，应触发特定事件通知param所在的view元素。

当需要再次加载view元素时，view元素一旦获知用户代理已经获取了指定的外部资源，在view元素的渲染器中，可以使用view-<identifier>-param-<name>作为本地链接来确定的文件名称，获取所需的外部资源。

通过使用src属性，分配URL的方法，尤其在跨进程实现view元素的渲染器时，view渲染器无需自行实现复杂的外部资源获取功能，例如，使用超文本传输协议(Hyper TextTransfer Protocol，HTTP)或者超文本传输安全协议(Hyper Text Transfer Protocolover SecureSocket Layer，HTTPS)、文件传输协议(File Transfer Protocol，FTP)等协议下载外部资源。

由于渲染器本身不需要访问网络，一方面降低了渲染器的开发复杂性，另一方面，可以限制渲染器进程访问网络的能力，例如Linux内核定义的进程能力，因此，提高整个系统的安全性。

进一步的，通过重新分配本地链接的命名方式，渲染器因此也不需要获知外部资源的原始文件名称以及存放在缓存系统中的文件名称，只要按照分配的本地链接访问已获取的外部内容即可。这避免了向渲染器传递额外的数据，只需要通知渲染器某个参数规定的外部资源已经准备就绪即可。

图7是本发明实施例提供的复杂元素渲染的流程示意图。

如图7所示，作为一个具体的实施例，HTML页面可以包括view元素1和view元素2。

当打开HTML页面需要加载view元素1和view元素2，其中，用户代理为view元素1创建画布对象1，确定渲染结果的返回方式，并调用view元素1所需要的渲染器1。

渲染器1在执行渲染工作时，可以调用用户代理提供的接口，获取view元素1的参数、属性以及所需的渲染资源。

在渲染器1完成渲染工作，获得渲染结果后，渲染结果缓存在画布对象1中，画布对象根据渲染结果的返回方式，将渲染结果复制到HTML页面内。

当需要渲染view元素2时，用户代理为view元素2创建画布对象2，确定渲染结果的返回方式，并调用view元素2所需要的渲染器2。

渲染器2在执行渲染工作时，可以调用用户代理提供的接口，获取view元素2的参数、属性以及所需的渲染资源。

当view元素2中包括外部资源获取指令信息，根据指令信息确定外部资源的统一资源定位符URL，根据URL获取渲染view元素2所需的外部资源，若外部资源为第一次获取获得，则为该外部资源重新设置本地链接，具体的，可以以view-<identifier>-param-<name>为名称在本地缓存系统上建立一个符号链接或者快捷方式，该名称可以指向已获取的外部资源对应的在缓存系统所存放的文件。

同时，将重新设置的本地链接通知给view元素2，当需要再次渲染view元素2时，可直接从缓存系统获取所需的外部资源。

在渲染器2完成渲染工作，获得渲染结果后，渲染结果缓存在画布对象2中，画布对象2根据渲染结果的返回方式，将渲染结果复制到HTML页面内。

本发明实施例提供HTML页面内元素渲染的方法，能够方便的得到HTML的支持，在实现复杂元素的渲染过程中，可以调用用户代理的内部接口，通过用户代理的内部接口获取实现复杂元素渲染的参数及属性，提高了对复杂元素的渲染的性能，也降低了代码的规模。

图8是本发明实施例提供的一种复杂元素渲染的装置示意图。如图9所示，该复杂元素渲染的装置包括：确定模块401、加载模块402、获取模块403、渲染模块404、存储模块405。

获取模块401，用于根据超文本标记语言HTML页面内的待渲染元素确定画布对象，并确定渲染待渲染元素的渲染器的运行模式；

加载模块402，用于根据待渲染元素加载渲染器；

在一些实施例中，待渲染元素包括指示信息，加载模块402用于根据待渲染元素加载渲染器，包括：根据指示信息加载待渲染元素指定的渲染器。

在一些实施例中，加载模块402还用于根据渲染器类型和渲染器设计类型，加载渲染器类型和渲染器设计类型对应的渲染器失败，则根据渲染器设计类型加载渲染器设计类型对应的渲染器。

获取模块403，用于根据渲染器，通过用户代理接口获取待渲染元素的属性和参数；

其中，用户代理接口由统一的语言封装。

渲染模块404还用于根据待渲染元素的属性和参数，使用渲染器对待渲染元素进行渲染得到第一渲染结果；

存储模块405，用于将第一渲染结果存储在画布对象中；

加载模块404，还用于根据渲染器的运行模式从画布对象中复制第一渲染结果到HTML页面。

在一些实施例中，待渲染元素包括外部资源获取指令信息，加载模块402还用于根据外部资源获取指令信息确定外部资源的统一资源定位符URL，URL用于查找并获取外部资源，其中，外部资源用于渲染器渲染得到第一渲染结果。

加载模块402还用于将外部资源存储于本地缓存系统，并为存储于本地缓存系统的外部资源重新分配本地链接，待渲染元素包括重新分配的本地链接。

在一些实施例中，该复杂元素渲染的装置还包括销毁模块，销毁模块用于移除重新分配的本地链接，销毁第一渲染结果。

在一些具体的实现方式中，该复杂元素渲染的装置还包括判断模块，判断模块用于根据所述渲染元素加载渲染器之前，验证渲染器的合法性。

在一些实施例中，该复杂元素渲染的装置还包括数据接收模块，数据接收模块用于接收用户的输入操作指令。

在一些实施例中，根据用户的输入操作指令，确定模块401还用于根据输入操作指令，确定HTML页面中的第一渲染结果；

获取模块403还用于根据渲染器，通过用户代理接口获取第一渲染结果的属性和参数；

渲染模块404还用于根据第一渲染结果的属性和参数，使用渲染器对第一渲染结果进行渲染得到第二渲染结果；

存储模块405还用于将第二渲染结果存储在画布对象中；

加载模块404还用于根据渲染器的运行模式复制第二渲染结果到HTML页面。

可以理解的是，本发明实施例的复杂元素渲染装置，可以对应于本发明实施例中复杂元素渲染方法的执行主体，复杂元素渲染装置的各个模块的操作和/或功能的具体细节可以参见上述本发明实施例复杂元素渲染的方法中的相应部分的描述，为了简洁，在此不再赘述。

图9是本发明实施例提供的一种HTML页面内元素渲染的硬件结构。

如图9所示，本实施例中的元素渲染的设备500包括输入设备501、输入接口502、中央处理器503、存储器504、输出接口505、以及输出设备506。其中，输入接口502、中央处理器503、存储器504、以及输出接口505通过总线510相互连接，输入设备501和输出设备506分别通过输入接口502和输出接口505与总线510连接，进而与元素渲染的设备500的其他组件连接。

具体地，输入设备501接收来自外部的输入信息，并通过输入接口502将输入信息传送到中央处理器503；中央处理器503基于存储器504中存储的计算机可执行指令对输入信息进行处理以生成输出信息，将输出信息临时或者永久地存储在存储器504中，然后通过输出接口505将输出信息传送到输出设备506；输出设备506将输出信息输出到元素渲染的设备500的外部供用户使用。

也就是说，图9所示的复杂元素渲染的设备也可以被实现为包括：存储有计算机可执行指令的存储器；以及处理器，该处理器在执行计算机可执行指令时可以实现结合图4和图8描述的复杂元素渲染的方法和装置。

在一个实施例中，图9所示的复杂元素渲染的设备500包括：存储器504，用于存储程序；处理器503，用于运行存储器中存储的程序，以执行本发明实施例提供的HTML页面内元素渲染方法。

本发明实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现本发明实施例提供的HTML页面内元素渲染方法。

需要明确的是，本发明并不局限于上文所描述并在图中示出的特定配置和处理。为了简明起见，这里省略了对已知方法的详细描述。在上述实施例中，描述和示出了若干具体的步骤作为示例。但是，本发明的方法过程并不限于所描述和示出的具体步骤，本领域的技术人员可以在领会本发明的精神后，作出各种改变、修改和添加，或者改变步骤之间的顺序。

以上所述的结构框图中所示的功能块可以实现为硬件、软件、固件或者它们的组合。当以硬件方式实现时，其可以例如是电子电路、专用集成电路(ASIC)、适当的固件、插件、功能卡等等。当以软件方式实现时，本发明的元素是被用于执行所需任务的程序或者代码段。程序或者代码段可以存储在机器可读介质中，或者通过载波中携带的数据信号在传输介质或者通信链路上传送。“机器可读介质”可以包括能够存储或传输信息的任何介质。机器可读介质的例子包括电子电路、半导体存储器设备、ROM、闪存、可擦除ROM(EROM)、软盘、CD-ROM、光盘、硬盘、光纤介质、射频(RF)链路，等等。代码段可以经由诸如因特网、内联网等的计算机网络被下载。

还需要说明的是，本发明中提及的示例性实施例，基于一系列的步骤或者装置描述一些方法或装置。但是，本发明不局限于上述步骤的顺序，也就是说，可以按照实施例中提及的顺序执行步骤，也可以不同于实施例中的顺序，或者若干步骤同时执行。

以上所述，仅为本发明的具体实施方式，所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置、模块和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。应理解，本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。

Claims (13)

1.一种超文本标记语言HTML页面内元素渲染的方法，其特征在于，所述方法包括：

根据HTML页面内的待渲染元素确定画布对象，并确定渲染所述待渲染元素的渲染器的运行模式，其中，所述待渲染元素是由view标签定义的view元素，所述view元素代表所述HTML页面中的复杂控件；

根据所述待渲染元素加载所述渲染器；

根据所述渲染器，通过用户代理接口获取所述待渲染元素的属性和参数；

根据所述待渲染元素的属性和参数，使用所述渲染器对所述待渲染元素进行渲染得到第一渲染结果；

将所述第一渲染结果存储在所述画布对象中；

根据所述渲染器的运行模式从所述画布对象中复制所述第一渲染结果到所述HTML页面。

2.根据权利要求1所述的方法，其特征在于，所述待渲染元素包括指示信息，所述根据所述待渲染元素加载所述渲染器，包括：

根据所述指示信息加载所述待渲染元素指定的渲染器。

3.根据权利要求1所述的方法，其特征在于，所述根据所述待渲染元素加载所述渲染器，包括：

根据所述待渲染元素获取渲染器类型和渲染器设计类型；

根据所述渲染器类型和渲染器设计类型，加载所述渲染器类型和渲染器设计类型对应的渲染器。

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：

若根据所述渲染器类型和渲染器设计类型，加载所述渲染器类型和渲染器设计类型对应的渲染器失败，则根据所述渲染器设计类型加载所述渲染器设计类型对应的渲染器。

5.根据权利要求1所述的方法，其特征在于，所述待渲染元素包括外部资源获取指令信息，所述方法还包括：

根据所述外部资源获取指令信息确定外部资源的统一资源定位符URL，所述URL用于查找并获取所述外部资源，所述外部资源用于所述渲染器渲染得到所述第一渲染结果。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

将所述外部资源存储于本地缓存系统，并为存储于所述本地缓存系统的所述外部资源重新分配本地链接，所述待渲染元素包括重新分配的本地链接。

7.根据权利要求6所述的方法，其特征在于，所述方法还包括：移除所述重新分配的本地链接；

销毁所述第一渲染结果。

8.根据权利要求1至7任一项所述的方法，其特征在于，所述用户代理接口由统一的语言封装。

9.根据权利要求1所述的方法，其特征在于，所述根据所述待渲染元素加载所述渲染器之前，所述方法还包括：

验证所述渲染器的合法性。

10.根据权利要求1所述的方法，其特征在于，根据所述渲染器的运行模式从所述画布对象中复制所述第一渲染结果到所述HTML页面之后，所述方法还包括：

接收用户的输入操作指令；

根据所述输入操作指令，确定所述HTML页面中的所述第一渲染结果；

根据所述渲染器，通过所述用户代理接口获取所述第一渲染结果的属性和参数；

根据所述第一渲染结果的属性和参数，使用所述渲染器对所述第一渲染结果进行渲染得到第二渲染结果；

将第二渲染结果存储在画布对象中；

根据所述渲染器的运行模式复制所述第二渲染结果到所述HTML页面。

11.一种超文本标记语言HTML页面内元素渲染的装置，其特征在于，所述装置包括：

确定模块，用于根据超文本标记语言HTML页面内的待渲染元素确定画布对象，并确定渲染所述待渲染元素的渲染器的运行模式，其中，所述待渲染元素是由view标签定义的view元素，所述view元素代表所述HTML页面中的复杂控件；

加载模块，用于根据所述待渲染元素加载所述渲染器；

获取模块，用于根据所述渲染器，通过用户代理接口获取所述待渲染元素的属性和参数；

渲染模块，用于根据所述待渲染元素的属性和参数，使用所述渲染器对所述待渲染元素进行渲染得到第一渲染结果；

存储模块，用于将所述第一渲染结果存储在所述画布对象中；

所述加载模块，还用于根据所述渲染器的运行模式从所述画布对象中复制所述第一渲染结果到所述HTML页面。

12.一种超文本标记语言HTML页面内元素渲染的设备，其特征在于，所述设备包括：处理器以及存储有计算机程序指令的存储器；

所述处理器执行所述计算机程序指令时实现如权利要求1-10任意一项所述的HTML页面内元素渲染的方法。

13.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现如权利要求1-10任意一项所述的HTML页面内元素渲染的方法。

Images