CN111563363B

CN111563363B - 一种超文本标记语言文档内容生成及解析方法

Info

Publication number: CN111563363B
Application number: CN202010399099.2A
Authority: CN
Inventors: 魏永明; 耿岳; 薛淑明
Original assignee: Beijing Feynman Software Technology Co ltd
Current assignee: Beijing Feynman Software Technology Co ltd
Priority date: 2020-05-12
Filing date: 2020-05-12
Publication date: 2023-08-15
Anticipated expiration: 2040-05-12
Also published as: CN111563363A

Abstract

本发明提供一种超文本标记语言文档内容生成及解析方法，超文本标记语言文档内容生成方法包括：根据待置换数据元素定义待置换数据集合；根据置换模板元素定义置换模板，置换模板中包含待置换数据集合中各属性与置换模板中各属性的数据映射关系；根据迭代元素和置换元素定义待置换数据集合与置换模板的迭代置换关系，其中，迭代元素的data属性用以指定待置换数据集合；置换元素的with属性用以指定所使用的置换模板；根据待置换数据元素、置换模板元素、迭代元素和置换元素生成超文本标记语言文档内容。通过该方法生成的超文本标记语言文档并未用到脚本编程语言，因此解析时无需使用大量脚本程序，从而提升了渲染效率，节省了大量内存资源。

Description

一种超文本标记语言文档内容生成及解析方法

技术领域

本发明涉及计算机应用技术领域，具体涉及一种超文本标记语言文档内容生成及解析方法。

背景技术

ECMAScript是一种脚本编程语言，用于操控HTML页面中的内容和渲染行为，使用ECMAScript开发的应用，可以应用于不同的操作系统中，大大提高了应用的开发效率。但是在实际应用中，使用ECMAScript开发应用存在诸多问题，主要原因有：

一、ECMAScript本质上是解释性编程语言，运行效率偏低。尽管在发展Chrome浏览器的过程中，谷歌开发了V8引擎，使得ECMAScript脚本的执行速度有了大幅度的提升，但使用ECMAScript程序消耗的内存(RAM)要大很多。

二、用户代理使用DOM树描述HTML文档内容，可以很好地表达HTML文档内容之间的从属关系。但现代应用的用户界面中存在大量动态内容，需要频繁修改DOM树中的节点，比如删除、新增或者修改其属性等。然而对DOM的增加、删除或者修改操作，都是非常耗时的操作。比如删除HTML文档中的单个DOM节点，在最严重的情况下，会导致整个页面的重新布局并重新绘制所有节点。这导致用户体验的下降。虽然现有技术中通过使用虚拟DOM技术降低了对DOM树的频繁操作，但其整体方案建立在已有成熟的Web标准之上。这些框架大量使用ECMAScript脚本代码，因此其设计目标的达成严重依赖于高性能的ECMAScript引擎。同样会有消耗内存较大的问题。

发明内容

因此，本发明要解决的技术问题在于克服现有技术中的使用ECMAScript开发的应用严重依赖高性能的ECMAScript引擎导致应用的运行需消耗大量内存的缺陷，从而提供一种超文本标记语言文档内容生成及解析方法。

本发明第一方面提供一种超文本标记语言文档内容生成方法，包括：根据待置换数据元素定义待置换数据集合；根据置换模板元素定义置换模板，置换模板中包含待置换数据集合中各属性与置换模板中各属性的数据映射关系；根据迭代元素和置换元素定义待置换数据集合与置换模板的迭代置换关系，其中，迭代元素的data属性用以指定待置换数据集合；置换元素的with属性用以指定所使用的置换模板；根据待置换数据元素、置换模板元素、迭代元素和置换元素生成超文本标记语言文档内容。

可选地，根据待置换数据元素定义待置换数据集合的步骤，包括：根据待置换数据元素的name属性指定待置换数据集合的名称，用于标识待置换数据；在待置换数据集合中定义不同属性的值。

可选地，根据置换模板元素定义置换模板的步骤，包括：根据置换模板元素的id属性指定置换模板的名称，用于标识置换模板；根据数据映射属性定义数据映射关系，数据映射关系包括左值和右值；左值用于指定置换模板中被置换的内容或属性；右值用于指定用以替换左值的变量。

可选地，超文本标记语言文档内容生成方法还包括：根据切换和条件元素定义置换模板的条件置换；根据条件元素的with属性指定置换模板的名称；根据条件元素的条件属性定义置换模板的置换条件，置换条件用于表征包含待置换数据集合中的数据的逻辑关系；当置换条件成立时，调用置换模板。

可选地，根据待置换数据元素定义待置换数据集合的步骤，包括：根据待置换数据元素的name属性指定待置换数据的名称，用于标识待置换数据；使用herf属性指定待置换数据的资源地址，资源地址中存储有待置换数据集合的待置换数据。

