CN115935095A

CN115935095A - 页面的生成方法及装置、电子设备、存储介质

Info

Publication number: CN115935095A
Application number: CN202211478323.2A
Authority: CN
Inventors: 杨泽伟
Original assignee: Netease Hangzhou Network Co Ltd
Current assignee: Netease Hangzhou Network Co Ltd
Priority date: 2022-11-23
Filing date: 2022-11-23
Publication date: 2023-04-07

Abstract

本公开提供了一种页面的生成方法及装置、电子设备、存储介质，涉及前端交互领域。该页面的生成方法包括：读取原始页面中的目标页面元素，并提取目标页面元素关联的路由页面路径；依据路由页面路径确定预加载样式文件，其中，预加载样式文件包含路由页面路径下的静态资源地址；将一脚本文件植入原始页面生成目标页面。本公开实施例的技术方案可以解决页面的静态资源加载效率较低，导致用户体验较差的问题。

Description

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

背景技术

如今图片作为网站展示的重要部分，例如，通过懒加载的方式去加载页面资源时，在普通网络环境下，由于懒加载的方式滚动到当前可视区域才去加载当前区域的静态资源，使得该网站首屏渲染在加载后还存在大面积图片未加载完毕，等待大概一段时间后全部图片才加载完毕，此时点击跳转链接切换到其他页面，发现还存在该情况，仍需等待一段时间全部图片才加载完毕，很影响用户体验。

针对上述中对于页面的静态资源加载效率较低，导致用户体验较差的问题，目前尚未提出解决方案。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开实施例的目的在于提供一种页面的生成方法及装置、电子设备、存储介质，进而至少在一定程度上克服相关技术中针对页面的静态资源加载效率较低，导致用户体验较差的问题。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开实施例的第一方面，提供了一种页面的生成方法，包括：读取原始页面中的目标页面元素，并提取目标页面元素关联的路由页面路径；依据路由页面路径确定预加载样式文件，其中，预加载样式文件包含路由页面路径下的静态资源地址；将一脚本文件植入原始页面生成目标页面，其中，脚本文件用于获取目标页面在当前视窗内的目标页面元素关联的路由页面路径，并隐式加载与路由页面路径分别对应的预加载样式文件；以及，用于响应于监听到针对页面元素的悬浮事件，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所对应的静态资源。

在本公开的一些示例实施例中，基于前述方案，获取目标页面在当前视窗内的目标页面元素关联的路由页面路径包括：获取目标页面中的所有页面元素的文件路径；从所有页面元素的文件路径中获取路由页面路径。

在本公开的一些示例实施例中，基于前述方案，在获取目标页面在当前视窗内的目标页面元素关联的路由页面路径之后，方法还包括：确定路由页面路径包含的静态资源地址；构造静态资源地址所属的静态资源地址队列；将路由页面路径作为键值、静态资源地址队列作为键值对应的值存储至目标对象中。

在本公开的一些示例实施例中，基于前述方案，依据路由页面路径确定预加载样式文件包括：获取目标对象中的静态资源地址队列；将静态资源地址队列中的静态资源地址与预先配置的空节点进行拼接，得到预加载样式文件，其中，空节点的样式配置方式包括如下至少之一：将空节点左移出当前视窗、将空节点对应得图层为底层、将空节点的透明度设置为目标阈值。

在本公开的一些示例实施例中，基于前述方案，在响应于监听到针对页面元素的悬浮事件时，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所关联的静态资源包括：获取预加载样式文件定义的静态资源样式属性；根据样式属性隐式加载路由页面路径所关联的静态资源，并将静态资源存储至目标缓存中。

根据本公开实施例的第二方面，提供了一种页面的加载方法，包括：获取目标页面在当前视窗内的目标页面元素关联的路由页面路径；获取路由页面路径对应的预加载样式文件；其中，预加载样式文件包含路由页面路径下的静态资源地址；在监听到针对页面元素的悬浮事件时，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所关联的静态资源；在监听到针对页面元素的点击事件时，根据路由页面路径，跳转至目标页面元素对应的路由页面，并将静态资源加载至路由页面。

