CN114528510A - 网页数据处理的方法、装置、电子设备及介质 - Google Patents

Abstract

本公开涉及一种网页数据处理的方法、装置、电子设备及介质，上述方法可应用于前端开发领域，上述网页数据处理的方法包括：接收网页访问请求；根据上述网页访问请求，从服务器获取目标网页文件，上述目标网页文件携带的信息包括：背景页面信息，待加载元素的元素标识；根据上述背景页面信息进行显示，得到基础网页；根据上述待加载元素的元素标识，从上述服务器获取对应的目标元素；以及将上述目标元素在上述基础网页中进行加载和显示，得到目标网页。基于网页的拆分处理，通过基础网页的显示和在基础网页中实时加载各个网页元素后对应进行更新显示，能够确保网页快速显示而且显示效果正常，有效降低白屏等待时间，有助于提升用户体验。

Description

网页数据处理的方法、装置、电子设备及介质

技术领域

本公开涉及前端开发技术领域，尤其涉及一种网页数据处理的方法、装置、电子设备及介质。

背景技术

终端设备的应用程序(APP)在开发过程中，为了实时动态变更页面、避免发版更新APP，经常会采用网络(Web)技术开发网页应用。

然而，和原生开发页面相比，由于网页需要从服务端下载和渲染等原因，导致在终端设备下载和渲染较复杂的页面时，经常出现白屏等待或者显示不正常的问题，造成了不好的用户体验。

发明内容

为了解决上述技术问题或者至少部分地解决上述技术问题，本公开的实施例提供了一种网页数据处理的方法、装置、电子设备及介质。

第一方面，本公开的实施例提供了一种网页数据处理的方法。上述网页数据处理的方法包括：接收网页访问请求；根据上述网页访问请求，从服务器获取目标网页文件，上述目标网页文件携带的信息包括：背景页面信息，待加载元素的元素标识；根据上述背景页面信息进行显示，得到基础网页；根据上述待加载元素的元素标识，从上述服务器获取对应的目标元素；以及将上述目标元素在上述基础网页中进行加载和显示，得到目标网页。

根据本公开的实施例，上述目标网页文件还携带有：待加载元素的总个数信息；其中，根据上述待加载元素的元素标识，从上述服务器获取对应的目标元素，包括：根据上述待加载元素的总个数信息，创建多个线程；为上述多个线程分配各自对应的待加载元素的元素标识，得到对应关系；基于上述对应关系，各个线程根据各自对应的待加载元素的元素标识，从上述服务器获取各自对应的目标元素。

根据本公开的实施例，上述目标网页文件携带的信息还包括：待加载元素的加载位置信息。其中，将上述目标元素在上述基础网页中进行加载和显示，得到目标网页，包括：根据上述待加载元素的加载位置信息，将上述目标元素在上述基础网页中对应进行加载和显示，得到目标网页。

根据本公开的实施例，上述元素标识是根据网页地址信息和元素信息进行运算后生成的用于区分各个元素的唯一标识。

第二方面，本公开的实施例提供了一种网页数据处理的方法。上述网页数据处理的方法包括：接收网页文件部署包；对上述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素；其中上述背景网页文件携带的信息包括：背景页面信息，待加载元素的元素标识；当接收到终端设备请求获取目标网页文件的网页访问请求时，将对应的背景网页文件发送给上述终端设备；当接收到上述终端设备请求获取目标元素的元素获取请求时，将对应的网页元素发送给上述终端设备。

根据本公开的实施例，对上述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素，包括：针对上述网页文件部署包中的一个或多个网页文件中的每个网页文件，对当前网页文件进行解析，得到当前网页文件包含的各个元素的元素信息；根据上述当前网页文件的网页地址信息和上述元素信息进行运算，生成每个元素对应的元素标识；将上述一个或多个网页文件中的元素基于元素标识进行存储，得到存储后的网页元素；将上述一个或多个网页文件所包含的元素替换为对应的元素标识，得到背景网页文件。

根据本公开的实施例，对当前网页文件进行解析，得到当前网页文件包含的各个元素的元素信息，包括：对上述当前网页文件进行代码语法解析，得到语法解析结果；根据包含标签、名称或属性中至少一个的元素关键信息，在上述语法解析结果中逐行查找上述网页文件所包含的各个元素；提取得到上述网页文件包含的上述各个元素的元素信息。

根据本公开的实施例，对当前网页文件进行解析，得到当前网页文件包含的各个元素的元素信息之外，还包括：根据上述语法解析结果，得到当前网页文件包含的各个元素的加载位置信息。

根据本公开的实施例，根据上述当前网页文件的网页地址信息和上述元素信息进行运算，生成每个元素对应的元素标识，包括：将上述网页地址信息和上述各个元素的元素信息的哈希值进行拼接，生成每个元素对应的元素标识。

