CN110968314A - 一种页面生成方法及装置 - Google Patents

Abstract

本发明实施例提供一种页面生成方法及装置，所述页面生成方法包括：获得第一页面的页面数据和配置数据，其中，所述配置数据包括所述第一页面中的第一元素的标识信息和第二页面中的第二元素的元素信息；基于所述标识信息，在所述页面数据中查找所述第一元素的元素信息；在根据所述第一页面的页面数据生成所述第一页面的过程中，根据所述第一元素的元素信息和所述第二元素的元素信息，将所述第一元素渲染为所述第二元素，得到所述第二页面。如此，能够简化页面生成过程，减少耗时。

Description

一种页面生成方法及装置

技术领域

本发明实施例涉及互联网技术领域，尤其涉及一种页面生成方法及装置。

背景技术

网站设计中，一个页面经常会面临多种设计方案的选择。例如，页面中的输入控件是使用文本输入框还是使用下拉列表，页面中的按钮的边框是使用圆形的还是使用矩形的，页面中商品栏是设置在左侧还是设置在右侧等。A/B测试(Test)方法便是用于比较和选择设计方案优劣的方法。

目前，在页面的A/B Test中，通常需要为一个页面创建两个(或多个)不同的测试页面，并将这些不同的测试页面均部署在网站上，然后通过各种条件(如地理位置、性别、年龄等)筛选出不同用户群，使得这些不同用户群会访问不同的测试页面，最后收集用户使用数据，通过分析用户的使用数据，将测试页面中更符合设计目标或者更接近测试想要的结果的页面确定为所需要的页面进行推广。

然而，在进行A/B Test时，如果两个设计方案基本是相同的，仅仅只是个别页面元素有所不同，例如，一个测试页面中是使用圆形的按钮，而另一个测试页面中是使用矩形的按钮，仍然需要更改页面的源代码分别生成两个测试页面，并分别部署在网站上，使得整个A/B Test过程耗时非常多。可见，在目前的A/B Test中，生成所需的测试页面过程十分繁琐。

发明内容

有鉴于此，本发明实施例提供一种页面生成方法及装置，能够简化生成所需的测试页面的过程，减少耗时。

为解决上述技术问题，本发明实施例提供如下技术方案：

第一方面，本发明实施例提供一种页面生成方法，所述方法包括：获得第一页面的页面数据和配置数据，其中，所述配置数据包括所述第一页面中的第一元素的标识信息和第二页面中的第二元素的元素信息；基于所述标识信息，在所述页面数据中查找所述第一元素的元素信息；在根据所述第一页面的页面数据生成所述第一页面的过程中，根据所述第一元素的元素信息和所述第二元素的元素信息，将所述第一元素渲染为所述第二元素，得到所述第二页面。

第二方面，本发明实施例提供一种页面生成装置，所述装置包括：第一获得单元，用于获得第一页面的页面数据和配置数据，其中，所述配置数据包括所述第一页面中的第一元素的标识信息和第二页面中的第二元素的元素信息；查找单元，用于基于所述标识信息，在所述页面数据中查找所述第一元素的元素信息；渲染单元，用于在根据所述第一页面的页面数据生成所述第一页面的过程中，根据所述第一元素的元素信息和所述第二元素的元素信息，将所述第一元素渲染为所述第二元素，得到所述第二页面。

第三方面，本发明实施例提供一种计算机可读存储介质，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行上述方法的步骤。

第四方面，本发明实施例提供一种电子设备，所述电子设备包括：至少一个处理器；以及与所述处理器连接的至少一个存储器、总线；其中，所述处理器、存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行上述方法的步骤。

本发明实施例提供的页面生成方法及装置，在获得第一页面的页面数据以及配置数据后，其中，配置数据包括第一页面中的第一元素的标识信息和第二页面中的第二元素的元素信息，就可以在页面数据中查找第一元素的元素信息，接下来，就可以在根据第一页面的页面数据生成第一页面的过程中，根据第一元素的元素信息和第二元素的元素信息，将第一元素渲染为第二元素，得到第二页面。这样，能够在渲染第一页面的过程中，不渲染出第一元素，直接将第一元素渲染为所需的第二元素，来得到第二页面。从而，实现了简化页面生成过程，减少了耗时，提高了生成页面的效率。进而，将该页面生成方法应用到A/BTest中时，如果想要生成所需的测试页面，则无需多次更改页面的源代码重新生成测试页面，也无需多次重新部署测试页面，只用部署一次第一页面即可，能够大大减少整个A/BTest过程的耗时。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1为本发明实施例中的网站系统架构的示意图；

图2为本发明实施例中的页面生成方法的流程示意图；

图3为本发明实施例中的页面测试方法的流程示意图；

图4为本发明实施例中的页面生成装置的结构示意图；

图5为本发明实施例中的页面测试装置的结构示意图；

图6为本发明实施例中的电子设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。

本发明实施例提供一种网站系统架构，图1为本发明实施例中的网站系统架构的示意图，参见图1所示，该网站系统架构可以包括：服务器11、网络12以及客户端13，其中，服务器11与客户端13之间可以通过网络12进行数据通信。