在本公开的一些示例实施例中，基于前述方案，获取路由页面路径对应的预加载样式文件包括：若检测到目标页面的超文本标记语言中包括样式加载标签，则通过样式加载标签调用路由页面路径对应的预加载样式文件，其中，预加载样式文件包含预先定义的静态资源样式属性；若检测到目标页面的超文本标记语言中不包括样式加载标签，则创建目标样式加载标签，并通过目标样式加载标签调用预加载样式文件。

在本公开的一些示例实施例中，基于前述方案，在监听到针对页面元素的点击事件时，根据路由页面路径，跳转至目标页面元素对应的路由页面，并将静态资源加载至路由页面包括：从目标缓存库中获取静态资源；对静态资源进行渲染操作，得到渲染后的页面信息，并将渲染后的页面信息在路由页面中进行显示。

根据本公开实施例的第三方面，提供了一种页面的生成装置，包括：读取单元，用于读取原始页面中的目标页面元素，并提取目标页面元素关联的路由页面路径；第一确定单元，用于依据路由页面路径确定预加载样式文件，其中，预加载样式文件包含路由页面路径下的静态资源地址；处理单元，用于将一脚本文件植入原始页面生成目标页面，其中，脚本文件用于获取目标页面在当前视窗内的目标页面元素关联的路由页面路径，并隐式加载与路由页面路径分别对应的预加载样式文件；以及，用于响应于监听到针对页面元素的悬浮事件，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所对应的静态资源。

根据本公开实施例的第四方面，提供了一种电子设备，包括：处理器；以及存储器，存储器上存储有计算机可读指令，计算机可读指令被处理器执行时实现上述任意一项的页面的生成方法。

根据本公开实施例的第五方面，提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现根据上述任意一项的页面的生成方法。

本公开实施例提供的技术方案可以包括以下有益效果：

本公开的示例实施例中的页面的生成方法，通过读取原始页面中的目标页面元素，并提取目标页面元素关联的路由页面路径；依据路由页面路径确定预加载样式文件，其中，预加载样式文件包含路由页面路径下的静态资源地址；将一脚本文件植入原始页面生成目标页面，其中，脚本文件用于获取目标页面在当前视窗内的目标页面元素关联的路由页面路径，并隐式加载与路由页面路径分别对应的预加载样式文件；以及，用于响应于监听到针对页面元素的悬浮事件，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所对应的静态资源。一方面，依据路由页面路径确定预加载样式文件，使得静态资源加载可以预先加载，防止网页大面积留白的情况发生，另一方面，将一脚本文件植入原始页面生成目标页面，可以使得在目标页面跳转至路由页面时，根据脚本文件调用静态资源，提升了对页面静态资源的加载效率，解决了相关技术中针对页面的静态资源加载效率较低，导致用户体验较差的问题。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1示意性示出了根据本公开的一些实施例的页面的生成方法的示意图；

图2示意性示出了根据本公开的一些实施例的文件路径查找的示意图；

图3示意性示出了根据本公开的一些实施例的交叉行为的示意图；

图4示意性示出了根据本公开的一些实施例的悬浮行为的示意图；

图5示意性示出了根据本公开的一些实施例的页面的加载方法的示意图；

图6示意性示出了根据本公开的一些实施例的页面的生成装置的示意图；

图7示意性示出了根据本公开的一些实施例的电子设备的计算机系统的结构示意图；

图8示意性示出了根据本公开的一些实施例的计算机可读存储介质的示意图。

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本公开的各方面。

此外，附图仅为示意性图解，并非一定是按比例绘制。附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

在本示例实施例中，首先提供了一种页面的生成方法，该页面的生成方法可以应用于终端设备，例如手机、电脑等电子设备。本公开以终端设备的电脑客户端为执行主体为例展开说明，但并不限于该限定。图1示意性示出了根据本公开的一些实施例的页面的生成方法流程的示意图。参考图1所示，该页面的生成方法可以包括以下步骤：

步骤S110，读取原始页面中的目标页面元素，并提取目标页面元素关联的路由页面路径。

