CN117707505A - 网页生成方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开提供一种网页生成方法、装置、电子设备和存储介质，该方法包括：从第一网页中提取可视元素；获取可视元素的原始属性信息，原始属性信息包括原始位置信息，原始位置信息用于描述可视元素在第一网页中排布的位置；基于原始位置信息生成第二网页，其中，第二网页中包括至少一部分可视元素，至少一部分可视元素在第二网页中按照原始位置信息进行排布；其中，至少一部分可视元素在第二网页中的排布的位置与在第一网页中排布的位置相同。通过该方法，在生成的第二网页中的相同排布位置上具有与第一网页相同的可视元素，能够最大化复原第一网页，相应地避免产生在一方网络平台中引入第三方网页时带来的诸多问题。

Description

网页生成方法、装置、电子设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种网页生成方法、装置、电子设备及存储介质。

背景技术

随着互联网技术的发展，分化出基于网络页面的各类服务，例如提供页面设计的服务，提供页面维护运营的服务，提供以广告为目标的网页服务，以及以销售为目标的网络页面和平台服务等，为了呈现出更好的页面效果以达到页面所有者的经营目标，往往需要在一方网络页面服务提供中引入来自第三方的网络页面，例如在电商平台的商户页面中引入第三方的广告落地页。但这种第三方页面的引入，往往带来诸多问题：例如，来自第三方的加载页面时间过长，制作成本高，迭代速度慢，页面操作复杂度高，以及存在合规和数据泄露等风险。

发明内容

为了解决上述问题，本公开提出了一种网页生成的方法、装置、电子设备及存储介质。

根据本公开的一方面，提供了一种网页生成的方法，包括：

从第一网页中提取可视元素；

获取所述可视元素的原始属性信息，所述原始属性信息包括原始位置信息，所述原始位置信息用于描述所述可视元素在所述第一网页中排布的位置；

基于所述原始位置信息生成第二网页，其中，所述第二网页中包括至少一部分所述可视元素，所述至少一部分所述可视元素在所述第二网页中按照所述原始位置信息进行排布；

其中，所述至少一部分所述可视元素在第二网页中的排布的位置与在第一网页中排布的位置相同。

根据本公开的另一方面，提供了一种网页生成的装置，包括：

提取模块，用于从第一网页中提取可视元素；

获取模块，用于获取所述可视元素的原始属性信息，所述原始属性信息包括原始位置信息，所述原始位置信息用于描述所述可视元素在所述第一网页中排布的位置；

网页生成模块，用于基于所述原始位置信息生成第二网页，其中，所述第二网页中包括至少一部分所述可视元素，所述至少一部分所述可视元素在所述第二网页中按照所述原始位置信息进行排布；

其中，所述至少一部分所述可视元素在第二网页中的排布的位置与在第一网页中排布的位置相同。

根据本公开的另一方面，提供了一种电子设备，包括：存储器，和耦接至所述存储器的处理器；所述存储器中存储有指令，所述指令在由所述处理器执行时实现本公开所述的方法。

根据本公开的另一方面，提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时用于实现本公开所述的方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被处理器执行时实现本公开所述的方法。

利用本公开提供的页面生成的方法、装置、电子设备和存储介质，能够对第三方的网页中可视元素进行提取，获取可视元素的原始属性信息，并根据原始属性信息中的原始位置信息对可视元素进行排布生成新的一方网页。因为在生成的一方网页中的相同排布位置上具有与第三方网页相同的可视元素，能够最大化复原第三方网页，相应地避免产生在一方网络平台中引入第三方网页时带来的诸多问题。

附图说明

在下面结合附图对于示例性实施例的描述中，本公开的更多细节、特征和优点被公开，在附图中：

图1示出了根据本公开示例性实施例的第三方网页的示意图；

图2示出了根据本公开示例性实施例的网页生成方法的流程图；

图3示出了根据本公开示例性实施例的提取可视元素方法的流程图；