根据本公开的实施例，上述对上述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素，还包括：确定上述当前网页文件包含的元素的总个数信息；将上述总个数信息写入至上述背景网页文件的头文件。

第三方面，本公开的实施例提供了一种网页数据处理的装置。上述网页数据处理的装置包括：请求接收模块、网页文件获取模块、显示模块和元素获取模块。上述请求接收模块用于接收网页访问请求。上述网页文件获取模块用于根据上述网页访问请求，从服务器获取目标网页文件，上述目标网页文件携带的信息包括：背景页面信息，待加载元素的元素标识。上述显示模块用于根据上述背景页面信息进行显示，得到基础网页。上述元素获取模块用于根据上述待加载元素的元素标识，从上述服务器获取对应的目标元素。上述显示模块还用于将上述目标元素在上述基础网页中进行加载和显示，得到目标网页。

第四方面，本公开的实施例提供了一种网页数据处理的装置。上述网页数据处理的装置包括：部署包接收模块、拆分处理模块、文件发送模块和元素发送模块。上述部署包接收模块用于接收用户上传的网页文件部署包。上述拆分处理模块用于对上述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素；其中上述背景网页文件携带的信息包括：背景页面信息，待加载元素的元素标识。上述文件发送模块用于在接收到终端设备请求获取目标网页文件的网页访问请求的情况下，将对应的背景网页文件发送给上述终端设备。上述元素发送模块用于在接收到上述终端设备请求获取目标元素的元素获取请求的情况下，将对应的网页元素发送给上述终端设备。

第五方面，本公开的实施例提供了一种电子设备。上述电子设备包括处理器、通信接口、存储器和通信总线，其中，处理器、通信接口和存储器通过通信总线完成相互间的通信；存储器，用于存放计算机程序；处理器，用于执行存储器上所存放的网页数据处理的方法。

第六方面，本公开的实施例提供了一种计算机可读存储介质。上述计算机可读存储介质上存储有计算机程序，上述计算机程序被处理器执行时实现如上所述的网页数据处理的方法。

本公开实施例提供的上述技术方案至少具有如下优点的部分或全部：

通过将网页文件进行元素和背景网页的拆分处理，在响应于网页访问请求时，获取到的目标网页文件为背景网页文件，包括：背景页面信息和待加载的元素标识，进一步根据上述背景页面信息进行显示，得到基础网页，上述基础网页(可以具有预设的样式，例如预设图案和颜色等)的即时展示能够避免白屏现象并提升用户的体验感；进一步根据上述待加载元素的元素标识，从服务器获取对应的目标元素，并将上述目标元素在上述基础网页中进行加载和显示，得到目标网页；通过基础网页的显示和在基础网页中实时加载各个网页元素后对应进行更新显示，能够确保网页快速显示而且显示效果正常，有效降低白屏等待时间，有助于提升用户体验。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

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

图1示意性示出了适用于本公开一实施例的网页数据处理的方法的系统架构；

图2示意性示出了根据本公开实施例的网页数据处理的方法的流程图；

图3示意性示出了根据本公开实施例的操作S204的详细实施流程图；

图4示意性示出了根据本公开另一实施例的网页数据处理的方法的流程图；

图5A示意性示出了根据本公开一实施例的操作S402的详细实施流程图；

图5B示意性示出了根据本公开另一实施例的操作S402的详细实施流程图；

图6A示意性示出了根据本公开实施例的网页数据处理的方法中前端显示设备侧和后端服务侧之间的交互过程示意图；

图6B示意性示出了根据本公开实施例的网页数据处理的方法的实施场景示意图；

图7示意性示出了根据本公开实施例的网页数据处理的装置的结构框图；

图8示意性示出了根据本公开实施例的网页数据处理的装置的结构框图；以及

图9示意性示出了本公开实施例提供的电子设备的结构框图。

具体实施方式

目前，有的方式是通过采用离线化缓存来解决白屏等待问题，具体的方法为：将网页缓存到手机本地，当需要打开页面时，直接从本地读取，从而减去了网络请求时间。然而，上述方法仍然存在以下问题需要解决：(1)当网页发生变更时，核心逻辑仍然是需要从服务端下载网页，优化场景受限；(2)从本地读取(I/O操作)本身也是一种耗时操作，对于较复杂页面，在性能不佳的手机上依然存在白屏等待现象。

为了至少解决终端设备下载和渲染较复杂的页面时，经常出现白屏等待或者显示不正常的问题，本公开的实施例提供了一种网页数据处理的方法、装置、电子设备及介质，通过将网页文件进行元素和基础网页(作为背景网页)的拆分处理，上述基础网页的即时展示能够避免白屏现象并提升用户的体验感，通过分层次进行基础网页的显示和在基础网页中实时加载各个网页元素后对应进行更新显示，能够确保网页快速显示而且显示效果正常，有效降低白屏等待时间，有助于提升用户体验；此外，通过在服务器一侧以及对应的显示终端一侧执行本公开的方法，对于开发人员而言，无需更改前端开发的逻辑，节省了前端开发人员的代码调整成本。