这里，对于网站来说，由客户端来实现网站的前台部分，向用户展示网站的页面，因此，根据用户使用客户端的目的的不同，客户端可以由具有显示屏并且支持对网站的页面进行浏览的电子设备来实现，客户端也可以是由具有显示屏并且支持开发网站的页面的电子设备来实现。在实际应用中，用于实现客户端的电子设备可以以各种形式来实施。例如，本发明中描述的电子设备可以包括诸如手机、平板电脑、笔记本电脑、电子书阅读器、掌上电脑、个人数字助理(Personal Digital Assistant，PDA)、导航装置、可穿戴设备等移动终端，以及诸如数字TV、台式计算机等固定终端。这里，本发明实施例不做具体限定。

示例性地，根据用户使用客户端的目的的不同，客户端中可以安装有能够浏览网站的页面的客户端应用，例如浏览器、购物类应用、搜索类应用、即时通信应用等Web应用，这样，普通用户就可以通过客户端应用来浏览网站中的各个页面，如搜索结果页面、购物页面等；当然，客户端中也可以安装有能够创建网站的页面、对网站的页面进行设置的客户端应用，例如浏览器、页面文本编辑器等开发工具，这样，诸如开发人员、测试人员、网站的工作人员等专业用户，就可以根据测试需要，基于第一页面的页面数据为第一页面创建配置数据。

这里，对于网站来说，由服务器来实现网站的后台部分，提供用户与网站之间进行交互时所需的数据支持，因此，服务端可以是提供各种服务的服务器，例如可以是诸如提供第一页面的页面数据、提供第一页面的配置数据、能够对客户端发来的用户的访问请求进行响应等对客户端上显示的页面提供支持的后台服务器、网站服务器等。

需要说明的是，图1中的客户端、网络和服务器的数目仅仅是示意性的。根据实现需要可以是任意数目的客户端、网络和服务端。这里，本发明实施例不做具体限定。该网站系统架构可以应用于本发明实施例中的页面生成、测试方法的实施例、本发明实施例中的生成配置数据的方法的实施例、本发明实施例中的页面生成、测试装置的实施例。

进一步地，结合上述网站系统架构，本发明实施例提供一种页面生成方法，该页面生成方法的执行主体为客户端中所安装的浏览器、购物类应用等Web应用。该页面生成方法可以应用于各种需要便捷地生成页面的场合，例如，在A/B Test中给不同的用户，显示包含不同样式的页面元素的测试页面。

下面以客户端中所安装的Web应用为浏览器为例，来对本发明实施例所提供的页面生成方法进行说明。

图2为本发明实施例中的页面生成方法的流程示意图，参见图2所示，该页面生成方法可以包括：

S201：获得第一页面的页面数据和配置数据；

其中，第一页面的页面数据包括待呈现的第一元素的元素信息，配置数据包括第一页面中的第一元素的标识信息和第二页面中的第二元素的元素信息。

具体来说，第一元素可以是在客户端中所安装的Web浏览器、购物类应用等Web应用将第一页面显示给用户时，用户所看到的页面中的页面元素，如商品介绍、用户表单、按钮、商品栏等。通常，第一元素具有一定的显示样式且可以对应一定的数据内容，这里，数据内容可以为文字、图像、多媒体内容、链接等。这里，本发明实施例不做具体限定。

在实际应用中，第一元素可以是指一个元素，如一个搜索框，也可以是指多个元素的组合，如商品栏。对应地，第二元素可以是指一个元素，也可以是指多个元素的组合。

其中，第一元素的标识信息是指在第一页面的页面数据中能够唯一标识该第一元素的数据。在实际应用中，上述第一元素的标识信息可以由各种形式的能够唯一标识该第一元素的数据来实现。例如，第一元素的标识信息可以由第一元素的ID属性所对应的属性值来实现，也可以由根据第一元素的上下文信息所生成的路径表达式来实现，还可以由根据第一元素的上下文信息所生成的选择器表达式来实现，当然，还可以由其它数据来实现，如第一元素的name属性所对应的属性值来实现。这里，本发明实施例不做具体限定。

这里，路径表达式可以由XPath(XML Path Language，XML路径语言)表达式实现。选择器表达式可以由CSS选择器(CSSselector)的表达式实现。

在具体实施过程中，上述配置数据中所包括的第二页面中的第二元素的元素信息可以包括页面元素的类型信息、页面元素的布局设置信息、页面元素的显示样式设置信息和页面元素的数据内容信息中的一种或多种。

举例来说，上述配置数据可以包括第二元素的类型信息，如按钮“<button>”、文本框“input type＝"text"”、音频“<audio>”、表格“<table>”等，也可以包括第二元素的布局设置信息，如第二元素的边框的尺寸、第二元素在页面中所处的位置等，也可以包括第二元素的显示样式设置信息，如背景颜色、背景图片、边框颜色、边框形状、透明度、文本颜色、文本字体、文本对齐方式等，还可以包括第二元素的数据内容信息，如文本、图像、多媒体内容、链接等。当然，上述配置数据还可以包括其它，例如上述多种信息的组合。这里，本发明实施例不做具体限定。