图4示出了根据本公开示例性实施例的生成第二网页方法的流程图；

图5示出了根据本公开示例性实施例的网页生成装置的示意性框图；

图6示出了用于实现本公开示例性实施例的电子设备的示意性框图；

图7示出了用于实现本公开示例性实施例的计算机系统的示意性框图。

应当明白，为了便于描述，附图中所示的各个部分的尺寸并不一定是按照实际的比例关系绘制的。在各附图中使用了相同或相似的附图标记来表示相同或相似的部件。因此，一旦某一项在一个附图中被定义，则在随后的附图中可能不再对其进行进一步讨论。

具体实施方式

下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。

应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。

本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。

需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。

本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。

首先对本公开实施例中涉及到的相关名词作如下释义：

用户终端(userterminal)，是用户用来与计算机系统交互的输入输出的设备，主要包括各种类型的计算机终端设备。例如，台式计算机、笔记本，个人数字助理(PDA)、平板电脑(PAD)、手机、以及各种智能终端。

服务器(server)，一般泛指在网络中接入的其他用户终端提供某些服务的计算机系统，通常具有比普通用户终端具有更高的稳定性、安全性、存储容量和计算性能。

用户交互界面(userinterface)，是人和计算机进行信息交换的通道，用户通过用户交互界面向计算机输入信息进行操作，计算机通过用户交互界面向用户提供信息以供用户知晓信息以及根据信息进行分析和决策。例如，即时通信软件中的一个会话窗口，网站页面，游戏页面等。

落地页(landingpage)，也称为着陆页，或引导页，是访客访问网站或软件时第一个见到的页面，可以用于实现广告或营销转换。

一方落地页，由单一运营方提供的落地页。

三方落地页，由运营方和用户之外的第三方提供的落地页。

文档对象化模型(DocumentObjectModel，DOM)，是一种与平台和语言无边的应用程序接口，可以用于动态地连接访问程序和脚本，更新内容、结构和www文档的风格。

DOM树(Tree)，在DOM的诸多文档结构中，较为常用的的实现方式是树结构。在DOM中基本要素是节点(node)，而文档结构是由层次化的节点组成，采用树型结构更容易表达层次性的节点结构。

DOMTree剪枝(pruning)，结合DOMTree的定义，从字面上理解，剪枝即去除部分节点。在本公开中，用剪枝表示提取可视化元素的过程，在该过程中，非可视化元素被舍弃。

扁平化，把具有层级结构的数据转换为扁平结构的数据，例如所有的数据都位于根节点下。

SSR(Serversiderender)，将组件或页面通过服务器生成HTML字符串，再发送到浏览器。通过SSR方式，发送一个请求，服务器返回的时一个整个页面的HTML结构。

CSR(Clientsiderender)，通过接口请求数据，前端通过JavaScript动态处理和生成页面需要的结构和页面。

懒加载，又叫做延迟加载，通过加载网络资源或符合某些条件时才加载资源。

Src，在HTML中，src时source的缩写，表示源文件，通常来表示指向文件的地址，例如<imgsrc＝“ming.bmp”>表示图片来源文件的文件名为ming.bmp。

随着互联网技术的发展，互联网的服务更加多样化和复杂化，提供互联网服务的主体逐渐分化和细化。单一互联网平台上往往会引入第三方互联网服务提供商的服务，以电商平台为例，卖家店面、产品或服务中往往会引入第三方提供的落地页以实现某些商业目标，例如增加流量、营销转化、消费信息收集等。然而这种第三方网页的引入会带来很多问题，例如加载时间长、制作成本高、迭代速度慢、页面操作复杂度高、以及存在合规和数据泄露等风险。