在一实施例中，可应用于前端显示设备侧的网页数据处理的方法包括：接收网页访问请求；根据上述网页访问请求，从服务器获取目标网页文件，上述目标网页文件携带的信息包括：背景页面信息，待加载元素的元素标识；根据上述背景页面信息进行显示，得到基础网页；根据上述待加载元素的元素标识，从上述服务器获取对应的目标元素；以及将上述目标元素在上述基础网页中进行加载和显示，得到目标网页。

在一实施例中，可应用于后端服务侧的网页数据处理的方法包括：接收网页文件部署包；对上述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素；其中上述背景网页文件携带的信息包括：背景页面信息，待加载元素的元素标识；当接收到终端设备请求获取目标网页文件的网页访问请求时，将对应的背景网页文件发送给上述终端设备；当接收到上述终端设备请求获取目标元素的元素获取请求时，将对应的网页元素发送给上述终端设备。

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

图1示意性示出了适用于本公开实施例的网页数据处理的方法的系统架构。

参照图1所示，适用于本公开实施例的网页数据处理的方法的系统架构100包括：终端设备101、102、103，网络104和服务器105。

网络104是用于在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，例如电子设备包括但不限于是：智能手机、平板电脑、笔记本电脑、台式计算机、智能手表等等。

服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的网页进行数据处理提供服务支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的网页访问请求进行数据分析和处理，并将处理结果(例如根据用户请求获取或生成的网页、信息、或数据等)反馈给终端设备。

需要说明的是，本公开第一个实施例所提供的网页数据处理的方法一般可以由终端设备101、102、103执行，本公开第二个实施例所提供的网页数据处理的方法一般可以由服务器105执行。服务器可以是传统的应用服务器，也可以是云服务器。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

本公开的第一个示例性实施例提供了一种可应用于前端显示设备侧的网页数据处理的方法。该方法可以由终端设备来执行。

图2示意性示出了根据本公开实施例的网页数据处理的方法的流程图。

参照图2所示，本公开实施例提供的网页数据处理的方法，包括以下操作：S201、S202、S203、S204和S205。

在操作S201，接收网页访问请求。

在一些实施场景中，用户可以通过终端设备的浏览器输入要进行访问的网页地址信息，来发起网页访问请求；或者通过点击网页超链接的形式发起网页访问请求；或者通过点击某个应用界面上的功能键发起网页访问请求，例如用户通过点击购物APP中的详情页按钮，来发起对商品详情页对应的网页访问请求。相应的，在终端设备上接收到网页访问请求。

在操作S202，根据上述网页访问请求，从服务器获取目标网页文件，上述目标网页文件携带的信息包括：背景页面信息，待加载元素的元素标识。

终端设备在接收到网页访问请求的情况下，根据网页访问请求中携带的网页地址信息，从服务器获取相应的目标网页文件。

在服务器一侧，通过对网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素并分别进行存储。上述元素包括但不限于是：图标、按钮、输入框、图片、标题栏、文本内容显示框等。

上述目标网页文件是服务器中存储的背景网页文件中与上述网页访问请求匹配的背景网页文件。

上述背景页面信息用于限定页面整体的显示样式，包括：页面长宽尺寸、页面间距、页面颜色、页面填充等参数信息。

在操作S203，根据上述背景页面信息进行显示，得到基础网页。

终端设备在从服务器获取到目标网页文件后，根据背景页面信息进行显示，得到基础网页，这里的基础网页中不含待加载元素。

在操作S204，根据上述待加载元素的元素标识，从上述服务器获取对应的目标元素。

通过基于待加载元素的元素标识，能够从服务器获取与上述元素标识所对应的目标元素。

在操作S205，将上述目标元素在上述基础网页中进行加载和显示，得到目标网页。

通过将目标元素在基础网页中进行加载和显示，当所有的待加载元素均加载完毕时，在终端设备上呈现出完整显示的目标网页。通过拆分和元素加载后即刻对应更新显示的方式，使得网页显示的效果得以保证，并且提升了网页加载速度，降低白屏等待时长，网页加载过程很短，用户几乎无感知。

上述操作S201～S205中，可以由终端设备基于H5(Hyper Text Markup Language5，第5版超文本标记语言)容器来实现页面元素(内容)的加载和显示。上述H5容器在系统WebView(可以内嵌在移动端，实现前端的混合式开发，类似浏览器，用于加载网页)的基础上，增加了对接服务器中的智能部署平台来显示网页的能力。