本发明第二方面提供一种超文本标记语言文档解析方法，超文本标记语言文档包括：根据待置换数据元素定义的待置换数据集合；根据置换模板元素定义的置换模板，置换模板中包含待置换数据集合中各属性与置换模板中各属性的数据映射关系；根据迭代元素和置换元素定义的待置换数据集合与置换模板的迭代置换关系，其中，迭代元素的data属性用以指定待置换数据集合；置换元素的with属性用以指定所使用的置换模板；超文本标记语言文档解析方法包括：通过键值对容器将待置换数据集合进行存储，并将待置换数据集合关联至DOM树的HEAD节点；将模板解析为影子DOM树，通过键值对容器将影子DOM树进行存储，并将存储于键值对容器的影子DOM树关联至DOM树的BODY节点；根据迭代元素的data属性指定的待置换数据集合提取至少一组置换数据；根据置换元素的with属性指定的置换模板提取置换模板；根据置换模板中的数据映射关系将置换数据中的数据迭代置换至置换模板，并将置换数据中的数据插入至DOM树中。

可选地，数据映射关系包括左值和右值；左值用于指定置换模板中被置换的内容或属性；右值用于指定用以替换左值的变量；根据置换模板中的数据映射关系将置换数据中的数据迭代置换至置换模板的步骤，包括：将右值转换为第一求值树；根据第一求值树计算右值的值；将左值用右值的值替换，并将右值的值插入至DOM树中。

可选地，超文本标记语言文档还包括：根据切换元素和条件元素定义的置换模板的条件置换；条件元素的with属性用于指定置换模板的名称；条件元素的条件属性用于定义置换模板的置换条件，置换条件用于表征包含待置换数据集合中的数据的逻辑关系；超文本标记语言文档解析方法还包括：将置换条件转换为第二求值树；根据第二求值树判定置换条件是否成立；当置换条件成立时，读取with属性指定的置换模板，将置换模板插入DOM树中。

可选地，超文本标记语言文档中包括：根据herf属性指定的待置换数据集合的资源地址；通过键值对容器将待置换数据集合进行存储，并将待置换数据集合关联至DOM树的HEAD节点的步骤之前，还包括：根据资源地址获取待置换数据集合。

本发明第三方面提供一种计算机设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，从而执行如本发明第二方面提供的超文本标记语言文档解析方法。

本发明第四方面提供一种计算机可读存储介质，其特征在于，计算机可读存储介质存储有计算机指令，计算机指令用于使计算机执行如本发明第二方面提供的超文本标记语言文档解析方法。

本发明技术方案，具有如下优点：

1.本发明提供的超文本标记语言文档内容生成方法，根据待置换数据元素定义待置换数据集合，根据置换模板元素定义置换模板，并根据迭代元素和置换元素定义待置换数据集合与置换模板的迭代置换关系，由待置换数据元素、置换模板元素、迭代元素和置换元素生成的超文本标记语言文档，通过该方法生成的超文本标记语言生成的文档并未用到脚本编程语言，因此在解析时解析器可以重复克隆置换模板，并将已有的待置换数据集合中的数据自动置换至置换模板中，无需使用大量脚本程序，从而提升了超文本标记语言文档页面的渲染效率，节省了大量内存资源。

2.本发明提供的超文本标记语言文档内容生成方法，还根据切换和条件元素定义了置换模板的条件置换，使得对模板的使用更加灵活。

3.本发明提供的超文本标记语言文档内容生成方法，通过herf指定待置换数据集合的资源地址，即，将待置换数据集合存储于超文本标记语言文档外部，将待置换数据集合与超文本标记语言文档完全隔离，服务器端无需关心数据的具体呈现方式，只需返回资源地址中存储的数据集合即可，原本由服务器端动态生成的超文本标记语言文档，在将置换数据集合与超文本标记语言文档完全隔离后，只需解析器即可完成，大大简化了服务器端的代码设计和开发工作量，降低了服务器端的负载。

4.本发明提供的超文本标记语言文档解析方法，对本发明第一方面提供的超文本标记语言文档内容生成方法生成的超文本标记语言文档进行解析时，先将待置换数据集合关联至DOM树的HEAD节点，便于快速查找待置换数据集合，将置换模板解析为影子DOM树，并将影子DOM树关联至DOM树的BODY节点，一方面便于快速查找置换模板，另一方面，将置换模板解析为影子DOM树，在对超文本标记语言文档内容进行渲染时，置换模板不会对渲染结果造成影响。根据置换元素的with属性指定的置换模板中的数据映射关系将迭代元素的data属性指定的待置换数据集合中的数据置换至置换模板中，将置换数据集合中的数据插入DOM树中，完成对超文本标记语言文档的解析，该解析过程无需使用脚本，提升了超文本标记语言文档页面的渲染效率，节省了大量内存资源。

5.本发明提供的超文本标记语言文档解析方法，对本发明第一方面提供的超文本标记语言文档内容生成方法生成的超文本标记语言文档进行解析时，在计算数据映射关系中的右值时，先将右值转换为第一求值树，并根据第一求值树计算右值的值，从而将数据映射关系中的左值用右值的值替换，并将右值的值插入至DOM树中，再计算右值的值时，将右值编译为用于求值的函数调用树结构，使用深度优先算法遍历求值树即可，无需使用脚本，提高了渲染效率，节省了内存资源。