如图1所示，示例性的展示了第三方网页的示意图，所述第三方网页例如可以是落地页，可以实现广告、营销转化、吸引流量等目的。在图1所示产品广告落地页中，包括产品logo、产品名称、产品简介、产品局部名称、以及包括支付方式、运输方式、到货和评论在内的与产品销售有关的网页元素，这些网页元素以文本类可视元素的形式排布在该网页中；在该网页中还包括产品视频、产品图片和多个产品局部图片，分别以视频类可视元素和图片类可视元素的形式排布在该网页中；该网页中还包括一些跳转按钮和隐藏的可操作控件，例如点击支付方式上方的小图标可以跳转到支付页面，点击产品可选参数可以在弹出的控件窗口中选择产品的不同配置参数。

为了在一方互联网平台中给用户提供更好的服务的同时，避免出现因引入第三方网页而带来的诸多问题，本公开提出一种网页生成方法、装置、电子设备和存储介质，通过在一方网络平台上生成复原上述第三方网页的一方网页，来解决前述问题。

本公开提供了一种网页生成方法、装置、电子设备和存储介质。

如图2所示，公开了一种网页生成方法，包括以下步骤：

S1，从第一网页中提取可视元素。

为了呈现更丰富的信息和更吸引用户的视觉效果，网页中往往包含着丰富的元素，包括文字、图片、视频、各种控件、网络链接、可操作按钮以及一些隐藏功能插件等。网页中包含的元素中，有些为可视元素，例如文字、图片、视频类元素，有些为不可视元素，例如网络链接、隐藏功能插件等。

由一方网页来复原第三方网页的时，可以仅提取网页中较为重要的视觉元素而舍弃其他网页元素，同时，受限于一方网页的实现能力，可能难以实现部分第三方网页中的复杂组件的运行，例如内容层叠排放、动画效果等。在步骤S1中提取第一网页中的可视元素，一方面，适配于一方网页的实现能力而精简一方网页展示的元素，另一方面也缩短了一方网页的生成时间和加载时间，节约占用的系统内存。

按照元素类型的不同，可视元素可以分为文字类可视元素、图片类可视元素和视频类可视元素等。

以图1为例，从该网页中提取包括产品视频、产品及各局部图片、产品logo、按钮图标以及产品名称、产品简介、产品及产品名称、产品可选参数以及例如“支付方式”、“运输方式”、“到货”、“评论”和“其他文本信息”等可视元素。

S2，获取所述可视元素的原始属性信息，所述原始属性信息包括原始位置信息，所述原始位置信息用于描述所述可视元素在所述第一页面中排布的位置。

提取的可视元素在第一网页中具有相应的原始属性信息，在步骤S1中提取可视元素时，有些时候能够直接获取到相应原始属性信息，有些时候，需要进一步处理以获得可视元素的原始属性信息。

可视元素的原始属性信息包括但不限于以下信息：原始位置信息、尺寸信息、来源信息、字体信息、格式信息、标签信息等。

其中获取可视元素的原始位置信息较为关键，通过在新生成的网页中相同位置处呈现相同的可视元素，能够以较为直观的方式复原第一网页。

S3，基于所述原始位置信息生成第二页面，其中，所述第二页面中包括至少一部分所述可视元素，所述至少一部分所述可视元素在所述第二页面中按照所述原始位置信息进行排布。

其中，所述至少一部分所述可视元素在第二网页中排布的位置与在第一网页中排布的位置相同。

基于所获取的原始位置信息，在相同排布位置处呈现与第一网页中相同的可视元素，可以实现第二网页对第一网页的复原。但有时，第一网页中的可视元素较为丰富，以图片类可视元素为例，例如易被忽略的较小尺寸的logo图，这部分可视元素的呈现可能并不会引起浏览用户的关注，因此对于这部分视觉元素可以通过进一步筛选而舍弃。例如，图1中的产品logo因为尺寸较小而易被忽略。

在所述第二页面中可以包括全部所述可视元素，也可以包括可视元素中一部分而舍弃掉另一部分，例如舍弃掉已被浏览用户所忽略掉的可视元素。