基于上述操作S201～S205，通过将网页文件进行元素和背景网页的拆分处理，在响应于网页访问请求时，获取到的目标网页文件为背景网页文件，包括：背景页面信息和待加载的元素标识，进一步根据上述背景页面信息进行显示，得到基础网页，上述基础网页(可以具有预设的样式，例如预设图案和颜色等)的即时展示能够避免白屏现象并提升用户的体验感；进一步根据上述待加载元素的元素标识，从服务器获取对应的目标元素，并将上述目标元素在上述基础网页中进行加载和显示，得到目标网页；通过基础网页的显示和在基础网页中实时加载各个网页元素后进行更新显示，能够确保网页快速显示而且显示效果正常，有效降低白屏等待时间，有助于提升用户体验。

图3示意性示出了根据本公开实施例的操作S204的详细实施流程图。

根据本公开的实施例，上述目标网页文件还携带有：待加载元素的总个数信息。例如在一实施例中，上述待加载元素的总个数信息位于目标网页文件的头(head)文件中。

例如，在一实施例中，在WebView的回调方法onPageFinished(网页加载完成)中，使用脚本处理方法executeJs()获取网页信息，从头文件中获取拆解/拆分的元素个数(ElementNum)，并获取各个元素的元素标识(Element ID)，根据元素个数创建多个线程，在每个线程中下载对应于元素标识的网页元素。每获取到一个网页元素(目标元素)，就立即通过executeJs()方法执行元素替换脚本，将获取的元素信息添加到元素标识ElementID对应的网页位置中，并刷新显示，当所有线程执行完成，整个网页即显示成功。

参照图3所示，上述操作S204中，根据上述待加载元素的元素标识，从上述服务器获取对应的目标元素，包括以下操作：S301、S302和S303。

在操作S301，根据上述待加载元素的总个数信息，创建多个线程。

在一实施例中，根据当前终端设备的计算资源所支持的容量M(正整数)和待加载元素的总个数信息K(正整数)来创建多个线程，线程个数为：min(M，K)。例如，待加载元素共有10个，如果当前终端设备的计算资源所支持的线程总数大于等于10个，那么可以创建10个线程；如果当前终端设备的计算资源所支持的线程总数为8个，那么可以创建8个线程。

在操作S302，为上述多个线程分配各自对应的待加载元素的元素标识，得到对应关系。

当待加载元素的总个数与创建的线程的总个数相等时，上述对应关系为一一对应，当待加载元素的总个数大于创建的线程的总个数时，上述对应关系包括：存在某一个线程对应于多个待加载元素，存在某个或某些线程对应于一个待加载元素。

在操作S303，基于上述对应关系，各个线程根据各自对应的待加载元素的元素标识，从上述服务器获取各自对应的目标元素。

各个线程可以独立执行获取各自对应的目标元素的操作，从而进一步提升对于网页元素的加载效率，缩短网页加载时长。

根据本公开的实施例，上述元素标识是根据网页地址信息和元素信息进行运算后生成的用于区分各个元素的唯一标识。

根据本公开的实施例，上述目标网页文件携带的信息还包括：待加载元素的加载位置信息。

例如，目标网页文件为超文本标记语言(html)文件或者超文本标记(htm)文件。上述html/htm文件中携带有背景网页的显示样式信息，包括：页面长宽尺寸、页面间距、页面颜色、页面填充等参数信息；另外，该html/htm文件还携带有待加载元素的加载位置信息和元素标识，例如，该html/htm文件限定在背景页面的位置1加载元素标识1，在背景页面的位置2加载元素标识2，在背景页面的位置3加载元素标识3和4，且3和4为兄弟元素，采用浮动(float)的方式并排放置。

在这种情况下，上述操作S205中，将上述目标元素在上述基础网页中进行加载和显示，得到目标网页，包括：根据上述待加载元素的加载位置信息，将上述目标元素在上述基础网页中对应进行加载和显示，得到目标网页。

当从服务器获取到各个目标元素：元素标识1对应的元素1(例如为标题栏)，元素标识2对应的元素2(输入框)，元素标识3对应的元素3(图片A)和元素标识4对应的元素4(图片B)后，将元素1(标题栏)在基础网页的位置1(例如为上外边距(margin-top)为20px的位置，宽度为100％)进行加载和显示，将元素2(输入框)在基础网页的位置2(例如为上外边距(margin-top)为200px的位置，左右内边距(padding-left，padding-right)均为40px的位置)进行加载和显示，将元素3(图片A)和元素4(图片B)在基础网页的位置3(例如为下外边距(margin-bottom)为30px的位置)进行加载和并排显示。

本公开的第二个示例性实施例提供了一种可应用于后端服务侧的网页数据处理的方法。本实施例的网页数据处理的方法可以由服务器执行。为了理解整体的信息流和数据交互过程，可以结合第一个实施例和第二个实施例的描述。