在本发明另一实施例中，上述S201可以采用但不局限以下方法来实现。在具体实施过程中，为了获得第一页面的页面数据上述S201可以包括以下步骤A1～A2：

步骤A1：获得用于请求访问第一页面的访问请求；

其中，访问请求中携带第一页面的URL(Uniform Resource Locator，统一资源定位符)；

具体来说，在用户想要访问第一页面时，用户就可以在浏览器中输入第一页面的URL，这样，浏览器就会接收到来自该访问请求，并获得了第一页面的URL。

步骤A2：响应访问请求，根据URL，从服务器中获取第一页面的页面数据；

其中，第一页面的页面数据可以包括显示第一页面所需的HTML(Hyper TextMarkup Language，超文本标记语言)代码，还可以包括用于声明第一页面中的页面元素的外观样式所需的CSS代码。在实际应用中，CSS代码可以是存在于HTML代码中，也可以以单独的CSS文件存在。

具体来说，在浏览器获得了第一页面的URL后，浏览器就会向DNS(Domain NameSystem，域名系统)服务器询问该URL对应的IP(InternetProtocol，网络之间互连的协议)地址，在获得DNS服务器发送的该URL对应的IP地址后，浏览器就可以根据该IP地址向服务器发送页面访问请求，从而，浏览器就可以接收到服务器所发送的第一页面的页面数据。

进一步地，为了获得配置数据，上述S201还可以包括以下步骤A3：

步骤A3：在浏览器加载第一页面的页面数据的过程中，触发第一页面的页面数据中的监测代码进行初始化，并通该过监测代码，从服务器中获取配置数据。

这里，监测代码为一种用于监测用户行为的代码，可以是直接存在于第一页面的页面数据中的HTML代码中的部分代码段，也可以是在第一页面的页面数据中的HTML代码中所嵌入的第三方JavaScript代码。

具体来说，在浏览器加载第一页面的页面数据的过程中，浏览器就会运行第一页面的页面数据中的HTML代码，这样，嵌入在第一页面的页面数据中的HTML代码中的监控代码就会进行初始化，然后就会自动触发向服务器发送用于获取第一页面的配置数据的请求，从而，浏览器就会接收到服务器所发送的配置数据。

S202：基于第一元素的标识信息，在页面数据中查找第一元素的元素信息；

具体来说，在获得了第一元素的标识信息后，就能够在第一页面中的页面数据中自动查找到该第一元素，以便在根据第一页面的页面数据生成第一页面的过程中，能够不将该第一元素渲染出来，而是直接将第一元素渲染成所需的第二元素，来得到所需的第二页面。

在本发明另一实施例中，为了加快页面的生成过程，可以不将该第一元素渲染出来，而是直接将第一元素渲染为第二元素。那么，在具体实施过程中，上述S202可以包括以下步骤B1～B3：

步骤B1：通过渲染引擎对第一页面的页面数据进行解析，分别生成第一页面对应的DOM(Document Object Model，文档对象模型)树和CSS(Cascading Style Sheets，层叠样式表)规则树；

步骤B2：基于DOM树和CSS规则树，生成第一页面对应的原始Render(渲染)树；

步骤B3：基于第一页面的标识信息，对原始Render树的节点进行遍历，直至确定出与标识信息匹配的原始Render节点，将原始Render节点的节点信息确定为第一元素的元素信息。

这里，原始Render节点就是在渲染第一页面的过程中，第一元素所对应的节点，如果直接根据该原始Render节点的节点信息进行渲染，浏览器就可以在第一页面中给用户显示出第一元素。

具体来说，在浏览器获得了第一页面的页面数据后，就会通过渲染引擎对该第一页面的页面数据解析，其中，浏览器将第一页面的页面数据中的HTML代码解析成树形的数据结构DOM，生成DOM树，并将第一页面的页面数据中的CSS代码解析成树形的数据结构CSSOM(CSS ObjectModel，CSS对象模型)，生成CSS规则树(CSS Rule Tree)。接下来，浏览器就可以结合DOM树和CSS规则树来形成第一页面的原始渲染Render树。这样，浏览器就可以通过对原始Render树的节点进行遍历，查找到与标识信息所匹配的原始Render节点，将原始Render节点的节点信息确定为第一元素的元素信息。从而，浏览器就查找到了第一元素的元素信息。

在本发明另一实施例中，为了能够根据第一元素的标识信息，查找到对应的第一元素的元素信息，上述方法还可以包括：获得用于选择第一元素的触发操作；根据触发操作的操作信息，获取第一元素的上下文信息；基于第一元素的上下文信息，确定第一元素的标识信息，其中，第一元素的标识信息为第一元素的路径表达式、选择器表达式和ID属性所对应的属性值中的一种；建立第一元素的标识信息与第一元素的元素信息之间的关联。