具体的，原始页面可以是相关运维人员开始实施的页面，例如，原始页面可以是域名为www.xxx.com对应的页面，通过对该原始页面的页

面脚本进行处理，获取到本公开后续所需要的目标页面；假设原始页面5中包括“首页”、“个人页”、“授权页”等页面元素信息，则将该首页”、

“个人页”、“授权页”之一可以作为本公开中的目标页面元素，当然，目标页面元素也可以是其他域名页面对应的图片内容，本公开并不作此限定，再比如，当鼠标点击目标页面元素中的个人页时，一般来说，原

始页面就会跳转至个人页对应的页面中，将其中的跳转路径作为本公开0中的路由页面的文件路径(也即本公开中的路由页面路径)，当然，该路

由页面路径也可以是其他目标页面元素的如“授权页”的路由页面的文件路径，本公开也并不作此限定。

步骤S120，依据路由页面路径确定预加载样式文件，其中，预加载样式文件包含路由页面路径下的静态资源地址。

5具体的，将路由页面路径配置预加载样式文件作为本公开的发明点

之一，可以有效解决跳转页面(对应于本公开中的路由页面)的加载效率，其中，预加载样式文件可以是通过对页面的样式进行配置的页面。

在本公开的一种示例性实施例中，基于前述方案，获取目标页面在

当前视窗内的目标页面元素关联的路由页面路径包括：获取目标页面中0的所有页面元素的文件路径；从所有页面元素的文件路径中获取路由页

面路径。

步骤S130，将一脚本文件植入原始页面生成目标页面，其中，脚本文件用于获取目标页面在当前视窗内的目标页面元素关联的路由页

面路径，并隐式加载与路由页面路径分别对应的预加载样式文件；以5及，用于响应于监听到针对页面元素的悬浮事件，基于预加载样式文

件，隐式加载预加载样式文件包含的路由页面路径所对应的静态资源。

例如，在开发阶段，在依据路由页面路径确定预加载样式文件之后，在运维人员通过封装网站的预加载脚本文件，将该脚本文件插入至域名

为www.xxx.com对应的原始页面的网站入口HTML文件中，得到目标0页面；在应用阶段，用户通过对目标页面中的脚本进行调用，可以有效的提升对页面的加载效率。

具体的，对于上述步骤S110-S130进行详细说明：

在本公开的一种示例性实施例中，基于前述方案，取目标页面在当前视窗内的目标页面元素的路由页面路径包括：获取目标页面中的所有页面元素的文件路径；从所有页面元素的文件路径中获取路由页面路径。

例如，如图2所示，路由页面通常在根目录的src文件夹中使用views文件夹或pages文件夹包括，当然也可自定义放置路由页面的文件夹。假设路由页面的分布如图2所示，使用NodeJS的Fs模块处理所有路由页面相关文件，使用readdirSync函数读取views文件夹中每个路由页面的文件路径(相当于本公开中的路由页面路径，下同)。通过对路由页面路径的获取，有效的提升了对应用层级页面的加载效率，进一步也提升了用户的产品体验。

在本公开的一种示例性实施例中，基于前述方案，在获取目标页面在当前视窗内的目标页面元素关联的路由页面路径之后，方法还包括：确定路由页面路径包含的静态资源地址；构造静态资源地址所属的静态资源地址队列；将路由页面路径作为键值、静态资源地址队列作为键值对应的值存储至目标对象中。

举例而言，如图2所示，得到目标页面元素的路由页面的路由页面路径之后，再使用readFileSync函数单独处理每个文件路径并读取文件内容，再通过静态资源URL正则表达式匹配出所有相关静态资源URL(对应于本公开中的静态资源地址)。这些URL通常以图像形式(.jpg、.png、.gif、.webp等)、音频形式(.mp3等)、视频形式(.mp4等)、字体形式(.ttf等)等形式结尾，通过正则表达式提取出所有符合的URL之后，并创建一个静态资源地址队列A存放这些URL，整个页面处理完毕将该队列以键值对的形式挂载到目标对象O中，其中，目标对象O的键为该路由页面的文件路径，值为静态资源地址队列A。直至遍历完毕所有路由页面。其中，本公开中的静态资源地址可以通过如下正则表达式得到：/”(.+？)\.(jpg|png|gif|webp|mp3|mp4|ttf)”/g，通过对静态资源地址的获取，有效的提升了对应用层级静态资源的加载效率，进一步也提升了用户的产品体验。