6.本发明提供的超文本标记语言文档解析方法，对本发明第一方面提供的超文本标记语言文档内容生成方法生成的超文本标记语言文档进行解析时，如果超文本标记语言文档中存在条件置换，需要判定条件是否成立，将置换条件表示为第二求值树，第二求值树为用于求值的函数调用树结构，使用深度优先算法遍历第二求值树即可判定置换条件是否成立，无需使用脚本，提高了渲染效率，节省了内存资源。

7.本发明提供的超文本标记语言文档解析方法，对本发明第一方面提供的超文本标记语言文档内容生成方法生成的超文本标记语言文档进行解析时，由于超文本标记语言文本中仅通过herf属性指定待置换数据集合的资源地址，即待置换数据集合位于超文本标记语言文档外部，服务器端无需关心数据的具体呈现方式，只需返回资源地址中存储的数据集合即可，原本由服务器端动态生成的超文本标记语言文档，在将置换数据集合与超文本标记语言文档完全隔离后，只需解析器即可完成，大大简化了服务器端的代码设计和开发工作量，降低了服务器端的负载。

附图说明

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

图1-图5为本发明实施例中超文本标记语言文档内容生成方法的具体示例的流程图；

图6为本发明实施例中超文本标记语言文档内容解析方法的具体示例的流程图；

图7为本发明实施例中将待置换数据集合关联至DOM树的HEAD节点的示意图；

图8为本发明实施例中将待置换数据集合关联至DOM树的BODY节点的示意图；

图9-图11为本发明实施例中超文本标记语言文档内容解析方法的具体示例的流程图；

图12为本发明实施例中在待置换数据集合中设置监听器的示意图；

图13为本发明实施例中提供的计算机设备示意图。

具体实施方式

下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

此外，下面所描述的本发明不同实施方式中所涉及的技术特征只要彼此之间未构成冲突就可以相互结合。

实施例1

本实施例提供一种超文本标记语言文档内容生成方法，如图1所示，包括：

步骤S110：根据待置换数据元素定义待置换数据集合，在一具体实施例中，待置换数据集合定义在超文本标记语言(HyperText Mark-up Language，HTML)文档的head元素中，并且在本发明实施例中，待置换数据集合的格式为JSON。在一具体实施例中，待置换数据元素在代码中可以通过任意合法字符表示，在本发明实施例中通过字符“archedata”表示待置换数据元素。

步骤S120：根据置换模板元素定义置换模板，置换模板中包含待置换数据集合中各属性与置换模板中各属性的数据映射关系，在一具体实施例中，置换模板定义在HTML文档的body元素中。置换模板元素与HTML5规范引入的template元素类似，但是对于template元素，需要执行脚本才能实现元素的克隆，但是本发明实施例提供的置换模板元素这一虚拟元素无需执行脚本即可完成克隆。在一具体实施例中，待置换数据元素在代码中可以通过任意合法字符表示，在本发明实施例中通过字符“archetype”表示待置换数据元素。

步骤S130：根据迭代元素和置换元素定义待置换数据集合与置换模板的迭代置换关系，其中，迭代元素的data属性用以指定待置换数据集合；置换元素的with属性用以指定所使用的置换模板。在一具体实施例中，迭代元素和置换元素定义在HTML文档的main元素中。在一具体实施例中，迭代元素和置换元素在代码中可以通过任意合法字符表示，在本发明实施例中通过字符“iteration”表示迭代元素，通过字符“displace”表示置换元素。

步骤S140：根据待置换数据元素(archedata)、置换模板元素(archetype)、迭代元素(iteration)和置换元素(displace)生成超文本标记语言文档内容。

本发明实施例提供的超文本标记语言文档内容生成方法，根据待置换数据元素定义待置换数据集合，根据置换模板元素定义置换模板，并根据迭代元素和置换元素定义待置换数据集合与置换模板的迭代置换关系，由待置换数据元素、置换模板元素、迭代元素和置换元素生成的超文本标记语言文档，通过该方法生成的超文本标记语言生成的文档并未用到脚本编程语言，因此在解析时解析器无需脚本即可重复克隆置换模板，并将已有的待置换数据集合中的数据自动置换至置换模板中，无需使用大量脚本程序，从而提升了超文本标记语言文档页面的渲染效率，节省了大量内存资源。

在一具体实施例中，根据待置换数据元素、置换模板元素、迭代元素和置换元素生成的超文本标记语言文档如下所示：

可以看出，上述HTML中定义了两个待置换数据集合、五个置换模板、一对迭代置换。

在一具体实施例中，在迭代元素(iteration)中，还可以使用datarange属性指定迭代范围，语法为：[start],stop,[step]，分别指定起始索引值、结束索引值以及步长值。不指定该属性时，按照自然顺序依次迭代，例如：

</iteration>

上述代码表示使用$users待置换数据集合，从索引值0迭代到索引值10；

datarange＝"0,$#,2"表示仅迭代$users待置换数据集合中的偶数索引值对应的单元；

datarange＝"$#,0,-1"表示反序迭代$users待置换数据集合。