具体来说，在浏览器显示出了第一页面后，用户就可以对第一页面上的第一元素进行触发操作，这样，浏览器就获得了用于选择第一元素的触发操作。由于在载入第一页面的页面数据的过程中，预先设置在第一页面中的监测代码就会进行初始化，这样，在获得用于选择第一元素的触发操作后，浏览器就可以根据触发操作的操作信息，通过该监测代码自动来获取该第一元素的上下文信息。接下来，浏览器就可以基于上下文信息，确定出第一元素的标识信息，从而，就可以建立第一元素的标识信息与第一元素的元素信息之间的关联。以便根据第一元素的标识信息，查找到对应的第一元素的元素信息。

在具体实施过程中，上述第一元素的上下文信息可以包括第一页面的URL、第一页面的标题、第一页面的DOM树等，当然，还可以包括其它能够生成第一元素的标识信息的数据，例如，还可以包括第一元素所对应的各个属性及其所对应的属性值，或者第一元素的位置和尺寸，或者第一元素所对应的父元素、兄弟元素等。这里，本发明实施例不做具体限定。

S203：在根据第一页面的页面数据生成第一页面的过程中，根据第一元素的元素信息和第二元素的元素信息，将第一元素渲染为第二元素，得到第二页面。

其中，第一页面是指包含第一元素的页面，而第二页面是指包含第二元素的页面。

这里，第二元素与第一元素是不相同的。

在实际应用中，第二元素与第一元素是不相同的情况可以存在但不限包括以下情况：情况(1)、第二元素的类型与第一元素的类型不相同，如一个是按钮，另一个是文本框；情况(2)、第二元素的布局与第一元素的布局不相同，如一个是放在第一页面的左侧的商品栏，另一个是放在第一页面的右侧的商品栏；情况(3)、第二元素的显示样式与第一元素的显示样式不相同，如一个为粉色圆形按钮，另一个为蓝色矩形按钮；情况(4)、第二元素的数据内容与第一元素的数据内容不相同，如一个是包含“苹果”的按钮，另一个是包含“大家都在吃的美味水果”的按钮。当然，还可以为其它情况，如上述多种情况的组合，这里，本发明实施例不做具体限定。

在实际应用中，在进行A/B Test时，如果测试页面的两个设计方案基本是相同的，仅仅只是个别页面元素有所不同，那么，第二页面中除第二元素外的其它元素与第一页面中除第一元素外的其它元素可以相同。

下面以具体实例对如何根据第一元素的元素信息和第二元素的元素信息，将第一元素渲染为与第一元素不相同的第二元素的过程进行说明。

在具体实施过程中，根据是否需要更改第一元素的类型，例如，如果要将一个按钮改为一个文本框，则更改第一元素的类型，如果要更改按钮的颜色，则不更改第一元素的类型，上述S203可以采用但不局限于以下方法来实现。

第一种实现方式，当第二元素与第一元素的类型相同且属性信息不同时，例如，当配置数据不包含第二元素的类型信息时，表明无需更改第一元素的类型，只是需要更改第一元素的布局、显示样式和数据内容中一种或多种，此时，为了提高第二页面的生成效率，减少耗时，可以直接对用于渲染第一元素的原始Render节点中的节点信息进行修改。

在具体实施过程中，上述S203可以包括以下步骤C1～C2：

步骤C1：当第二元素与第一元素的类型相同且属性信息不同时，在原始Render树中，将原始Render节点的节点信息修改为第二元素的元素信息，获得第一目标Render树；

步骤C2：对第一目标Render树中的每个Render节点进行渲染，得到第二页面。

这里，原始Render树能够渲染出包含第一元素的第一页面，第一目标Render树能够渲染出不包含第一元素，而包含第二元素的第二页面。

具体来说，在不修改第一元素的类型时，浏览器中的渲染引擎就可以在原始Render树中，直接将原始Render节点中的节点信息替换为第二元素的元素信息，即将第一元素的元素信息替换为第二元素的元素信息，得到第一目标Render树；接下来，通过第一目标Render树来渲染第一页面时，由于已经将第一元素对应的节点信息进行了修改，这样，所得到的第二页面中所显示的就是更改样式的页面元素，即第二元素。从而，在对第一页面中的页面元素时，无需更改第一页面的原始HTML代码。

第二种实现方式，当第二元素与第一元素的类型不相同时，例如，当配置数据包含第二元素的类型信息，且第二元素的类型信息与第一元素的类型信息不相同时，表明需要更改第一元素的类型，此时，就需要在第一次渲染时将原始Render树中用于渲染第一元素的原始Render节点及其对应的节点信息删除，以便不给用户显示出第一元素，而在显示出不包含第一元素的第一页面后，在第二次渲染时直接将第二元素插入到第一页面中，来给用户显示出第二页面。

在具体实施过程中，上述S203可以包括步骤D1～D4：

步骤D1：当第二元素与第一元素的类型不相同时，根据第二元素的元素信息，在内存中创建第二元素；