通过以上方法，提取第一网页中的可视元素，获取可视元素的原始属性信息，并根据原始属性信息中的原始位置信息对可视元素进行排布生成第二网页。可视元素在生成的第二网页中的排布位置与其在第一网页中排布位置相同，从而实现了第一网页最大化复原，相应地避免产生在一方网络平台中引入第三方网页时带来的诸多问题。

在一些实施例中，步骤S1可以进一步包括：

S11，在浏览器中加载所述第一网页。

具体地，在一些实施例中，可以通过无头浏览器加载第一网页。

S12，解析加载的所述第一网页。

在一些实施例中，所述第一网页可以是SSR或CSR类型的网页，当网页包含的元素较多较为复杂时，加载时间可能会比较长，如果等待加载全部完成可能需要较长的时间；考虑到网页中可能会包含加载时间较长但不一定会用到的元素，可以在所述第一网页的加载基本完成时，开始解析所述第一页面。

S13，对经解析的所述第一网页进行扁平化处理。

通常情况下，网页会采取树形文档结构，即解析加载的所述第一网页，可以获得所述第一网页的DOMTree，对所述经解析的所述第一网页的处理，即对所述DOMTree进行处理。

树形文档结构中，网页中的元素可以是具体的某个节点，当节点的层级较多时，不利于提取网页中的元素及其属性信息；通过扁平化处理，可以将树形结构转换为扁平结构，更易于提取网页中的元素及其属性信息，缩小提取时间和占用的处理资源。

S14，对经扁平化处理的所述第一网页提取所述可视元素，所述可视元素包括图片类可视元素、文本类可视元素和视频类可视元素。

经过扁平化处理的所述第一网页，更适于进行网页信息的提取操作。在所述第一网页中提取可视元素，所述可视元素至少包括图片、文字和视频。

在一些实施例中，对图片类可视元素和视频类可视元素的提取可以通过网页元素的标签来实现，例如对图片类可视元素的提取可以通过匹配标签为img或pic，对视频类可视元素的提取可以通过匹配标签为video。

在一些实施例中，对文本类可视元素的提取，可以通过遍历所述第一页面中的所有元素，提取其中的文本信息。以图1为例，遍历第一页面中的所有元素提取其中的文本信息，可能意味着将一些在图1当前页面中未呈现出来的文本信息页提取出来，例如隐藏的具体评论信息、产品可选参数的具体选项文本信息等。

在一些实施例中，步骤S2中，所述原始位置信息可以包括以下至少一种：宽高信息和网页边距信息；所述网页边距信息例如可以是与网页顶端的边距(top值)，与网页左边缘的边距(left值)等。

在一些实施例中，步骤S2中，所述原始属性信息还包括以下至少一种：

对于图片类可视元素，所述原始属性信息包括原始资源信息、原始尺寸信息和原始位置信息；

对于文本类可视元素，所述原始属性信息包括原始字体信息和原始位置信息；

对于视频类可视元素，所述原始属性信息包括符合预设格式的视频类可视元素的原始位置信息。

相应地，所述步骤S2进一步可以实现为：

根据可视元素的类型，获取所述可视元素的原始属性信息，所述原始属性信息包括原始位置信息，所述原始位置信息用于描述所述可视元素在所述第一页面中排布的位置。

其中：

对图片类可视元素，获取所述图片类可视元素的原始资源信息、原始尺寸信息和原始位置信息；

对文本类可视元素，获取所述文本类可视元素的原始字体信息和原始位置信息；

对视频类可视元素，获取符合预设格式的视频类可视元素的原始位置信息。

其中，所述预设格式可以根据待生成网页所支持的格式来确定，例如当待生成的网页仅支持mp4格式的视频时，则所述预设格式可以是mp4格式。仅针对提取的视频类可视元素中，原始格式信息为mp4格式的视频类可视元素，获取其相应的原始属性信息。换句话说，对于不符合预设格式的视频类可视元素，在该步骤中将被舍弃。