在一具体实施例中，在迭代元素(iteration)中，还可以使用sortbykey属性指定排序键。当数组元素为字典时，可以通过这个属性指定按照某个特定的键值进行排序，然后再进行迭代，例如：

sortbykey＝"name ASC"，ASC或者DESC后缀可用于指定排序规则，分别为升序、降序，默认为升序。

在一具体实施例中，在置换元素(displace)中，还可以通过data属性指定当前迭代上下文数据中的某个子对象，例如：

data属性的值默认为$@，表示当前迭代上下文中使用的数据。

在一可选实施例中，如图2所示，上述步骤S110包括：

步骤S111：根据待置换数据元素(archedata)的name属性指定待置换数据集合的名称，用于标识待置换数据。

步骤S112：在待置换数据集合中定义不同属性的值。

如上述HTML文档所示：

在上述待置换数据集合中，“users”为该待置换数据集合的名称，“id”、“avatar”等为待置换数据元素(archedata)中的不同键值，并且在该文档中为待置换数据集合中的不同键值分别赋值。

在一可选实施例中，如图3所示，上述步骤S120包括：

步骤S121：根据置换模板元素(archetype)的id属性指定置换模板的名称，用于标识置换模板；

步骤S122：根据数据映射属性(datamap)定义数据映射关系，数据映射关系包括左值和右值；左值用于指定置换模板中被置换的内容或属性；右值用于指定用以替换左值的变量。

如上述HTML文档所示：

在上述置换模板中，“user-item”为该模板的名称，并且用HTML元素li、img、span等元素定义了一段HTML文档片段，以li元素为例，在li元素中，引入了一个新的数据映射属性(datamap)，该属性以下面的方式定义了一个或多个数据映射关系：attr.id:$@.id；attr.alt:$@.name，表示将$@.id的值赋值给li元素的id属性，将$@.name的值赋值给li元素的alt属性。

用户代理在$users JSON数据上执行迭代时(该JSON数据是一个数组，其中的每个单元是一个字典数据结构)，每次迭代会有一个迭代上下文数据，也就是该JSON数据中的每个单元，并且通过$@这一特别变量名称来指代这个上下文数据。因此，

在第一次迭代中，$@的值是{"id":"1","avatar":"/img/avatars/1.png","name":"Tom","region":"en_US"}，所以$@.id的值是1，而$@.name的值是Tom。

在第二次迭代中，$@的值是{"id":"2","avatar":"/img/avatars/2.png","name":"Jerry","region":"zh_CN"}，所以$@.id的值是2，而$@.name的值是Jerry。

于是，迭代执行完成后的实际生成的HTML文档片段将为：

在一具体实施例中，datamap可表示为：

该表达式使用:(冒号)运算符，其左值(lvalue)指定置换模板元素的哪个属性或者内容将被置换，可取值：

textContent：表示右值(rvalue)表达式的值将被用作目标元素的文本内容。该取值亦可用innerText表示。

innerHTML：表示右值表达式的值将被用作目标元素的内部HTML内容。

attr.<attribute-name>：表示右值表达式的值将被用作目标元素的特定属性(attribute)的值，如attr.value、attr.name、attr.id等。

style.<style-name>：表示右值表达式的值将被用作目标元素的特定CSS属性(property)的值，如style.color、style.font、style.width等。

右值(rvalue expression)表达式中，可以使用$前缀来指代一个变量，如上述HTML文档中使用的$global、$users、$@等。$@这类名称特殊的变量称为内置(built-in)变量，可在迭代中使用。除了$@之外，还可定义其他内置变量，罗列如下：

$@：当前迭代上下文中使用的数据。

$&：当前迭代的索引值，比如第一次迭代，该变量的值为0，第二次迭代，该变量的值为1，以此类推。

$#：被迭代的数据的单元数量。

$<N>：被迭代数组数据的第N个单元数据。

$$：当前迭代上下文数据的JSON字符串表达，比如用['string0','string1','string2','string3']表示一个字符串数组。

$！：一个空的数组对象。

在一可选实施例中，如图4所示，本发明实施例提供的超文本标记语言文档内容生成方法还包括：

步骤S50：根据切换元素和条件元素定义置换模板的条件置换。在一具体实施例中，切换元素和条件元素在代码中可以通过任意合法字符表示，在本发明实施例中通过字符“switch”表示切换元素，通过“case”表示条件元素。

步骤S60：根据条件元素(case)的with属性指定第二置换模板的名称。如上述HTML文档所示，以第一个条件元素(case)为例，第一个条件元素(case)的archetype属性指定的置换模板为名称为"footer-cn"的置换模板。

步骤S70：根据条件元素(case)的条件(if)属性定义置换模板的置换条件，置换条件用于表征包含待置换数据集合中的数据的逻辑关系。以第一个if元素为例，第一个if属性定义的置换条件所表示的意思为：名称为“global”的待置换数据集合中的locale元素的值为“zh_CN”。

步骤S80：当置换条件成立时，调用置换模板，即，当名称为“global”的待置换数据集合中的locale元素的值为“zh_CN”时，调用名称为"footer-cn"的置换模板。