步骤D2：在原始Render树中删除原始Render节点及其对应的节点信息，获得第二目标Render树；

这里，原始Render树能够渲染出包含第一元素的第一页面，第二目标Render树能够渲染出不包含第一元素的第一页面。

步骤D3：对第二目标Render树中的每个Render节点进行渲染，得到修改后的第一页面，其中，修改后的第一页面中未显示第一元素；

其中，修改后的第一页面中未显示第一元素。

步骤D4：将第二元素插入到修改后的第一页面中用于显示第一元素的位置处，得到第二页面。

在实际应用，由于监控代码可以通过调用浏览器提供的DOM API来对第一页面的DOM进行删除、新增等操作，也可以对第一页面对应的CSS属性进行操作，那么，在需要更改第一元素的类型时，就可以通过监控代码在内存中创建第二元素，以重新触发渲染引擎布局和渲染的执行过程，将第二元素插入到修改后的第一页面中用于显示第一元素的位置处，得到第二页面。

当然，除了上述所列出的两种实现方式外，还可以通过其它方式来实现，例如，无论是否更改第一元素的类型，在生成原始Render树之前，直接对DOM树和CCS规则树进行修改，如删除、新增、替换等，或者，当第一元素和第二元素的数量均为多个时，也可以同时使用上述两种实现方式，这里，本发明实施例不做具体限定。

至此，便完成了基于配置数据快速地生成页面的过程。

由上述内容可知，本发明实施例所提供的页面生成方法，在获得第一页面的页面数据以及配置数据后，其中，配置数据包括第一页面中的第一元素的标识信息和第二页面中的第二元素的元素信息，就可以在页面数据中查找到第一元素的元素信息，接下来，就可以在根据第一页面的页面数据生成第一页面的过程中，根据第一元素的元素信息和第二元素的元素信息，将第一元素渲染为第二元素，得到第二页面。这样，能够在渲染第一页面的过程中，不渲染出第一元素，直接将第一元素渲染为所需的第二元素，从而，实现了简化页面生成过程，减少了耗时，提高了生成页面的效率。进而，将该页面生成方法应用到A/BTest中时，如果想要生成所需的测试页面，则无需多次更改页面的源代码重新生成测试页面，也无需多次重新部署测试页面，只用部署一次第一页面即可，能够大大减少整个A/BTest过程的耗时。

基于前述实施例，在本发明另一实施例中，在生成第二页面后，上述方法还包括：对第一页面和第二页面进行测试，以便根据测试结果确定优选页面。

具体来说，通过对第一页面和第二页面分别进行测试，对比哪个页面具有更好的效果，从而可以根据测试结果，选择更优选的页面。例如，在第一页面中将点击按钮设置在左侧，第二页面中将该点击按钮设置在右侧，根据第一页面和第二页面基于点击按钮设置位置的不同，所带来的点击量数据不同，比较哪个页面点击量更大，说明该页面更受用户欢迎，能够带来更大的流量，从而将该页面设置为最终投放使用的页面。

基于前述实施例，在本发明其它实施例中，在根据第一页面的页面数据生成第一页面的过程中，为了能够便捷地根据配置数据，将第一元素渲染为第二元素，得到第二页面，还可以预先在服务器中存储第一页面的配置数据。那么，在具体实施过程中，在上述S201之前，上述方法还可以包括以下步骤E1～E5：

步骤E1：获得用于选择第一元素的触发操作；

具体来说，当开发人员、测试人员、网站的工作人员等用户需要测试第一页面和第二页面的优劣时，就需要给预先配置出用于生成第二页面所需的配置数据，此时，用户可以在浏览器中输入第一页面的URL。接下来，浏览器就可以根据该URL从服务器获取到第一页面的页面数据，然后加载该页面数据，向用户显示出该第一页面。再接下来，在浏览器显示出了第一页面后，用户就可以对第一页面上的第一元素进行触发操作，这样，浏览器就获得了用于选择第一元素的触发操作。

这里，上述触发操作可以是点击操作，如单击操作、双击操作等，也可以是按压操作，如长按第一元素等。当然，还可以是其它操作，如滑动操作等，或者还可以是上述各种实施方式的结合，本发明实施例不做具体限定。进一步地，上述触发操作可以由第二用户根据需要自定义设置，也可以由安装有浏览器的客户端的系统预设，本发明实施例不做具体限定。

步骤E2：根据触发操作的操作信息，获取第一元素的上下文信息；

具体来说，由于在载入第一页面的页面数据的过程中，预先设置在第一页面中的监测代码就会进行初始化，这样，在获得用于选择第一元素的触发操作后，浏览器就可以根据触发操作的操作信息，通过该监测代码自动来获取该第一元素的上下文信息。

在实际应用中，根据触发操作的不同，触发操作中携带的操作信息也是不同的。示例性地，假设触发操作为按压操作，那么，对应的操作信息可以是按压位置信息；假设触发操作为滑动操作，那么，对应的操作信息可以是滑动轨迹。