在一些实施例中，对于图片类可视元素，当采用懒加载策略导致图片信息不准确时，可以通过模拟页面滚动或图片src拼接的方式来获取原始图片资源；以及当存在页面加载没有完成而导致图片大小信息存在偏差时，通过重新加载图片来获取图片的原始尺寸信息。所述原始尺寸信息可以被用于进一步筛选图片类可视元素，例如，当原始尺寸信息过小时，可能意味着当前的图片类可视元素并不重要，可以被舍弃。

在步骤S3中，利用可视元素的原始属性信息，尤其是其中所包含的原始位置信息，本公开可以实现第二网页对第一网页的复原。在一些实施例中，步骤S3进一步包括：

S31，基于所述原始位置信息，对所述至少一部分可视元素进行聚类；

S32，在每一个对应于原始位置信息的聚类中，基于可视元素的类型，按照以下规则对可视元素进行排布：

对于文本类可视元素，在所述聚类对应的位置处排布所述聚类中包括的全部文本类可视元素；

对于图片类可视元素，在所述聚类对应的位置处排布所述聚类中满足第一预设条件的图片类可视元素；

对于视频类可视元素，在所述聚类对应的位置处排布所述聚类中满足第二预设条件的视频类可视元素；

其中，所述第一预设条件与图片类可视元素的原始属性信息有关；所述第二预设条件与所述视频类可视元素在聚类中的排序有关。

为了复原第一网页，在生成的第二网页中应尽可能在相同位置处来呈现与第一网页相同的可视元素，通过按照原始位置信息进行聚类，可以将处于相同原始位置的可视元素划分在一起，从而方便按照逐一聚类的方式进行可视元素的排布，来复原第一网页。

在一些实施例中，所述原始位置信息可以是top值、left值、宽/高值中至少一个。

在一些实施例中，当所述原始位置信息为top值时，可以按照top值从小到大的方式逐一对相对应的聚类中的可视元素进行排布。

在一些实施例中，所述图片类可视元素的原始属性信息还包括原始尺寸信息，所述第一预设条件可以是，图片类可视元素的原始尺寸最大。

在一些实施例中，所述第二预设条件为所述在所述聚类中排序最靠前的视频类可视元素。

在一些实施例中，第一网页中所包含的可视元素较为丰富，例如在相同位置处，同时有不同类型的可视元素。如果直接按照S32来进行排布，会导致不同类型的可视元素重叠在一起。在这种情况下，S32进一步包括以下步骤：

在每一个对应于原始位置信息的聚类中，按照可视元素类型的优先级顺序，筛选优先级最高的可视元素；

基于可视元素的类型，按照以下规则进行可视元素的排布：

对于文本类可视元素，在所述聚类对应的位置处排布所述聚类中包括的全部文本类可视元素；

对于图片类可视元素，在所述聚类对应的位置处排布所述聚类中满足第一预设条件的图片类可视元素；

对于视频类可视元素，在所述聚类对应的位置处排布所述聚类中满足第二预设条件的视频类可视元素。

在一些实施例中，所述优先级顺序可以是，优先级从高到低依次为视频类可视元素、图片类可视元素和文本类可视元素。

在一些实施例中，在步骤S3中的步骤S31之前，还包括：

S30，基于可视元素的类型，从所述可视元素中筛选出至少一部分可视元素；

其中，根据以下规则中至少一种执行所述筛选：

对于文本类可视元素，保留原始字体信息符合预设字体条件的文本类可视元素；

对于图片类可视元素，保留原始尺寸符合预设尺寸条件的图片类可视元素和/或保留原始图片资源符合预设图片资源条件的图片类可视元素；

对于视频类可视元素，保留全部符合预设格式条件的视频类可视元素。

在一些实施例中，所述预设字体条件可以是，原始字体大小大于全部文本类可视元素字体大小的中位数。

在一些实施例中，所述预设尺寸条件可以是，原始尺寸不小于屏幕尺寸的预设比例，例如宽度不小于屏幕宽度的1/4、宽高乘积不小于屏幕面积的1/10等。