本发明实施例提供的超文本标记语言文档内容生成方法，还根据切换元素(switch)和条件元素(case)定义了置换模板的条件置换，使得对模板的使用更加灵活。

在一具体实施例中，一个切换元素(switch)中包含多组条件元素(case)时，HTML解析器在解析切换元素(switch)时，将依次判断条件元素(case)中的匹配条件，若匹配则执行with属性定义的置换，并不再继续判断其后的条件元素(case)。因此，由于head中定义的$global.locale的值为zh_CN，故上述条件置换的结果为：<ahref＝"http://www.baidu.com">Baidu</a>。

当HTML解析器完成解析并作用了迭代置换以及条件置换之后，上述HTML文档最终的内容如下：

在一具体实施例中，条件置换还可以在迭代置换中使用，例如：

以上代码最终将只显示$users中，locale键值匹配$global.locale的用户。

在条件(if)属性中，可以使用预先定义的逻辑操作函数，用于实现复杂的逻辑运算，和字符串操作函数类似，这些函数可嵌套使用。另外有如下约定：

当字符串作为逻辑值使用时，空字符串(″)表示FALSE，其他字符串表示TRUE。

当逻辑值作为字符串使用时，FALSE对应空字符串(″)，TRUE对应包含一个空格的字符串(″)。

本发明实施例要求必须实现的逻辑操作函数如下：

NOT，对参数逻辑值做取反操作，其原型为：NOT(boolean)；

AND，逻辑与操作，要求至少两个参数，其原型为：AND(boolean1,boolean2,...)；

OR，逻辑或操作，要求至少两个参数，其原型为：OR(boolean1,boolean2,...)；

XOR，逻辑异或操作，其原型为：XOR(boolean1,boolean2)；

同时应至少实现如下字符串匹配函数：