图4示意性示出了根据本公开实施例的网页数据处理的方法的流程图。

参照图4所示，本公开实施例提供的网页数据处理的方法，包括以下操作：S401、S402、S403和S404。

在操作S401，接收网页文件部署包。

在一实施场景中，用户上传网页文件部署包到服务器中，例如前端开发人员将开发完成的一个或多个网页文件打包后上传至服务器。相应的，服务器一侧接收到用户上传的网页文件部署包。

对于前端开发人员来讲，其网页开发、打包方式没有任何变化，当前端开发人员在设备上完成网页开发后，直接将开发完成的网页文件打包上传到服务器中的智能部署平台(服务器中的具有网页拆分功能的功能模块)即可。在服务器的智能部署平台实现网页文件的拆分和发布，进而使得用户可以对发布的网页文件所对应的应用界面或浏览器界面进行访问，例如可以通过输入网页访问地址来访问对应的目标网页文件。

在操作S402，对上述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素；其中上述背景网页文件携带的信息包括：背景页面信息，待加载元素的元素标识。

智能部署平台在接收到用户上传的网页文件部署包之后，可以自动执行网页文件的拆分处理，或者根据用户要求进行网页文件的拆分处理，得到背景网页文件和网页元素。

在操作S403，当接收到终端设备请求获取目标网页文件的网页访问请求时，将对应的背景网页文件发送给上述终端设备。

在操作S404，当接收到上述终端设备请求获取目标元素的元素获取请求时，将对应的网页元素发送给上述终端设备。

基于上述操作S401～S404，通过在服务端一侧执行网页文件的拆分处理操作，实现网页文件中背景网页文件和网页元素的拆分和独立存储，进而在响应于网页访问请求或元素获取请求时，对应发送相应的背景网页文件或网页元素，使得终端设备能够基于H5容器来实现背景网页文件和网页元素的独立下载和整合显示，能够实现复杂网页的正常显示，并有助于提升网页加载速度。

图5A示意性示出了根据本公开一实施例的操作S402的详细实施流程图。

根据本公开的一种实施例，参照图5A所示，上述操作S402中，对上述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素，包括以下操作：S501、S502、S503和S504。

在操作S501，针对上述网页文件部署包中的一个或多个网页文件中的每个网页文件，对当前网页文件进行解析，得到当前网页文件包含的各个元素的元素信息。

在一实施例中，对上述网页文件部署包中的部分网页文件或者全部网页文件进行解析和拆分处理。

网页是由各个元素(如图标、按钮、输入框、图片、标题栏、文本内容显示框等)组成，可以使用Jsoup(Java的HTML解析器，能够直接解析某个URL地址、HTML文本内容等)或者其他的网页解析方法来解析部署包中的html网页文件，解析得到各个元素，例如为前述实施例描述的元素(Element)1、元素2、元素3和元素4。各个元素在该网页的加载位置信息在网页文件部署包的各个网页文件中是预先配置好的。

在一实施例中，对当前网页文件进行解析，得到当前网页文件包含的各个元素的元素信息，包括：对上述当前网页文件进行代码语法解析，得到语法解析结果；根据包含标签、名称或属性中至少一个的元素关键信息，在上述语法解析结果中逐行查找上述网页文件所包含的各个元素；提取得到上述网页文件包含的上述各个元素的元素信息。

例如，可以通过解析器对上述网页文件进行代码语法解析，得到语法解析结果；jsoup elements对象支持类似于CSS(或jquery)的选择器语法，来实现非常强大和灵活的查找功能，可以通过选择器基于元素关键信息来对上述语法解析结果进行元素查找；接着可以将上述元素的元素信息提取至预设文件位置或者预设数据库中，便于后续进行调取和分析利用。

作为示例，选择器查找的语法可以是以下形式：

tagname:通过标签查找元素，比如：a；

ns|tag:通过标签在命名空间查找元素，比如：可以用fb|name语法来查找<fb:name>元素；

#id:通过ID查找元素，比如：#logo；

.class:通过class名称查找元素，比如：.masthead；

[attribute]:利用属性查找元素，比如：[href]；

[^attr]:利用属性名前缀来查找元素，比如：可以用[^data-]来查找带有HTML5Dataset属性的元素；

[attr＝value]:利用属性值来查找元素，比如：[width＝500]；

[attr^＝value],[attr$＝value],[attr*＝value]:利用匹配属性值开头、结尾或包含属性值来查找元素，比如：[href*＝/path/]；

[attr～＝regex]:利用属性值匹配正则表达式来查找元素，比如：

img[src～＝(？i)\.(png|jpe？g)]；

*:这个符号将匹配所有元素(通配符)。