以下拿目标页面元素中首页/、授权页/auth、个人页/mine举例，使用JavaScript代码演示举例。

具体的，首页代码实现可以为以下：

具体的，授权页/auth代码实现可以为以下：

具体的，个人页/mine代码实现可以为以下：

</div>

5</div>

</body>

</html>

通过上述方式将三个路由页面的静态资源URL抽离出来并组装为目标对象O，其中，目标对象O的形式使用JSON表示如下：

在本公开的一种示例性实施例中，基于前述方案，依据路由页面路径确定预加载样式文件包括：获取目标对象中的静态资源地址队列；将静态资源地址队列中的静态资源地址与预先配置的空节点进行拼接，得到预加载样式文件，其中，空节点的样式配置方式包括如下至少之一：将空节点左移出当前视窗、将空节点对应得图层为底层、将空节点的透明度设置为目标阈值。

举例而言，对目标对象O进行样式拼接处理，拼接规则如下。以每个路由页面对应静态资源URL为一组，使用一个空节点装载并声明其background的多重url()拼接这每条URL，再声明绝对定位使该空节点移出浏览器可视区域并隐藏起来。

根据O的组成，最终会生成三个CSS样式文件，对应首页/、授权页/auth和个人页/mine。以下以配置授权页中的静态资源地址队列的CSS样式文件(对应于本公开中的预加载样式文件)为例进行描述。

具体的，在html标签中声明伪元素::after为一个空载节点(对应于本公开中的空节点)，声明该空载节点left:100％使其移出当前视窗，声明z-index:-1使其隐藏到正常图层下，声明opcity:0使其透明度为目标阈值0，三种声明方式最大化使空载节点隐藏起来让用户无从发现，通过background-image的url()隐式加载路由页面所有静态资源，这些资源提前加载进来时并不会显示，当后续进入页面时遇到相同静态资源URL会从之前加载的缓存中读取并显示，省略了后续加载过程，通过对空载节点的样式进行配置，进一步提升了对路由页面的隐式加载效率。

例如，将上述示例的静态资源地址与预先配置的空节点进行拼接，得到预加载样式文件的代码可以如下表示：