MATCH，判断两个字符串是否匹配，可选严格匹配，不区分大小写匹配或者执行正则表达式匹配，其原型为：MATCH($string1,$string2[,'case'|'reg')，

其中第三个参数可选：

没有第三个参数时，不区分大小写匹配字符串。

第三个字符串为'case'时，区分大小写匹配字符串。

第三个字符串为'reg'时，匹配正则表达式。

在一具体实施例中，有了以上的逻辑操作函数之后，可以构造比较复杂的逻辑条件，如：

以上的if条件在用户的$@.locale值匹配$global.locale，或者$@.name的第一个字母匹配'J'时成立。

在一可选实施例中，如图5所示，对于上述步骤S110，可以通过步骤S113代替步骤S112：

步骤S113：使用herf属性指定待置换数据集合的资源地址，资源地址中存储有待置换数据集合的待置换数据，例如：

本发明实施例提供的超文本标记语言文档内容生成方法，通过herf指定待置换数据集合的资源地址，即，将待置换数据集合存储于超文本标记语言文档外部，将待置换数据集合与超文本标记语言文档完全隔离，服务器端无需关心数据的具体呈现方式，只需返回资源地址中存储的数据集合即可，原本由服务器端动态生成的超文本标记语言文档，在将置换数据集合与超文本标记语言文档完全隔离后，只需解析器即可完成，大大简化了服务器端的代码设计和开发工作量，降低了服务器端的负载。

实施例2

本发明实施例提供一种超文本标记语言文档解析方法，超文本标记语言文档包括：根据待置换数据元素定义的待置换数据集合；根据置换模板元素定义的置换模板，置换模板中包含待置换数据集合中各属性与置换模板中各属性的数据映射关系；根据迭代元素和置换元素定义的待置换数据集合与置换模板的迭代置换关系，其中，迭代元素的data属性用以指定待置换数据集合；置换元素的with属性用以指定所使用的置换模板。超文本标记语言文档的生成方式如上述实施例1所示，对超文本标记语言文档的详细描述见上述实施例1中对步骤S110-步骤S140的描述。

如图6所示，本发明实施例的超文本标记语言文档解析方法包括：

步骤S210：通过键值对容器将待置换数据集合进行存储，并将待置换数据集合关联至DOM树的HEAD节点，如图7所示，将待置换数据聚合关联至DOM树的HEAD节点，便于根据名称快速找到待置换数据集合。

步骤S220：将置换模板解析为影子DOM树，通过键值对容器将影子DOM树进行存储，并将影子DOM树关联至DOM树的BODY节点，如图8所示，将只换模板关联至DOM树的BODY节点，便于根据名称快速找到置换模板，并且在对置换模板进行解析时，将置换模板解析为影子DOM树，在渲染页面时，用户代理的渲染器跳过所有的影子DOM树，因此置换模板不会对渲染结果产生影响。

步骤S230：根据迭代元素的data属性指定的待置换数据集合提取至少一组置换数据；

步骤S240：根据置换元素的with属性指定的置换模板提取置换模板；

步骤S250：根据置换模板中的数据映射关系将置换数据中的数据迭代置换至置换模板，并将置换数据中的数据插入至DOM树中。

以上述超文本标记语言文档中的迭代置换为例，data属性指定的待置换数据集合为名称为“users”的待置换数据集合，因此需要从名称为users的待置换数据集合中提取数据，with属性指定的置换模板为名称为“user-item”的置换模板，且“users”的待置换数据集合中有两组数据，因此需要复制两次名称为“user-item”的置换模板，从而依次将名称为“users”的待置换数据集合中的两组数据代入名称为“user-item”的置换模板中。

本发明实施例提供的超文本标记语言文档解析方法，对本发明实施例1提供的超文本标记语言文档内容生成方法生成的超文本标记语言文档进行解析时，先将待置换数据集合关联至DOM树的HEAD节点，便于快速查找待置换数据集合，将置换模板解析为影子DOM树，并将影子DOM树关联至DOM树的BODY节点，一方面便于快速查找置换模板，另一方面，将置换模板解析为影子DOM树，在对超文本标记语言文档内容进行渲染时，置换模板不会对渲染结果造成影响。根据置换元素的with属性指定的置换模板中的数据映射关系将迭代元素的data属性指定的待置换数据集合中的数据置换至置换模板中，将置换数据集合中的数据插入DOM树中，完成对超文本标记语言文档的解析，该解析过程无需使用脚本，提升了超文本标记语言文档页面的渲染效率，节省了大量内存资源。

在一具体实施例中，用户代理应该增加一组DOM接口，用于操作影子DOM树。这组接口至少包含：

get：通过id返回影子DOM树的根(root)。之后可按照正常的DOM树对其中的内容进行操作。

add：添加新的影子DOM树。

delete：删除特定的影子DOM树。

在一可选实施例中，数据映射关系包括左值和右值；左值用于指定置换模板中被置换的内容或属性；右值用于指定用以替换左值的变量，详细描述见上述实施例1中对数据映射关系的详细描述。

如图9所示，上述步骤S250具体包括：

步骤S251：如图8所示，将右值转换为求值树，需要说明的是，右值可能仅为一个值，也可能为由多个值组成的表达式，当右值仅为一个值时，无需计算为求值树，只需将右值的值代替左值即可，但是右值为由多个值组成的表达式时，需要先计算右值的值，才能将右值的值代替左值，从而完成替换，因此为了对右值的值进行计算，本发明实施例建立了求值数。

例如，当右值表达式为：MATCH(STRCAT('zh','_','CN'),$@.region)时，可以构建如下求值数：将构造如下所示的求值树：

如上构造了第一求值树之后，只要按照深度优先算法遍历求值树确定每个节点的值即可，如上面的第一求值树：

节点(1)：这个节点是一个叶子节点，其值取为一个字面字符串“zh”。

节点(2)：这个节点是一个叶子节点，其值为一个字面立即字符串，即：_。

节点(3)：这个节点是一个叶子节点，其值取为一个字面字符串“CN”。

节点(4)：这个节点是一个函数节点，用其子节点的值作为参数调用STRCAT函数即可获得对应的值，即：zh_CN。

节点(5)：这个节点是一个函数节点，用其子节点的值作为参数调用MATCH函数，判断两个参数的值是否相等。

节点(6)：这个节点是一个叶子节点，其值取为当前上下文中，键值为“region”的JSON对象的Value值。而该JSON对象，又为archedata元素所规定。

所以上述求值树的最终结果是根据当前上下文传递进来的JSON对象而定。

当archedata元素所对应的JSON数组发生变化时，用户代理将在该求值树上重新执行上述求值过程，并返回求值结果，而不需要再次解析并构造整个求值树，另外，求值过程几乎没有任何性能损失。

步骤S252：根据求值树计算右值的值，求值过程如上。

步骤S253：将左值用右值的值替换，并将右值的值插入至DOM树中。

本发明实施例提供的超文本标记语言文档解析方法，对本发明实施例1提供的超文本标记语言文档内容生成方法生成的超文本标记语言文档进行解析时，在计算数据映射关系中的右值时，先将右值转换为第一求值树，并根据第一求值树计算右值的值，从而将数据映射关系中的左值用右值的值替换，并将右值的值插入至DOM树中，再计算右值的值时，将右值编译为用于求值的函数调用树结构，使用深度优先算法遍历求值树即可，无需使用脚本，提高了渲染效率，节省了内存资源。

在一可选实施例中，超文本标记语言文档还包括：根据切换元素和条件元素定义的置换模板的条件置换；条件元素的with属性用于指定置换模板的名称；条件元素的条件属性用于定义置换模板的置换条件，置换条件用于表征包含待置换数据集合中的数据的逻辑关系，详细描述兼尚书实施例1中对步骤S150-步骤S180的描述。

如图10所示，超文本标记语言文档解析方法还包括：

步骤S260：将置换条件转换为第二求值树，详细描述见上述实施例1中对第一求值数的描述。

步骤S270：根据第二求值树判定置换条件是否成立。

步骤S280：当置换条件成立时，读取with属性指定的置换模板，将置换模板插入DOM树中。

在一可选实施例中，超文本标记语言文档中包括：根据herf属性指定的待置换数据集合的资源地址，详细描述见上述实施例1中对步骤S113的描述。

如图11所示，上述步骤S210之前，本发明实施例提供的超文本标记语言文档解析方法还包括：

步骤S290：根据资源地址获取待置换数据集合。

本发明实施例提供的超文本标记语言文档解析方法，对本发明实施例1提供的超文本标记语言文档内容生成方法生成的超文本标记语言文档进行解析时，由于超文本标记语言文本中仅通过herf属性指定待置换数据集合的资源地址，即待置换数据集合位于超文本标记语言文档外部，服务器端无需关心数据的具体呈现方式，只需返回资源地址中存储的数据集合即可，原本由服务器端动态生成的超文本标记语言文档，在将置换数据集合与超文本标记语言文档完全隔离后，只需解析器即可完成，大大简化了服务器端的代码设计和开发工作量，降低了服务器端的负载。

由于archedata数据通常由用户代理在后台异步加载，因此会存在需要用待置换数据集合时，该数据还未加载完成的情况，为了使得渲染过程不受影响，在数据未准备好，或者在引用数据出现错误时，使用iteration元素的nodata子元素的内容进行渲染，或者使用displace或者case元素的子元素进行渲染，如下所示：

在$users数据尚未准备好时，以上内容相当于如下HTML片段：

Please wait for data！

在$users已准备好(假定迭代2次)，但$global未准备好时，以上内容相当于如下HTML片段：

Bad locale data！

在一具体实施例中，可以将这些元素称为备用元素(alternative elements)。一旦所需的待置换数据集合就绪，HTML解析器将重新解析iteration等元素，完成迭代并置换模板元素的工作，删除备用元素并将置换后的元素插入DOM树中。

浏览器展示页面内容发起两次内容请求，一次获取静态的HTML文档内容，可以非常快，渲染速度也很快，并可在本地长期缓存，而另外一次是获取真正数据的请求，相对会慢一些。基于此，浏览器在展现一个HTML文档内容时，可通过静态HTML文档中的备用元素展示等待状态的页面(这将非常快)，等数据就绪后，再展示完整页面，这将带来用户体验的提升。

在一具体实施例中，解析迭代元素时，若data属性尚未准备好，则跳过其中所有的置换元素、条件元素，仅渲染其子元素nodata所包含的内容；在解析置换元素、条件元素时，若data属性尚未准备好，则展示其中的内容，否则跳过其中的内容；当迭代元素、置换元素、切换元素上的模板数据未准备好时，应在HEAD节点的待置换数据集合容器中创建一个监听器，如图12所示，当对应名称的待置换数据集合准备好，调用该监听器，监听器重新执行迭代或者置换操作；除非被置换，否则迭代元素、置换元素、切换元素、条件元素等元素在DOM树上均存在对应的节点。通过现代浏览器的页面修改功能，可动态修改这些元素的属性以方便调试。

在一具体实施例中，本发明实施例提供的超文本标记语言文档解析方法还可支持动态置换，也就是说，使用脚本设置某个元素的innerHTML内容时，若其中含有iteration等元素，用户代理仍可以按正确处理：

另外，在执行动态置换时，用户代理应该首先根据迭代置换规则构造一个新的DOM子树，然后通过对比置换前后的DOM子树不同来执行相应的操作，以便降低对已有DOM树的更改次数，从而提高性能。

比如，下面的HTML文档通过外部内容/get_user_list获得模板数据

由此形成的最终HTML文档内容可能为：

/>

假定该页面在相隔一定时间后执行如下脚本：

新的$users内容只增加了一个用户(Micky)，前两个用户(Tom和Jerry)都没有任何变化，如：

则按照以上优化策略，只需要在已有的DOM树上，在Jerry之后新增一个新的用户条目即可，而前两个条目无须做任何改动：

/>

需要说明的是，为了支持动态置换，需要新增一个DOM接口用来从外部内容中装载模板数据。上述脚本代码中的document.loadArchedata就是从外部内容中加载模板数据的新增接口。

实施例3

本发明实施例提供一种计算机设备，如图13所示，该计算机设备主要包括一个或多个处理器31以及存储器32，图13中以一个处理器31为例。

该计算机设备还可以包括：输入装置33和输出装置34。

处理器31、存储器32、输入装置33和输出装置34可以通过总线或者其他方式连接，图13中以通过总线连接为例。

处理器31可以为中央处理器(Central Processing Unit，CPU)。处理器31还可以为其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。存储器32可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储超文本标记语言文档内容生成或解析方法的使用所创建的数据等。此外，存储器32可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器32可选包括相对于处理器31远程设置的存储器。输入装置33可接收用户输入的计算请求(或其他数字或字符信息)。输出装置34可包括显示屏等显示设备，用以输出计算结果。

实施例4

本发明实施例提供一种计算机可读存储介质，该计算机可读存储介质存储计算机指令，计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的超文本标记语言文档内容生成或解析方法。其中，存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(Random Access Memory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard Disk Drive，缩写：HDD)或固态硬盘(Solid-State Drive，SSD)等；存储介质还可以包括上述种类的存储器的组合。

显然，上述实施例仅仅是为清楚地说明所作的举例，而并非对实施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。而由此所引伸出的显而易见的变化或变动仍处于本发明创造的保护范围之中。

Claims

1.一种超文本标记语言文档内容生成方法，其特征在于，包括：

根据待置换数据元素定义待置换数据集合；

根据置换模板元素定义置换模板，所述置换模板中包含所述待置换数据集合中各属性与所述置换模板中各属性的数据映射关系；所述数据映射关系包括左值和右值；左值用于指定置换模板中被置换的内容或属性；右值用于指定用以替换左值的变量；

根据迭代元素和置换元素定义所述待置换数据集合与置换模板的迭代置换关系，其中，所述迭代元素的data属性用以指定所述待置换数据集合；所述置换元素的with属性用以指定所使用的所述置换模板；

将所述待置换数据元素、置换模板元素、迭代元素和置换元素相结合，生成超文本标记语言文档内容。

2.根据权利要求1所述的超文本标记语言文档内容生成方法，其特征在于，所述根据待置换数据元素定义待置换数据集合的步骤，包括：

根据待置换数据元素的name属性指定所述待置换数据集合的名称，用于标识所述待置换数据；

在所述待置换数据集合中定义不同属性的值。

3.根据权利要求1所述的超文本标记语言文档内容生成方法，其特征在于，所述根据置换模板元素定义置换模板的步骤，包括：

根据置换模板元素的id属性指定所述置换模板的名称，用于标识所述置换模板；

根据数据映射属性定义所述数据映射关系，所述数据映射关系包括左值和右值；所述左值用于指定所述置换模板中被置换的内容或属性；所述右值用于指定用以替换所述左值的变量。

4.根据权利要求1所述的超文本标记语言文档内容生成方法，其特征在于，还包括：

根据切换元素和条件元素定义置换模板的条件置换；

根据所述条件元素的with属性指定所述置换模板的名称；

根据所述条件元素的条件属性定义所述置换模板的置换条件，所述置换条件用于表征包含待置换数据集合中的数据的逻辑关系；

当所述置换条件成立时，调用所述置换模板。

5.根据权利要求1所述的超文本标记语言文档内容生成方法，其特征在于，所述根据待置换数据元素定义待置换数据集合的步骤，包括：

使用herf属性指定所述待置换数据集合的资源地址，所述资源地址中存储有所述待置换数据集合的待置换数据。

6.一种超文本标记语言文档解析方法，其特征在于，所述超文本标记语言文档包括：

根据待置换数据元素定义的待置换数据集合；

根据置换模板元素定义的置换模板，所述置换模板中包含所述待置换数据集合中各属性与所述置换模板中各属性的数据映射关系；

根据迭代元素和置换元素定义的所述待置换数据集合与置换模板的迭代置换关系，其中，所述迭代元素的data属性用以指定所述待置换数据集合；所述置换元素的with属性用以指定所使用的所述置换模板；

所述超文本标记语言文档解析方法包括：

通过键值对容器将所述待置换数据集合进行存储，并将所述待置换数据集合关联至DOM树的HEAD节点；

将所述置换模板解析为影子DOM树，通过键值对容器将所述影子DOM树进行存储，并将所述影子DOM树关联至DOM树的BODY节点；

根据所述迭代元素的data属性指定的待置换数据集合提取至少一组置换数据；

根据所述置换元素的with属性指定的置换模板提取置换模板；

根据所述置换模板中的数据映射关系将所述置换数据中的数据迭代置换至所述置换模板，并将所述置换数据中的数据插入至所述DOM树中；

所述数据映射关系包括左值和右值；所述左值用于指定所述置换模板中被置换的内容或属性；所述右值用于指定用以替换所述左值的变量；

所述根据所述置换模板中的数据映射关系将所述置换数据中的数据迭代置换至所述置换模板，并将所述置换数据中的数据插入至所述DOM树中的步骤，包括：

将所述右值转换为第一求值树；

根据所述第一求值树计算所述右值的值；

将所述左值用所述右值的值替换，并将所述右值的值插入至所述DOM树中。

7.根据权利要求6所述的超文本标记语言文档解析方法，其特征在于，所述超文本标记语言文档还包括：根据switch和case元素定义的第二置换模板的条件置换；所述case元素的with属性用于指定置换模板的名称；条件元素的条件属性用于定义所述置换模板的置换条件，所述置换条件用于表征包含待置换数据集合中的数据的逻辑关系；

所述超文本标记语言文档解析方法还包括：

将所述置换条件转换为第二求值树；

根据所述第二求值树判定所述置换条件是否成立；

当所述置换条件成立时，读取所述with属性指定的置换模板，将所述置换模板插入所述DOM树中。

8.根据权利要求6或7所述的超文本标记语言文档解析方法，其特征在于，所述超文本标记语言文档中包括：根据herf属性指定的所述待置换数据集合的资源地址；

所述通过键值对容器将所述待置换数据集合进行存储，并将所述待置换数据集合关联至DOM树的HEAD节点的步骤之前，还包括：

根据所述资源地址获取所述待置换数据集合。

9.一种计算机设备，其特征在于，包括：

至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，从而执行如权利要求6-8中任一项所述的超文本标记语言文档解析方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行如权利要求6-8中任一项所述的超文本标记语言文档解析方法。