在一些实施例中，所述预设图片资源条件可以是预设的地址来源条件，例如图片资源的地址来自于本地或特定地址。

在一些实施例中，所述预设格式条件可以是，所述第二网页可支持的播放格式，例如mp4格式。

以图1为例，通过S30的筛选，其中产品logo因原始尺寸不符合预设尺寸条件而被舍弃，产品简介信息，因字体大小不符合预设字体条件而被舍弃。

利用步骤S30的筛选操作，通过预先考虑到可视元素的重要程度和可视化效果，优化掉可能不重要的可视元素，进一步缩小待排布的可视元素的范围，优化整个页面生成过程。例如字体条件的设置是考虑到较小字体的文本可能是非重要的文本信息，图片尺寸条件的设置考虑到太小的图片既不醒目也没有很好的填充效果，图片资源条件的设置考虑到图片的获取难易程度和加载快慢等，以及视频资源的可视化效果强，在可支持的格式范围内尽可能全部保留等。

上述实施例分别包括了网页生成的具体步骤。可以理解的是，为了实现上述功能，其可以通过由包含了执行上述具体步骤的各个功能相应的硬件结构和/或软件模块的计算机对应执行相应的步骤。本领域技术人员应该很容易意识到，结合本文中所公开的实施例描述的各示例的步骤，本公开能够以硬件或软硬件结合的形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本公开的范围。

本公开实施例可以根据上述方法示例对计算机进行功能单元的划分，例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。需要说明的是，本公开实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

在采用对应各个功能划分各个功能模块的情况下，本公开示例性实施例提供一种网页生成装置，该网页生成装置可以位于终端位置处也可以位于服务器端。图5示出了根据本公开示例性实施例的网页生成装置的示意性框图。如图5所示，该网页生成装置500包括：

提取模块501，用于从第一网页中提取可视元素；

获取模块502，用于获取所述可视元素的原始属性信息，所述原始属性信息包括原始位置信息，所述原始位置信息用于描述所述可视元素在所述第一网页中排布的位置；

网页生成模块503，用于基于所述原始位置信息生成第二网页，其中，所述第二网页中包括至少一部分所述可视元素，所述至少一部分所述可视元素在所述第二网页中按照所述原始位置信息进行排布；

其中，所述至少一部分所述可视元素在第二网页中的排布的位置与在第一网页中排布的位置相同。

图6示出了根据本公开示例性实施例的电子设备的示意性框图。如图6所示，该电子设备600包括存储器602，耦接至该存储器602的处理器601，该处理器601可以执行上述网页生成方法中的相应步骤。

在一些实施例中，存储器602可以包括只读存储器和随机存取存储器，并向处理器提供操作指令和数据。存储器的一部分还可以包括非易失性随机存取存储器(non-volatile random access memory，NVRAM)。

在一些实施方式中，如图6所示，处理器601通过调用存储器存储的操作指令(该操作指令可存储在操作系统中)，执行相应的操作。处理器601控制终端设备中任一个的处理操作，处理器还可以称为中央处理单元(central processing unit，CPU)。存储器602可以包括只读存储器和随机存取存储器，并向处理器601提供指令和数据。存储器602的一部分还可以包括NVRAM。例如应用中存储器、通信接口以及存储器通过总线系统耦合在一起，其中总线系统除包括数据总线之外，还可以包括电源总线、控制总线和状态信号总线等。