html[class^＝pre-res]::after{

position:absolute；

Left:100％；

top:0；

z-index:-1；

opacity:0；

width:0；

height:0；

在本公开的一种示例性实施例中，基于前述方案，在响应于监听到针对页面元素的悬浮事件时，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所关联的静态资源包括：获取预加载样式文件定义的静态资源样式属性；根据样式属性隐式加载路由页面路径所关联的静态资源，并将静态资源存储至目标缓存中。

举例而言，在监听到针对页面元素的悬浮事件中提前隐式加载这个CSS样式文件，样式文件中会加载这些静态资源URL，加载完毕会保存到浏览器内存(对应于本公开中的目标缓存中)中。当正式进入该路由页面时，在解析HTML/CSS/JS文件时遇到相同URL会直接从浏览器内存中读取并显示，因此不存在页面大面积空白的情况，提升页面加载效率的同时，也提升了用户体验。

需要说明的是预加载样式文件生成后会随着打包流程发布到服务器并拥有自己的URL。假设这些预加载样式文件的URL前缀是https://XXX.com/battle/css，可通过以下方式访问：

“首页：https://XXX.com/battle/css/pre-res.css；

授权页：https://XXX.com/battle/css/pre-res-auth.css；

个人页：https://XXX.com/battle/css/pre-res-mine.css。”

没有列出来的路由页面也同样处理，在此不再讲述。

最后，将步骤S130中的脚本文件插入到网站入口HTML文件中，其中，该脚本文件用于监控用户操作行为并在预设情况下触发路由页面静态资源预加载。脚本文件以JavaScript的方式编写。具体的操作代码如下所示：

获取所有a标签

上述代码的解释为：

1、读取当前页面所有具备路由页面特征的a标签并将其组成一个队列(routes)。

2、定义DOM交叉行为的观察对象：例如，如图3所示，当前视窗开启时，可以使用IntersectionObserver监听窗口上方与页面元素31、页面元素32、页面元素33任意一个发生接触时触发交叉事件，获取该元素的href属性(route)，该属性就是路由页面的跳转路径，将其拼接为路由页面对应CSS样式文件(对应于本公开中的预加载样式文件)。

3、定义DOM鼠标悬浮行为的监听对象：例如，如图4所示，当鼠标经过且未点击的页面元素42上方时触发悬浮行为时，动态获取当前页面所有已加载完毕的link标签(用于加载CSS样式文件)，判断styleLink是否存在，否则动态创建一个link标签用于加载styleLink对应的CSS样式文件，当然，当鼠标经过且未点击的页面元素41或者页面元素43时，触发悬浮行为的操作步骤与鼠标经过且未点击的页面元素42原理类似，此处不进行详述。

4、创建观察对象与监听对象完毕，直接绑定routes。

5、最后将该脚本文件插入到网站的入口HTML文件中，得到本公开中的目标页面。

综上，本公开的示例实施例中的页面的生成方法，通过读取原始页面中的目标页面元素，并提取目标页面元素关联的路由页面路径；依据路由页面路径确定预加载样式文件，其中，预加载样式文件包含路由页面路径下的静态资源地址；将一脚本文件植入原始页面生成目标页面，其中，脚本文件用于获取目标页面在当前视窗内的目标页面元素关联的路由页面路径，并隐式加载与路由页面路径分别对应的预加载样式文件；以及，用于响应于监听到针对页面元素的悬浮事件，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所对应的静态资源。一方面，依据路由页面路径确定预加载样式文件，使得静态资源加载可以预先加载，防止网页大面积留白的情况发生，另一方面，将一脚本文件植入原始页面生成目标页面，可以使得在目标页面跳转至路由页面时，根据脚本文件调用静态资源，提升了对页面静态资源的加载效率，解决了相关技术中针对页面的静态资源加载效率较低，导致用户体验较差的问题。

根据本示例实施例的另一方面，还提供了一种页面的加载方法，如图5所示，包括：

步骤S510：获取目标页面在当前视窗内的目标页面元素关联的路由页面路径。

步骤S520：获取路由页面路径对应的预加载样式文件；其中，预加载样式文件包含路由页面路径下的静态资源地址。

步骤S530：在监听到针对页面元素的悬浮事件时，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所关联的静态资源。

步骤S540：在监听到针对页面元素的点击事件时，根据路由页面路径，跳转至目标页面元素对应的路由页面，并将静态资源加载至路由页面。

在本公开的一种示例性实施例中，基于前述方案，获取路由页面路径对应的预加载样式文件包括：若检测到目标页面的超文本标记语言中包括样式加载标签，则通过样式加载标签调用路由页面路径对应的预加载样式文件，其中，预加载样式文件包含预先定义的静态资源样式属性；若检测到目标页面的超文本标记语言中不包括样式加载标签，则创建目标样式加载标签，并通过目标样式加载标签调用预加载样式文件。

举例而言，定义DOM鼠标悬浮行为的监听对象：当目标元素触发鼠标悬浮行为时，动态获取当前页面所有已加载完毕的link标签(对应于本公开中的样式加载标签)(用于加载CSS样式文件)，在检测到目标页面的超文本标记语言中不包括样式加载标签时，动态创建一个link标签(对应于本公开中的目标样式加载标签)用于加载styleLink对应的CSS样式文件，通过对样式加载标签的实时创建，提升了路由页面的加载效率。

在本公开的一种示例性实施例中，基于前述方案，在监听到针对页面元素的点击事件时，根据路由页面路径，跳转至目标页面元素对应的路由页面，并将静态资源加载至路由页面包括：从目标缓存库中获取静态资源；对静态资源进行渲染操作，得到渲染后的页面信息，并将渲染后的页面信息在路由页面中进行显示。

根据上述步骤可知，在应用层级，用户打开页面时，当前视窗的具备路由页面特征的a标签会触发交叉行为，若用户通过鼠标悬浮在某个a标签时，又会触发鼠标悬浮行为，此时就会加载对应CSS样式文件，该文件包含该路由页面所有静态资源URL，这些URL会在浏览器内存中加载完毕并存储下来。当用户真的点击该路由页面并跳转进去，页面的静态资源在渲染时就会直接从浏览器内存中找到对应副本立马渲染，得到渲染后的页面信息，从而避免了页面出现大面积空白的可能，当用户并没有点击该路由页面，那生成的静态资源保存在浏览器内存中可随时被使用起来，若长期不被使用则会被浏览器垃圾回收机制清理，也不会影响浏览器的渲染进程与执行进程。

综上，本公开的示例实施例中的页面的生成方法，通过获取目标页面在当前视窗内的目标页面元素关联的路由页面路径；获取路由页面路径对应的预加载样式文件；其中，预加载样式文件包含路由页面路径下的静态资源地址；在监听到针对页面元素的悬浮事件时，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所关联的静态资源；在监听到针对页面元素的点击事件时，根据路由页面路径，跳转至目标页面元素对应的路由页面，并将静态资源加载至路由页面。一方面，依据路由页面路径确定预加载样式文件，使得静态资源加载可以预先加载，防止网页大面积留白的情况发生，另一方面，将一脚本文件植入原始页面生成目标页面，可以使得在目标页面跳转至路由页面时，根据脚本文件调用静态资源，提升了对页面静态资源的加载效率，解决了相关技术中针对页面的静态资源加载效率较低，导致用户体验较差的问题。

需要说明的是，上述中页面的加载方法的具体细节已经在对应的页面的生成方法中进行了详细的描述，因此此处不再赘述。

需要说明的是，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

此外，在本示例实施例中，还提供了一种页面的生成装置。参照图6所示，该页面的生成装置包括：读取单元610、第一确定单元620、读取单元610，处理单元630。具体的，

读取单元610，用于读取原始页面中的目标页面元素，并提取目标页面元素关联的路由页面路径；

第一确定单元620，用于依据路由页面路径确定预加载样式文件，其中，预加载样式文件包含路由页面路径下的静态资源地址；

处理单元630，用于将一脚本文件植入原始页面生成目标页面，其中，脚本文件用于获取目标页面在当前视窗内的目标页面元素关联的路由页面路径，并隐式加载与路由页面路径分别对应的预加载样式文件；以及，用于响应于监听到针对页面元素的悬浮事件，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所对应的静态资源。

综上，本公开的示例实施例中的页面的生成方法，通过读取单元610读取原始页面中的目标页面元素，并提取目标页面元素关联的路由页面路径；第一确定单元620依据路由页面路径确定预加载样式文件，其中，预加载样式文件包含路由页面路径下的静态资源地址；处理单元630将一脚本文件植入原始页面生成目标页面，其中，脚本文件用于获取目标页面在当前视窗内的目标页面元素关联的路由页面路径，并隐式加载与路由页面路径分别对应的预加载样式文件；以及，用于响应于监听到针对页面元素的悬浮事件，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所对应的静态资源。一方面，依据路由页面路径确定预加载样式文件，使得静态资源加载可以预先加载，防止网页大面积留白的情况发生，另一方面，将一脚本文件植入原始页面生成目标页面，可以使得在目标页面跳转至路由页面时，根据脚本文件调用静态资源，提升了对页面静态资源的加载效率，解决了相关技术中针对页面的静态资源加载效率较低，导致用户体验较差的问题。

在本公开的一种示例性实施例中，基于前述方案，处理单元包括：第一获取模块，用于获取目标页面中的所有页面元素的文件路径；第二获取模块，用于从所有页面元素的文件路径中获取路由页面路径。

在本公开的一种示例性实施例中，基于前述方案，装置还包括：第二确定单元，用于在获取目标页面在当前视窗内的目标页面元素关联的路由页面路径之后，确定路由页面路径包含的静态资源地址；构造单元，用于构造静态资源地址所属的静态资源地址队列；第三确定单元，用于将路由页面路径作为键值、静态资源地址队列作为键值对应的值存储至目标对象中。

在本公开的一种示例性实施例中，基于前述方案，第一确定单元包括：第三获取模块，用于获取目标对象中的静态资源地址队列；拼接模块，用于将静态资源地址队列中的静态资源地址与预先配置的空节点进行拼接，得到预加载样式文件，其中，空节点的样式配置方式包括如下至少之一：将空节点左移出当前视窗、将空节点对应得图层为底层、将空节点的透明度设置为目标阈值。

在本公开的一种示例性实施例中，基于前述方案，处理单元包括：第四获取模块，用于获取预加载样式文件定义的静态资源样式属性；存储模块，用于根据样式属性隐式加载路由页面路径所关联的静态资源，并将静态资源存储至目标缓存中。

上述中页面的生成装置各模块的具体细节已经在对应的页面的生成方法中进行了详细的描述，因此此处不再赘述。

应当注意，尽管在上文详细描述中提及了页面的生成装置的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，在本公开的示例性实施例中，还提供了一种能够实现上述页面的生成方法的电子设备。

所属技术领域的技术人员能够理解，本公开的各个方面可以实现为系统、方法或程序产品。因此，本公开的各个方面可以具体实现为以下形式，即：完全的硬件实施例、完全的软件实施例(包括固件、微代码等)，或硬件和软件方面结合的实施例，这里可以统称为“电路”、“模块”或“系统”。

下面参照图7来描述根据本公开的这种实施例的电子设备700。图7所示的电子设备700仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图7所示，电子设备700以通用计算设备的形式表现。电子设备700的组件可以包括但不限于：上述至少一个处理单元710、上述至少一个存储单元720、连接不同系统组件(包括存储单元720和处理单元710)的总线730、显示单元740。

其中，存储单元存储有程序代码，程序代码可以被处理单元710执行，使得处理单元710执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施例的步骤。例如，处理单元710可以执行如图1中所示的步骤S110，读取原始页面中的目标页面元素，并提取目标页面元素关联的路由页面路径；步骤S120依据路由页面路径确定预加载样式文件，其中，预加载样式文件包含路由页面路径下的静态资源地址；步骤S130，将一脚本文件植入原始页面生成目标页面，其中，脚本文件用于获取目标页面在当前视窗内的目标页面元素关联的路由页面路径，并隐式加载与路由页面路径分别对应的预加载样式文件；以及，用于响应于监听到针对页面元素的悬浮事件，基于预加载样式文件，隐式加载预加载样式文件包含的路由页面路径所对应的静态资源。

存储单元720可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)721和/或高速缓存存储单元722，还可以进一步包括只读存储单元(ROM)723。