也可以是将多个选择器组合使用，或者在查找时将各个元素关键信息(例如标签、名称或属性等)进行组合。

el.class:元素+class，比如：div.masthead

el[attr]:元素+class，比如：a[href]

任意组合，比如：a[href].highlight；

ancestor child:查找某个元素下子元素，比如：可以用.body p查找在"body"元素下的所有p元素

parent>child:查找某个父元素下的直接子元素，比如：可以用div.content>p查找p元素，也可以用body>*查找body标签下所有直接子元素

siblingA+siblingB:查找在A元素之前第一个同级元素B，比如：div.head+div。

在操作S502，根据上述当前网页文件的网页地址信息和上述元素信息进行运算，生成每个元素对应的元素标识。

例如，将网页地址信息的哈希值和元素信息的哈希值进行加和运算的结果作为元素标识。元素标识例如为元素ID(Element ID)，元素ID＝hash(网页地址信息)+hash(元素信息)。即，将上述网页地址信息和上述各个元素的元素信息的哈希值进行拼接，生成每个元素对应的元素标识。

元素信息可以是元素的至少一个维度的属性信息，包括但不限于是：元素的名称、元素所占内存空间的大小、元素的存放路径、元素的内容信息等。

在操作S503，将上述一个或多个网页文件中的元素基于元素标识进行存储，得到存储后的网页元素。

在操作S504，将上述一个或多个网页文件所包含的元素替换为对应的元素标识，得到背景网页文件。

将html文件中的元素删除，并在元素的位置放上对应的元素标识，由此实现了元素向元素标识的替换。通过将原来网页文件中的元素内容删除并加上原元素对应的元素标识(Element ID)，这样，最终得到的网页文件就成了一个不包含任何元素的背景网页文件。

根据本公开的实施例，上述操作S501中，对当前网页文件进行解析，得到当前网页文件包含的各个元素的元素信息之外，还包括：根据上述语法解析结果，得到当前网页文件包含的各个元素的加载位置信息。即，对网页文件部署包中一个或多个文件进行解析后除了得到各个元素的元素信息之外，还可以得到各个元素的加载位置信息。上述加载位置信息用于限定元素在网页中的加载位置。

这种情况下，对应于第一个实施例的操作S205在具体实施时，根据上述待加载元素的加载位置信息，将上述目标元素在上述基础网页中对应进行加载和显示，得到目标网页。

图5B示意性示出了根据本公开另一实施例的操作S402的详细实施流程图。

根据本公开的另一种实施例，上述操作S402除了包括上述操作S501～S504之外，还包括以下操作：S511和S512。

在操作S511，确定上述当前网页文件包含的元素的总个数信息。

在操作S512，将上述总个数信息写入至上述背景网页文件的头文件。

操作S511可以在上述操作S501之后执行，根据解析结果，可以确定网页文件所包含的元素的总个数信息。

操作S512可以在操作S504之后执行，例如针对特定网页文件解析得到的元素的总个数信息写入至该特定网页所对应的背景网页文件的头(head)文件中。

针对包含操作S511和S512的网页数据处理的方法，在第一个实施例的网页数据处理的方法的实施例中，操作S204的详细实施过程可以包括操作S301、S302和S303，进一步通过多线程加载目标元素的方式来提升网页加载速度。

下面结合图6A和图6B来描述整体信息流和终端设备与服务器的智能部署平台之间的交互过程。

图6A示意性示出了根据本公开实施例的网页数据处理的方法中前端显示设备侧和后端服务侧之间的交互过程示意图；图6B示意性示出了根据本公开实施例的网页数据处理的方法的实施场景示意图。