上述本公开实施例揭示的方法可以应用于处理器601中，或者由处理器601实现。处理器601可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器601中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器601可以是通用处理器、数字信号处理器(digital signal processing，DSP)、ASIC、现成可编程门阵列(field-programmable gate array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本公开实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于存储器602中，例如随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质。处理器601读取存储器602中的信息，结合其硬件完成上述方法的步骤。

另外，根据本公开的一些实施例，根据本公开的各种操作/处理在通过软件和/或固件实现的情况下，可从存储介质或网络向具有专用硬件结构的计算机系统，例如图7所示的计算机系统700安装构成该软件的程序，该计算机系统在安装有各种程序时，能够执行各种功能，包括诸如前文所述的功能等等。图7是示出根据本公开的实施例的中可采用的计算机系统的示例结构的框图。

计算机系统可以包括各种形式，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。计算机系统还可以表示各种形式的移动终端设备，诸如，个人数字助理、蜂窝电话、智能电话、可穿戴设备和其它类似的移动终端设备。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图7所示，计算机系统700包括计算单元701，其可以根据存储在只读存储器(ROM)702中的计算机程序或者从存储单元708加载到随机访问存储器(RAM)703中的计算机程序，来执行各种适当的动作和处理。在RAM 703中，还可存储计算机系统700操作所需的各种程序和数据。计算单元701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

计算机系统700中的多个部件连接至I/O接口705，包括：输入单元706、输出单元707、存储单元708以及通信单元709。输入单元706可以是能向计算机系统700输入信息的任何类型的设备，输入单元706可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和/或功能控制有关的键信号输入。输出单元707可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频/音频输出终端、振动器和/或打印机。存储单元704可以包括但不限于磁盘、光盘。通信单元709允许计算机系统700通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和/或芯片组，例如蓝牙TM设备、WiFi设备、WiMax设备、蜂窝通信设备和/或类似物。

计算单元701可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元701的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元701执行上文所描述的各个方法和处理。例如，本公开实施例所涉及的方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元708。在一些实施例中，计算机程序的部分或者全部可以经由ROM 702和/或通信单元709而被载入和/或安装到计算机系统700上。在一些实施例中，计算单元701可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行本公开的网页生成方法。

本公开示例性实施例还提供一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本公开实施例的方法。

用于实施本公开的方法的程序产品可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

本公开示例性实施例还提供一种存储介质，其上存储有计算机程序，该程序被处理器执行时用于实现根据本公开提供的网页生成方法。

在本公开的上下文中，存储介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。存储介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机程序或指令。在计算机上加载和执行所述计算机程序或指令时，全部或部分地执行本公开实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、终端、用户设备或者其它可编程装置。所述计算机程序或指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机程序或指令可以从一个网站站点、计算机、服务器或数据中心通过有线或无线方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是集成一个或多个可用介质的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，例如，软盘、硬盘、磁带；也可以是光介质，例如，数字视频光盘(digital video disc，DVD)；还可以是半导体介质，例如，固态硬盘(solid state drive，SSD)。

尽管结合具体特征及其实施例对本公开进行了描述，显而易见的，在不脱离本公开的精神和范围的情况下，可对其进行各种修改和组合。相应地，本说明书和附图仅仅是所附权利要求所界定的本公开的示例性说明，且视为已覆盖本公开范围内的任意和所有修改、变化、组合或等同物。显然，本领域的技术人员可以对本公开进行各种改动和变型而不脱离本公开的精神和范围。这样，倘若本公开的这些修改和变型属于本公开权利要求及其等同技术的范围之内，则本公开也意图包括这些改动和变型在内。

Claims (14)

1.一种网页生成方法，包括：

从第一网页中提取可视元素；

获取所述可视元素的原始属性信息，所述原始属性信息包括原始位置信息，所述原始位置信息用于描述所述可视元素在所述第一网页中排布的位置；

基于所述原始位置信息生成第二网页，其中，所述第二网页中包括至少一部分所述可视元素，所述至少一部分所述可视元素在所述第二网页中按照所述原始位置信息进行排布；

其中，所述至少一部分所述可视元素在所述第二网页中排布的位置与在所述第一网页中排布的位置相同。

2.如权利要求1所述的方法，其中，所述基于所述原始位置信息生成第二网页，包括：

基于所述原始位置信息对所述至少一部分可视元素进行聚类；

在每一个对应于所述原始位置信息的聚类中，基于可视元素的类型按照以下规则对可视元素进行排布：

对于文本类可视元素，在所述聚类对应的位置处排布所述聚类中包括的全部文本类可视元素；

对于图片类可视元素，在所述聚类对应的位置处排布所述聚类中满足第一预设条件的图片类可视元素；

对于视频类可视元素，在所述聚类对应的位置处排布所述聚类中满足第二预设条件的视频类可视元素；

其中，所述第一预设条件与所述图片类可视元素的原始属性信息有关；所述第二预设条件与所述视频类可视元素在聚类中的排序有关。

3.如权利要求2所述的方法，其中，所述图片类可视元素的原始属性信息还包括原始尺寸信息，所述第一预设条件为在所述聚类中原始尺寸最大的图片类可视元素。

4.如权利要求2所述的方法，其中，所述第二预设条件为在所述聚类中排序最靠前的视频类可视元素。

5.如权利要求2所述的方法，在基于所述原始位置信息对所述至少一部分可视元素进行聚类，还包括：

在每一个对应于原始位置信息的聚类中，按照可视元素类型的优先级顺序，筛选优先级最高的可视元素。

6.如权利要求5所述的方法，其中，所述可视元素类型的优先级顺序包括：

优先级从高到低依次为视频类可视元素、图片类可视元素和文本类可视元素。

7.如权利要求1或2所述的方法，其中，所述基于所述原始位置信息生成第二网页，包括：

基于可视元素的类型，从所述可视元素筛选出至少一部分可视元素；

其中，根据以下规则中至少一种执行所述筛选：

对于文本类可视元素，保留原始字体符合预设字体条件的文本类可视元素；

对于图片类可视元素，保留原始尺寸符合预设尺寸条件的图片类可视元素和/或保留原始图片资源符合预设图片资源条件的图片类可视元素；

对于视频类可视元素，保留全部符合预设格式条件的视频类可视元素。

8.如权利要求7所述的方法，其中，

所述预设字体条件包括原始字体大小不小于全部文本类可视元素的字体大小的中位数；

所述预设尺寸条件包括原始尺寸大小不小于屏幕尺寸的预设比例；

所述预设图片资源条件包括预设的地址来源条件；

和/或，

所述预设格式条件包括所述第二网页可支持的播放格式。

9.如权利要求1所述的方法，其中，所述获取可视元素的原始属性信息，进一步包括根据所述可视元素的类型，按照以下规则获取所述可视元素的原始属性信息：

对图片类可视元素，获取所述图片类可视元素的原始资源信息、原始尺寸信息和原始位置信息；

对文本类可视元素，获取所述文本类可视元素的原始字体信息和原始位置信息；

对视频类可视元素，获取符合预设格式的视频类可视元素的原始位置信息。

10.如权利要求1所述的方法，其中，所述从第一网页中提取可视元素，包括：

在浏览器中加载所述第一网页；

解析加载的所述第一网页；

对经解析的所述第一网页进行扁平化处理；

对经扁平化处理的所述第一网页提取所述可视元素。

11.一种网页生成装置，包括：

提取模块，用于从第一网页中提取可视元素；

获取模块，用于获取所述可视元素的原始属性信息，所述原始属性信息包括原始位置信息，所述原始位置信息用于描述所述可视元素在所述第一网页中排布的位置；

网页生成模块，用于基于所述原始位置信息生成第二网页，其中，所述第二网页中包括至少一部分所述可视元素，所述至少一部分所述可视元素在所述第二网页中按照所述原始位置信息进行排布；

其中，所述至少一部分所述可视元素在所述第二网页中排布的位置与在所述第一网页中排布的位置相同。

12.一种电子设备，包括：存储器，和耦接至所述存储器的处理器；所述存储器中存储有指令，所述指令在由所述处理器执行时实现权利要求1-10中任一项所述的方法。

13.一种存储介质，其上存储有计算机程序，该程序被处理器执行时用于实现权利要求1-10中任一项所述的方法。

14.一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被处理器执行时实现权利要求1-10中任一项所述的方法。