存储单元520还可以包括具有一组(至少一个)程序模块725的程序/实用工具724，这样的程序模块725包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线730可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备700也可以与一个或多个外部设备770(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备700交互的设备通信，和/或与使得该电子设备700能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口750进行。并且，电子设备700还可以通过网络适配器760与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器760通过总线730与电子设备700的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备700使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施例的方法。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施例中，本公开的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在终端设备上运行时，程序代码用于使终端设备执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施例的步骤。

参考图8所示，描述了根据本公开的实施例的用于实现上述页面的生成方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本公开的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本公开操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，上述附图仅是根据本公开示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本公开实施例的方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施例。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims

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

读取原始页面中的目标页面元素，并提取所述目标页面元素关联的路由页面路径；

依据所述路由页面路径确定对应的路由页面的预加载样式文件，其中，所述预加载样式文件包含所述路由页面路径下的静态资源地址；

将一脚本文件植入所述原始页面生成目标页面；其中，所述脚本文件用于获取所述目标页面在当前视窗内的目标页面元素关联的路由页面路径，并隐式加载与所述路由页面路径分别对应的预加载样式文件；以及，用于响应于监听到针对所述页面元素的悬浮事件，基于所述预加载样式文件，隐式加载所述预加载样式文件包含的所述路由页面路径所对应的静态资源。

2.根据权利要求1所述的方法，其特征在于，获取所述目标页面在当前视窗内的所述目标页面元素关联的路由页面路径包括：

获取所述目标页面中的所有页面元素的文件路径；

从所述所有页面元素的文件路径中获取所述路由页面路径。

3.根据权利要求1所述的方法，其特征在于，在获取所述目标页面在当前视窗内的所述目标页面元素关联的路由页面路径之后，所述方法还包括：

确定所述路由页面路径包含的所述静态资源地址；

构造所述静态资源地址所属的静态资源地址队列；

将所述路由页面路径作为键值、所述静态资源地址队列作为所述键值对应的值存储至目标对象中。

4.根据权利要求3所述的方法，其特征在于，依据所述路由页面路径确定预加载样式文件包括：

获取所述目标对象中的所述静态资源地址队列；

将所述静态资源地址队列中的所述静态资源地址与预先配置的空节点进行拼接，得到所述预加载样式文件，其中，所述空节点的样式配置方式包括如下至少之一：将所述空节点左移出所述当前视窗、将所述空节点对应得图层为底层、将所述空节点的透明度设置为目标阈值。

5.根据权利要求4所述的方法，其特征在于，在响应于监听到针对所述页面元素的悬浮事件时，基于所述预加载样式文件，隐式加载所述预加载样式文件包含的所述路由页面路径所关联的静态资源包括：

获取所述预加载样式文件定义的静态资源样式属性；

根据所述样式属性隐式加载所述路由页面路径所关联的所述静态资源，并将所述静态资源存储至目标缓存中。

6.一种页面的加载方法，其特征在于，包括：

获取目标页面在当前视窗内的目标页面元素关联的路由页面路径；

获取所述路由页面路径对应的预加载样式文件；其中，所述预加载样式文件包含所述路由页面路径下的静态资源地址；

在监听到针对所述页面元素的悬浮事件时，基于所述预加载样式文件，隐式加载所述预加载样式文件包含的所述路由页面路径所关联的静态资源；

在监听到针对所述页面元素的点击事件时，根据所述路由页面路径，跳转至所述目标页面元素对应的路由页面，并将所述静态资源加载至所述路由页面。

7.根据权利要求6所述的方法，其特征在于，获取所述路由页面路径对应的预加载样式文件包括：

若检测到所述目标页面的超文本标记语言中包括样式加载标签，则通过所述样式加载标签调用所述路由页面路径对应的预加载样式文件，其中，所述预加载样式文件包含预先定义的静态资源样式属性；

若检测到所述目标页面的超文本标记语言中不包括样式加载标签，则创建目标样式加载标签，并通过所述目标样式加载标签调用所述预加载样式文件。

8.根据权利要求7所述的方法，其特征在于，在监听到针对所述页面元素的点击事件时，根据所述路由页面路径，跳转至所述目标页面元素对应的路由页面，并将所述静态资源加载至所述路由页面包括：

从目标缓存库中获取所述静态资源；

对所述静态资源进行渲染操作，得到渲染后的页面信息，并将所述渲染后的页面信息在所述路由页面中进行显示。

9.一种页面的生成装置，其特征在于，包括：

读取单元，用于读取原始页面中的目标页面元素，并提取所述目标页面元素关联的路由页面路径；

第一确定单元，用于依据所述路由页面路径确定预加载样式文件，其中，所述预加载样式文件包含所述路由页面路径下的静态资源地址；

处理单元，用于将一脚本文件植入所述原始页面生成目标页面，其中，所述脚本文件用于获取所述目标页面在当前视窗内的所述目标页面元素关联的路由页面路径，并隐式加载与所述路由页面路径分别对应的预加载样式文件；以及，用于响应于监听到针对所述页面元素的悬浮事件，基于所述预加载样式文件，隐式加载所述预加载样式文件包含的所述路由页面路径所对应的静态资源。

10.一种电子设备，包括：

处理器；以及

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现如权利要求1至8中任一项所述的页面的生成方法。

11.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至8中任一项所述的页面的生成方法。