参照图6A所示，当前端开发人员在软件开发设备上完成网页开发后，将开发完成的软件项目打包后上传，相应的，在服务器的智能部署平台接收到网页文件部署包(对应于操作S401)。智能部署平台对上述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素(对应于操作S402)，并将拆分后的背景网页文件进行发布。用户(应用或者网站的使用者)通过发布的信息可以获取到想要访问的网页的网页地址信息，通过在终端设备上输入网页地址信息发起网页访问请求。相应的，终端设备接收网页访问请求(对应于操作S201)，并根据上述网页访问请求，从服务器获取目标网页文件(对应于操作S202)，参照图6B所示，此时终端设备的显示界面如图6B中的I_A所示。相应的，智能部署平台当接收到终端设备请求获取目标网页文件的网页访问请求时，将对应的背景网页文件发送给上述终端设备(对应于操作S403)。终端设备的H5容器根据根据背景网页文件中的背景页面信息进行显示，得到基础网页(对应于操作S203)，显示界面从I_A更新为I_B，参照图6B所示，I_B作为即时显示的基础网页，其对应根据预设的样式信息(图案、颜色、填充、尺寸等)进行呈现，这里以全部采用灰色填充、底部具有波浪条纹的样式进行基础网页的示意。接着，为了提升加载效率，终端设备进一步根据目标网页文件中的元素标识，采用多线程的方式来请求获取目标元素(对应于操作S204)，这种状态下对应的终端设备的显示界面更新为I_C，实际上在尚未接收到目标元素的等待过程中显示界面I_C的呈现效果为基础网页I_B的显示效果。相应的，智能部署平台当接收到上述终端设备请求获取目标元素的元素获取请求时，将对应的网页元素发送给上述终端设备(对应于操作S404)。终端设备会将获取到的目标元素整合至基础网页中进行显示，当所有的目标元素均整合完毕后，实现目标网页的正常显示(对应于操作S205)，每获取到新的元素，就将该元素在原先的界面中进行整合并更新显示界面，例如在图6B中示例的按照时间先后顺序获得的目标元素包括：标题栏和图片S→文本框M→按钮元素B，对应得到的显示界面为I_D、I_E和I_F，最后得到的目标网页为I_F。元素获取的时间很短(一般在毫秒～秒级别)，基本对于用户而言是无感知的，实现了页面的快速且正常显示，有效解决了白屏显示的技术问题。其中，各个元素返回的先后顺序取决于元素的大小(占据空间的大小)、服务器的响应速度、服务器的资源调度情况以及网络状态等。

本公开的第三个示例性实施例提供了一种网页数据处理的装置。

图7示意性示出了根据本公开实施例的网页数据处理的装置的结构框图。

参照图7所示，本公开实施例提供的网页数据处理的装置700包括：请求接收模块701、网页文件获取模块702、显示模块703和元素获取模块704。上述网页显示的装置700可以是终端设备。

上述请求接收模块701用于接收网页访问请求。

上述网页文件获取模块702用于根据上述网页访问请求，从服务器获取目标网页文件，上述目标网页文件携带的信息包括：背景页面信息，待加载元素的元素标识。

上述显示模块703用于根据上述背景页面信息进行显示，得到基础网页。

上述元素获取模块704用于根据上述待加载元素的元素标识，从上述服务器获取对应的目标元素。

上述显示模块703还用于将上述目标元素在上述基础网页中进行加载和显示，得到目标网页。

本公开的第四个示例性实施例提供了一种网页数据处理的装置。

图8示意性示出了根据本公开实施例的网页数据处理的装置的结构框图。

参照图8所示，本公开实施例提供的网页数据处理的装置800包括：部署包接收模块801、拆分处理模块802、文件发送模块803和元素发送模块804。上述处理处理的装置800可以是传统的应用服务器或者云服务器。

上述部署包接收模块801用于接收网页文件部署包。

上述拆分处理模块802用于对上述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素。其中上述背景网页文件携带的信息包括：背景页面信息，待加载元素的元素标识。

上述文件发送模块803用于在接收到终端设备请求获取目标网页文件的网页访问请求的情况下，将对应的背景网页文件发送给上述终端设备。

上述元素发送模块804用于在接收到上述终端设备请求获取目标元素的元素获取请求的情况下，将对应的网页元素发送给上述终端设备。

上述第三个实施例中，请求接收模块701、网页文件获取模块702、显示模块703和元素获取模块704中的任意多个可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。请求接收模块701、网页文件获取模块702、显示模块703和元素获取模块704中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，请求接收模块701、网页文件获取模块702、显示模块703和元素获取模块704中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

上述第四个实施例中，部署包接收模块801、拆分处理模块802、文件发送模块803和元素发送模块804中的任意多个可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。部署包接收模块801、拆分处理模块802、文件发送模块803和元素发送模块804中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，部署包接收模块801、拆分处理模块802、文件发送模块803和元素发送模块804中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

本公开的第五个示例性实施例提供了一种电子设备。

图9示意性示出了本公开实施例提供的电子设备的结构框图。

参照图9所示，本公开实施例提供的电子设备900包括处理器901、通信接口902、存储器903和通信总线904，其中，处理器901、通信接口902和存储器903通过通信总线904完成相互间的通信；存储器903，用于存放计算机程序；处理器901，用于执行存储器上所存放的程序时，实现如上所述的网页数据处理的方法。

本公开的第六个示例性实施例还提供了一种计算机可读存储介质。上述计算机可读存储介质上存储有计算机程序，上述计算机程序被处理器执行时实现如上所述的网页数据处理的方法。

该计算机可读存储介质可以是上述实施例中描述的设备/装置中所包含的；也可以是单独存在，而未装配入该设备/装置中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

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

以上所述仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。

Claims (14)

1.一种网页数据处理的方法，其特征在于，包括：

接收网页访问请求；

根据所述网页访问请求，从服务器获取目标网页文件，所述目标网页文件携带的信息包括：背景页面信息，待加载元素的元素标识；