在具体实施过程中，上述第一元素的上下文信息可以包括第一页面的URL、第一页面的标题、第一页面的DOM树等，当然，还可以包括其它能够生成第一元素的标识信息的数据，例如，还可以包括第一元素所对应的各个属性及其所对应的属性值，或者第一元素的位置和尺寸，或者第一元素所对应的父元素、兄弟元素等。这里，本发明实施例不做具体限定。

步骤E3：基于第一元素的上下文信息，确定第一元素的标识信息；

其中，第一元素的标识信息可以为第一元素的ID属性所对应的属性值、第一元素的路径表达式和第一元素的选择器表达式中的一种。

这里，第一元素的标识信息是指在第一页面的页面数据中能够唯一标识该第一元素的数据。在实际应用中，上述第一元素的标识信息可以由各种形式的能够唯一标识该第一元素的数据来实现。

示例性地，第一元素的标识信息可以由第一元素的ID属性所对应的属性值来实现，也可以由根据第一元素的上下文信息所生成的路径表达式来实现，还可以由根据第一元素的上下文信息所生成的选择器表达式来实现，当然，还可以由其它数据来实现，例如第一元素的name属性所对应的属性值、第一元素的classname属性所对应的属性值、第一元素的多个属性的属性值的结合等。可由本领域技术人员根据实际情况来设置，这里，本发明实施例不做具体限定。

在实际应用中，路径表达式是指XPath表达式，选择器表达式是指CSS选择器的表达式。

步骤E4：获得第二元素的元素信息；

步骤E5：根据第一元素的标识信息和第二元素的元素信息，生成配置数据。

在实际应用中，配置数据可以是以配置文件的形式存储在服务器中，也可以是以数据条目的形式存储在服务器中。

至此，便完成了用于页面生成方法中的配置数据的生成过程。

基于同一发明构思，本发明实施例还提供一种页面测试方法，该方法应用于以下场景：在将上述实施例中的页面生成方法应用到A/B Test中时，可以通过各种条件(如地理位置、性别、年龄等)筛选出不同用户群，然后给不同用户群显示不同样式的页面。

图3为本发明实施例中的页面测试方法的流程示意图，参见图3所示，该页面测试方法可以包括：

S301：获得用户的特征信息；

其中，特征信息为地理位置信息、年龄信息、性别信息和职业信息中的一种或多种。

具体来说，在用户想要访问第一页面时，用户就可以在浏览器中输入第一页面的URL，这样，浏览器就会接收到来自该访问请求，该访问请求中会携带用户的特征信息，这样，浏览器就获得了用户的特征信息。接下来，浏览器就可以根据用户的特征信息是属于用于指示测试第一页面的第一类信息，还是属于用于指示测试第二页面的第二类信息，来确定为用户数生成第一页面还是生成第二页面。

具体来说，如果特征信息属于用于指示测试第一页面的第一类信息，执行步骤S302～S303，向用户显示第一页面，以使用户访问第一页面，实现测试第一页面。如果特征信息属于用于指示测试第二页面的第二类信息，执行步骤304～306，使用如上述实施例中页面生成方法生成第二页面，以使用户访问第二页面，实现测试第二页面。

S302：获取第一页面的页面数据；

S303：根据第一页面的页面数据，生成第一页面，以使用户访问第一页面；

S304：获得第一页面的页面数据和配置数据；

其中，配置数据包括第一页面中的第一元素的标识信息和第二页面中的第二元素的元素信息。

S305：基于第一元素的标识信息，在页面数据中查找第一元素的元素信息；

S306：在根据第一页面的页面数据生成第一页面的过程中，根据第一元素的元素信息和第二元素的元素信息，将第一元素渲染为第二元素，生成第二页面，以使用户访问第二页面。

由上述内容可知，本发明实施例所提供的页面测试方法，在获得用户的特征信息后，能够根据用户的特征信息所属的类别，实时为用户生成对应的第一页面或第二页面，以供用户访问。这样，在进行页面测试时，由于能够通过在渲染第一页面的过程中，不渲染出第一元素，直接将第一元素渲染为所需的第二元素，来得到第二页面，从而，实现了简化页面生成过程，减少了耗时，提高了生成页面的效率。进而，无需预先多次更改页面的源代码重新生成测试页面，也无需多次重新部署测试页面，只用部署一次第一页面即可，能够大大减少整个测试过程的耗时。

基于同一发明构思，作为对上述页面生成方法的实现，本发明实施例提供了一种页面生成装置，该页面生成装置实施例与前述页面生成方法实施例对应，为便于阅读，本装置实施例不再对前述页面生成方法实施例中的细节内容进行逐一赘述，但应当明确，本发明实施例中的装置能够对应实现前述页面生成方法实施例中的全部内容。

图4为本发明实施例中的页面生成装置的结构示意图，参见图4所示，该装置40可以包括：第一获得单元401，用于获得第一页面的页面数据和配置数据，其中，配置数据包括第一页面中的第一元素的标识信息和第二页面中的第二元素的元素信息；查找单元402，用于基于标识信息，在页面数据中查找第一元素的元素信息；渲染单元403，用于在根据第一页面的页面数据生成第一页面的过程中，根据第一元素的元素信息和第二元素的元素信息，将第一元素渲染为第二元素，得到第二页面。