根据所述背景页面信息进行显示，得到基础网页；

根据所述待加载元素的元素标识，从所述服务器获取对应的目标元素；以及

将所述目标元素在所述基础网页中进行加载和显示，得到目标网页。

2.根据权利要求1所述的方法，其特征在于，所述目标网页文件还携带有：待加载元素的总个数信息；

其中，所述根据所述待加载元素的元素标识，从所述服务器获取对应的目标元素，包括：

根据所述待加载元素的总个数信息，创建多个线程；

为所述多个线程分配各自对应的待加载元素的元素标识，得到对应关系；

基于所述对应关系，各个线程根据各自对应的待加载元素的元素标识，从所述服务器获取各自对应的目标元素。

3.根据权利要求1所述的方法，其特征在于，所述目标网页文件携带的信息还包括：待加载元素的加载位置信息；

其中，所述将所述目标元素在所述基础网页中进行加载和显示，得到目标网页，包括：

根据所述待加载元素的加载位置信息，将所述目标元素在所述基础网页中对应进行加载和显示，得到目标网页。

4.根据权利要求1所述的方法，其特征在于，所述元素标识是根据网页地址信息和元素信息进行运算后生成的用于区分各个元素的唯一标识。

5.一种网页数据处理的方法，其特征在于，包括：

接收网页文件部署包；

对所述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素；其中所述背景网页文件携带的信息包括：背景页面信息，待加载元素的元素标识；

当接收到终端设备请求获取目标网页文件的网页访问请求时，将对应的背景网页文件发送给所述终端设备；

当接收到所述终端设备请求获取目标元素的元素获取请求时，将对应的网页元素发送给所述终端设备。

6.根据权利要求5所述的方法，其特征在于，所述对所述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素，包括：

针对所述网页文件部署包中的一个或多个网页文件中的每个网页文件，对当前网页文件进行解析，得到当前网页文件包含的各个元素的元素信息；

根据所述当前网页文件的网页地址信息和所述元素信息进行运算，生成每个元素对应的元素标识；

将所述一个或多个网页文件中的元素基于元素标识进行存储，得到存储后的网页元素；

将所述一个或多个网页文件所包含的元素替换为对应的元素标识，得到背景网页文件。

7.根据权利要求6所述的方法，其特征在于，所述对当前网页文件进行解析，得到当前网页文件包含的各个元素的元素信息，包括：

对所述当前网页文件进行代码语法解析，得到语法解析结果；

根据包含标签、名称或属性中至少一个的元素关键信息，在所述语法解析结果中逐行查找所述网页文件所包含的各个元素；

提取得到所述网页文件包含的所述各个元素的元素信息。

8.根据权利要求7所述的方法，其特征在于，所述对当前网页文件进行解析，得到当前网页文件包含的各个元素的元素信息之外，还包括：

根据所述语法解析结果，得到当前网页文件包含的各个元素的加载位置信息。

9.根据权利要求6所述的方法，其特征在于，所述根据所述当前网页文件的网页地址信息和所述元素信息进行运算，生成每个元素对应的元素标识，包括：

将所述网页地址信息和所述各个元素的元素信息的哈希值进行拼接，生成每个元素对应的元素标识。

10.根据权利要求6所述的方法，其特征在于，所述对所述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素，还包括：

确定所述当前网页文件包含的元素的总个数信息；

将所述总个数信息写入至所述背景网页文件的头文件。

11.一种网页数据处理的装置，其特征在于，包括：

请求接收模块，用于接收网页访问请求；

网页文件获取模块，用于根据所述网页访问请求，从服务器获取目标网页文件，所述目标网页文件携带的信息包括：背景页面信息，待加载元素的元素标识；

显示模块，用于根据所述背景页面信息进行显示，得到基础网页；

元素获取模块，用于根据所述待加载元素的元素标识，从所述服务器获取对应的目标元素；

所述显示模块，还用于将所述目标元素在所述基础网页中进行加载和显示，得到目标网页。

12.一种网页数据处理的装置，其特征在于，包括：

部署包接收模块，用于接收用户上传的网页文件部署包；

拆分处理模块，用于对所述网页文件部署包中的一个或多个网页文件进行元素和背景网页的拆分处理，得到背景网页文件和网页元素；其中所述背景网页文件携带的信息包括：背景页面信息，待加载元素的元素标识；

文件发送模块，用于在接收到终端设备请求获取目标网页文件的网页访问请求的情况下，将对应的背景网页文件发送给所述终端设备；

元素发送模块，用于在接收到所述终端设备请求获取目标元素的元素获取请求的情况下，将对应的网页元素发送给所述终端设备。

13.一种电子设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，处理器、通信接口和存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现权利要求1-10中任一项所述的方法。

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

Images