在本发明实施例中，查找单元，具体用于通过渲染引擎对第一页面的页面数据进行解析，分别生成第一页面对应的文档对象模型DOM树和层叠样式表CSS规则树；基于DOM树和CSS规则树，生成第一页面对应的原始渲染Render树；基于标识信息，对原始Render树的节点进行遍历，直至确定出与标识信息匹配的原始Render节点，将原始Render节点的节点信息确定为第一元素的元素信息。

在本发明实施例中，渲染单元，具体用于当第二元素与第一元素的类型相同且属性信息不同时，在原始Render树中，将原始Render节点的节点信息修改为第二元素的元素信息，获得第一目标Render树；对第一目标Render树中的每个Render节点进行渲染，得到第二页面。

在本发明实施例中，渲染单元，具体用于当第二元素与第一元素的类型不相同时，根据第二元素的元素信息，在内存中创建第二元素；在原始Render树中删除原始Render节点及其对应的节点信息，获得第二目标Render树；对第二目标Render树中的每个Render节点进行渲染，得到修改后的第一页面，其中，修改后的第一页面中未显示第一元素；将第二元素插入到修改后的第一页面中用于显示第一元素的位置处，得到第二页面。

在本发明其它实施例中，上述装置还可以包括：第三获得单元，用于获得用于选择第一元素的触发操作；获取单元，用于根据触发操作的操作信息，获取第一元素的上下文信息；确定单元，用于基于上下文信息，确定标识信息，其中，标识信息为第一元素的路径表达式、选择器表达式和ID属性所对应的属性值中的一种；建立单元，用于建立标识信息与第一元素的元素信息之间的关联；

和/或，第四获得单元，用于获得第二元素的元素信息；生成单元，用于根据标识信息和第二元素的元素信息，生成配置数据。

在本发明另一实施例中，上述装置还可以包括：测试单元，用于对第一页面和第二页面进行测试，以便根据测试结果确定优选页面。

具体来说，可以通过对第一页面和第二页面分别进行测试，对比哪个页面具有更好的效果，从而可以根据测试结果，选择更优选的页面。例如，在第一页面中将点击按钮设置在左侧，第二页面中将该点击按钮设置在右侧，根据第一页面和第二页面基于点击按钮设置位置的不同，所带来的点击量数据不同，比较哪个页面点击量更大，说明该页面更受用户欢迎，能够带来更大的流量，从而将该页面设置为最终投放使用的页面。

基于同一发明构思，作为对上述页面测试方法的实现，本发明实施例提供了一种页面测试装置，该页面测试装置实施例与前述页面测试方法实施例对应，为便于阅读，本装置实施例不再对前述页面测试方法实施例中的细节内容进行逐一赘述，但应当明确，本发明实施例中的装置能够对应实现前述页面测试方法实施例中的全部内容。

图5为本发明实施例中的页面测试装置的结构示意图，参见图5所示，该装置50可以包括：第二获得单元501，用于获得用户的特征信息，其中，特征信息为地理位置信息、年龄信息、性别信息和职业信息中的一种或多种；第一访问测试单元502，如果特征信息属于用于指示测试第一页面的第一类信息，获取第一页面的页面数据；根据第一页面的页面数据，生成第一页面，以使用户访问第一页面；第二访问测试单元503，用于如果特征信息属于用于指示测试第二页面的第二类信息，使用上述一个或多个实施例中的页面生成方法，生成第二页面，以使用户访问第二页面。

在实际应用中，该页面生成装置和/或页面测试装置可应用于电子设备中。电子设备可以以各种形式来实施。例如，本发明实施例中描述的电子设备可以包括诸如智能音箱、智能电视、智能机顶盒等智能家居设备、诸如智能手机、平板电脑等随身设备等。当然，还可以为其它类型的音频设备，这里，本发明实施例中不做具体限定。

基于同一发明构思，本发明实施例提供一种电子设备。图6为本发明实施例中的电子设备的结构示意图，参见图6所示，该电子设备60包括：至少一个处理器61；以及与处理器61连接的至少一个存储器62、总线63；其中，处理器61、存储器62通过总线63完成相互间的通信；处理器61用于调用存储器62中的程序指令，以执行上述一个或多个实施例中的页面生成、测试方法的步骤。

本发明实施例还提供了一种处理器，处理器用于运行程序，其中，程序运行时执行上述一个或多个实施例中的页面生成、测试方法。

上述处理器可由中央处理器(Central Processing Unit，CPU)、微处理器(MicroProcessor Unit，MPU)、数字信号处理器(Digital Signal Processor，DSP)、或现场可编程门阵列(Field Programmable Gate Array，FPGA)等实现。存储器可能包括计算机可读介质中的非永久性存储器，随机存储器(Random Access Memory，RAM)和/或非易失性内存等形式，如只读存储器(Read Only Memory，ROM)或闪存(Flash RAM)，存储器包括至少一个存储芯片。

基于同一发明构思，本发明实施例提供一种计算机可读存储介质，上述计算机可读存储介质包括存储的程序，其中，在程序运行时控制存储介质所在设备执行上述一个或多个实施例中的页面生成、测试方法的步骤。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、只读光盘(Compact Disc Read-Only Memory，CD-ROM)、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，RAM和/或非易失性内存等形式，如ROM或Flash RAM。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机可读存储介质可以是ROM、可编程只读存储器(Programmable Read-Only Memory，PROM)、可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，EPROM)、电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，EEPROM)、磁性随机存取存储器(Ferromagnetic Random Access Memory，FRAM)、快闪存储器(Flash Memory)、磁表面存储器、光盘、或只读光盘(Compact Disc Read-Only Memory，CD-ROM)等存储器；也可以是快闪记忆体或其他内存技术、CD-ROM、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息；还可以是包括上述存储器之一或任意组合的各种电子设备，如移动电话、计算机、平板设备、个人数字助理等。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本发明的实施例可提供为方法、系统或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本发明的实施例而已，并不用于限制本发明。对于本领域技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的权利要求范围之内。

Claims (10)

1.一种页面生成方法，其特征在于，所述方法包括：

获得第一页面的页面数据和配置数据，其中，所述配置数据包括所述第一页面中的第一元素的标识信息和第二页面中的第二元素的元素信息；

基于所述标识信息，在所述页面数据中查找所述第一元素的元素信息；

在根据所述第一页面的页面数据生成所述第一页面的过程中，根据所述第一元素的元素信息和所述第二元素的元素信息，将所述第一元素渲染为所述第二元素，得到所述第二页面。

2.根据权利要求1所述的方法，其特征在于，所述基于所述标识信息，在所述页面数据中查找所述第一元素的元素信息，包括：

通过渲染引擎对所述第一页面的页面数据进行解析，分别生成所述第一页面对应的文档对象模型DOM树和层叠样式表CSS规则树；

基于所述DOM树和所述CSS规则树，生成所述第一页面对应的原始渲染Render树；

基于所述标识信息，对所述原始Render树的节点进行遍历，直至确定出与所述标识信息匹配的原始Render节点，将原始Render节点的节点信息确定为所述第一元素的元素信息。

3.根据权利要求2所述的方法，其特征在于，所述根据所述第一元素的元素信息和所述第二元素的元素信息，将所述第一元素渲染为所述第二元素，得到所述第二页面，包括：

当所述第二元素与所述第一元素的类型相同且属性信息不同时，在所述原始Render树中，将所述原始Render节点的节点信息修改为所述第二元素的元素信息，获得第一目标Render树；

对所述第一目标Render树中的每个Render节点进行渲染，得到所述第二页面。

4.根据权利要求2所述的方法，其特征在于，所述根据所述第一元素的元素信息和所述第二元素的元素信息，将所述第一元素渲染为所述第二元素，得到所述第二页面，包括：

当所述第二元素与所述第一元素的类型不相同时，根据所述第二元素的元素信息，在内存中创建所述第二元素；

在所述原始Render树中删除所述原始Render节点及其对应的节点信息，获得第二目标Render树；

对所述第二目标Render树中的每个Render节点进行渲染，得到修改后的第一页面，其中，所述修改后的第一页面中未显示所述第一元素；

将所述第二元素插入到所述修改后的第一页面中用于显示所述第一元素的位置处，得到所述第二页面。

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

获得用于选择所述第一元素的触发操作；

根据所述触发操作的操作信息，获取所述第一元素的上下文信息；

基于所述上下文信息，确定所述标识信息，其中，所述标识信息为所述第一元素的路径表达式、选择器表达式和ID属性所对应的属性值中的一种；

建立所述标识信息与所述第一元素的元素信息之间的关联；

和/或，

获得所述第二元素的元素信息；

根据所述标识信息和所述第二元素的元素信息，生成所述配置数据。

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

对所述第一页面和所述第二页面进行测试，以便根据测试结果确定优选页面。

7.一种页面生成装置，其特征在于，所述装置包括：

第一获得单元，用于获得第一页面的页面数据和配置数据，其中，所述配置数据包括所述第一页面中的第一元素的标识信息和第二页面中的第二元素的元素信息；

查找单元，用于基于所述标识信息，在所述页面数据中查找所述第一元素的元素信息；

渲染单元，用于在根据所述第一页面的页面数据生成所述第一页面的过程中，根据所述第一元素的元素信息和所述第二元素的元素信息，将所述第一元素渲染为所述第二元素，得到所述第二页面。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：测试单元，用于对所述第一页面和所述第二页面进行测试，以便根据测试结果确定优选页面。

9.一种计算机可读存储介质，其特征在于，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行如权利要求1至6任一项所述的方法的步骤。

10.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；

以及与所述处理器连接的至少一个存储器、总线；

其中，所述处理器、存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行如权利要求1至6任一项所述的方法的步骤。

Images