页面展示方法、装置、电子设备及存储介质与流程

本公开涉及计算机技术领域，尤其涉及一种页面展示方法、装置、电子设备及存储介质。

背景技术：

在前端项目中有很多的静态资源，以图片为例，一般会将页面中的图片上传到cdn(contentdeliverynetwork，内容分发网络)平台上。这样在访问页面的时候，根据所使用到的图片不断地向cdn平台发送网络请求，请求获取图片。因此对于页面首屏中没有展示出来的图片，在需要展示时才从cdn平台获取，在网络条件较差的时候会出现屏幕闪现才加载出来，甚至没有加载等问题。

综上所述，图片等静态资源的加载依赖于是否需要展示，在网络条件较差的时候页面加载效率低，加载效果较差。

技术实现要素：

本公开提供一种页面展示方法、装置、电子设备及存储介质，以至少解决相关技术中页面加载效率低，加载效果较差的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种页面展示方法，包括：

在接收到对待展示的超文本标记语言页面的访问请求后，从内容分发网络获取所述超文本标记语言页面的层叠样式表文件；

根据从所述内容分发网络获取到的所述超文本标记语言页面对应的静态资源集合中的各个静态资源的地址信息，从所述内容分发网络获取各个静态资源的资源文件；

根据获取到的各个资源文件对应的地址信息，从获取到的各个资源文件中选取与所述层叠样式表文件中需要展示的静态资源的地址信息相同的资源文件；

基于获取到需要展示的静态资源的资源文件以及所述层叠样式表文件中与需要展示的静态资源相关的展示信息，展示包含需要展示的静态资源的超文本标记语言页面。

在一种可选的实施方式中，在所述根据从所述内容分发网络获取到的所述超文本标记语言页面对应的静态资源集合中的各个静态资源的地址信息，从所述内容分发网络获取各个静态资源的资源文件之前，还包括：

从所述内容分发网络中获取所述超文本标记语言页面的脚本语言文件；

所述根据从所述内容分发网络获取到的所述超文本标记语言页面对应的静态资源集合中的各个静态资源的地址信息，从所述内容分发网络获取各个静态资源的资源文件，具体包括：

根据所述静态资源集合中的各个静态资源的地址信息，以及所述脚本语言文件中用于获取静态资源的加载信息，从所述内容分发网络获取各个静态资源的资源文件。

在一种可选的实施方式中，所述根据所述静态资源集合中的各个静态资源的地址信息，以及所述脚本语言文件中用于获取静态资源的加载信息，从所述内容分发网络获取各个静态资源的资源文件，具体包括：

循环遍历所述静态资源集合中的地址信息，其中每遍历一个地址信息后都执行下列过程：

通过所述加载信息生成当前遍历的地址信息对应的实体对象，并根据所述地址信息定义src函数的属性信息后，通过所述src函数从所述内容分发网络获取所述地址信息对应的静态资源的资源文件。

在一种可选的实施方式中，所述根据获取到的各个资源文件对应的地址信息，从获取到的各个资源文件中选取与所述层叠样式表文件中需要展示的静态资源的地址信息相同的资源文件，具体包括：

根据所述层叠样式表文件确定所述超文本标记语言页面中当前需要展示的静态资源的地址信息；

根据预先获得的绑定关系中各个资源文件对应的地址信息，从获取到的各个资源文件中选取与所述层叠样式表文件中当前需要展示的静态资源的地址信息相同的资源文件，其中所述绑定关系为获取到的各个资源文件与各个静态资源的地址信息之间的绑定关系。

根据本公开实施例的第二方面，提供一种页面展示方法，包括：

在接收到终端设备发送的对待展示的超文本标记语言页面的访问请求后，获取与所述超文本标记语言页面对应的静态资源集合；

将所述静态资源集合发送给所述终端设备，以使所述终端设备根据所述静态资源集合中的各个静态资源的地址信息，从所述内容分发网络获取各个静态资源的资源文件后，根据所述资源文件展示所述超文本标记语言页面。

根据本公开实施例的第三方面，提供一种页面展示方法，包括：

遍历待展示的超文本标记语言页面的层叠样式表文件，获取所述层叠样式表文件包含的各个静态资源的地址信息；

通过webpack对获取到的各个静态资源的地址信息进行打包，生成所述超文本标记语言页面对应的静态资源集合，并将所述静态资源集合上传至内容分发网络，以使终端设备从所述内容分发网络获取所述静态资源集合后，根据所述静态资源集合中的各个静态资源的地址信息，从所述内容分发网络获取各个静态资源的资源文件，并根据所述资源文件展示所述超文本标记语言页面。

根据本公开实施例的第四方面，提供一种页面展示系统，包括：

终端设备，内容分发网络以及页面服务器；

所述终端设备，用于在接收到对待展示的超文本标记语言页面的访问请求后，从内容分发网络获取所述超文本标记语言页面的层叠样式表文件；根据从所述内容分发网络获取到的所述超文本标记语言页面对应的静态资源集合中的各个静态资源的地址信息，从所述内容分发网络获取各个静态资源的资源文件；根据获取到的各个资源文件对应的地址信息，从获取到的各个资源文件中选取与所述层叠样式表文件中需要展示的静态资源的地址信息相同的资源文件；基于获取到需要展示的静态资源的资源文件以及所述层叠样式表文件中与需要展示的静态资源相关的展示信息，展示包含需要展示的静态资源的超文本标记语言页面；

所述内容分发网络，用于在接收到所述终端设备发送的对待展示的超文本标记语言页面的访问请求后，获取与所述超文本标记语言页面对应的静态资源集合；将所述静态资源集合发送给所述终端设备；

所述页面服务器，用于遍历待展示的超文本标记语言页面的层叠样式表文件，获取所述层叠样式表文件包含的各个静态资源的地址信息；通过webpack对获取到的各个静态资源的地址信息进行打包，生成所述超文本标记语言页面对应的静态资源集合，并将所述静态资源集合上传至内容分发网络。

根据本公开实施例的第五方面，提供一种页面展示装置，包括：

第一获取单元，被配置为执行在接收到对待展示的超文本标记语言页面的访问请求后，从内容分发网络获取所述超文本标记语言页面的层叠样式表文件；

第二获取单元，被配置为执行根据从所述内容分发网络获取到的所述超文本标记语言页面对应的静态资源集合中的各个静态资源的地址信息，从所述内容分发网络获取各个静态资源的资源文件；

选取单元，被配置为执行根据获取到的各个资源文件对应的地址信息，从获取到的各个资源文件中选取与所述层叠样式表文件中需要展示的静态资源的地址信息相同的资源文件；

展示单元，被配置为执行基于获取到需要展示的静态资源的资源文件以及所述层叠样式表文件中与需要展示的静态资源相关的展示信息，展示包含需要展示的静态资源的超文本标记语言页面。

在一种可选的实施方式中，所述第一获取单元还被配置为执行：

在所述第二获取单元据从所述内容分发网络获取到的所述超文本标记语言页面对应的静态资源集合中的各个静态资源的地址信息，从所述内容分发网络获取各个静态资源的资源文件之前，从所述内容分发网络中获取所述超文本标记语言页面的脚本语言文件；

所述第二获取单元具体被配置为执行：

根据所述静态资源集合中的各个静态资源的地址信息，以及所述脚本语言文件中用于获取静态资源的加载信息，从所述内容分发网络获取各个静态资源的资源文件。

在一种可选的实施方式中，所述第二获取单元具体被配置为执行：

循环遍历所述静态资源集合中的地址信息，其中每遍历一个地址信息后都执行下列过程：

通过所述加载信息生成当前遍历的地址信息对应的实体对象，并根据所述地址信息定义src函数的属性信息后，通过所述src函数从所述内容分发网络获取所述地址信息对应的静态资源的资源文件。

在一种可选的实施方式中，所述选取单元具体被配置为执行：

根据所述层叠样式表文件确定所述超文本标记语言页面中当前需要展示的静态资源的地址信息；

根据预先获得的绑定关系中各个资源文件对应的地址信息，从获取到的各个资源文件中选取与所述层叠样式表文件中当前需要展示的静态资源的地址信息相同的资源文件，其中所述绑定关系为获取到的各个资源文件与各个静态资源的地址信息之间的绑定关系。

根据本公开实施例的第六方面，提供一种页面展示装置，包括：

查询单元，被配置为执行在接收到终端设备发送的对待展示的超文本标记语言页面的访问请求后，获取与所述超文本标记语言页面对应的静态资源集合；

发送单元，被配置为执行将所述静态资源集合发送给所述终端设备，以使所述终端设备根据所述静态资源集合中的各个静态资源的地址信息，从所述内容分发网络获取各个静态资源的资源文件后，根据所述资源文件展示所述超文本标记语言页面。

根据本公开实施例的第七方面，提供一种页面展示装置，包括：

遍历单元，被配置为执行遍历待展示的超文本标记语言页面的层叠样式表文件，获取所述层叠样式表文件包含的各个静态资源的地址信息；

打包单元，被配置为执行通过webpack对获取到的各个静态资源的地址信息进行打包，生成所述超文本标记语言页面对应的静态资源集合，并将所述静态资源集合上传至内容分发网络，以使终端设备从所述内容分发网络获取所述静态资源集合后，根据所述静态资源集合中的各个静态资源的地址信息，从所述内容分发网络获取各个静态资源的资源文件，并根据所述资源文件展示所述超文本标记语言页面。

根据本公开实施例的第八方面，提供一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现本公开实施例第一方面至第三方面中任一项所述的页面展示方法。

根据本公开实施例的第九方面，提供一种非易失性可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行本公开实施例第一方面至第三方面中任一项所述的页面展示方法。

根据本公开实施例的第十方面，提供一种计算机程序产品，当所述计算机程序产品在电子设备上运行时，使得所述电子设备执行实现本公开实施例上述第一方面至第三方面以及第一方面至第三方面任一可能涉及的方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

由于本公开实施例在接收到针对待展示的html(hypertextmarkuplanguage，超文本标记语言)页面的访问请求时，就基于从cdn平台获取到的静态资源集合，对html页面相关的各个静态资源进行预加载并缓存到本地缓存中，包括html页面首屏不需要展示的图片、字体包等资源，因此需要在html页面中展示各个静态资源时，即可直接从本地缓存中获取，而不需要再发送网络请求，从cdn平台请求获取静态资源。因此，本公开实施例保证了静态资源的预加载，避免出现页面白屏或者闪屏等问题，提高了页面展示的效率和展示效果。

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

附图说明

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

图1是根据一示例性实施例示出的一种应用场景的示意图；

图2是根据一示例性实施例示出的第一种页面展示方法的流程图；

图3a是根据一示例性实施例示出的第一种html页面的示意图；

图3b是根据一示例性实施例示出的第二种html页面的示意图；

图4是根据一示例性实施例示出的一种项目上线阶段的流程示意图；

图5是根据一示例性实施例示出的一种用户使用阶段的页面展示方法流程图的示意图；

图6是根据一示例性实施例示出的第二种页面展示方法的流程图；

图7是根据一示例性实施例示出的第三种页面展示方法的流程图；

图8是根据一示例性实施例示出的一种页面展示的完整方法的流程图；

图9是根据一示例性实施例示出的第一种页面展示装置的框图；

图10是根据一示例性实施例示出的第二种页面展示装置的框图；

图11是根据一示例性实施例示出的第三种页面展示装置的框图；

图12是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

下面对文中出现的一些词语进行解释：

1、本公开实施例中术语“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

2、本公开实施例中术语“电子设备”可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

3、本公开实施例中术语“webpack”，是一个javascript应用程序的模块打包器(modulebundler)，将有依赖关系的模块打包成静态资源。

4、本公开实施例中术语“静态资源”：当用户多次访问这个资源，资源的源代码永远不会改变的资源，例如图片、字体包等等。

5、本公开实施例中术语“css”，是一种用来表现html(标准通用标记语言的一个应用)或xml(extensiblemarkuplanguage，可扩展标记语言，是标准通用标记语言的一个子集)等文件样式的计算机语言。css(cascadingstylesheets，层叠样式表)不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。css能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

6、本公开实施例中术语“js(javascript，脚本语言)文件”是一种脚本，可以控制页面达到一些动态效果(控制页面行为的)；js是网页前台脚本，几乎所有网页效果都是js的功劳，如果没有js网页将变得呆板。jscript是一种解释型的、基于对象的脚本语言。在网页里使用，一般不能直接打开，只有配合网页使用，可以用dreamweaver(一种网页制作工具)来制作并打开此类型文件。

7、本公开实施例中术语“ajax(asynchronousjavascriptandxml，阿贾克斯)”，异步的javascript和xml，ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

8、本公开实施例中术语“浮层”，是指当用户初次进入页面或者在当前页面进行交互时，页面出现的临时视图，该视图用来显示提示信息。

9、本公开实施例中术语“弹窗”，是指打开网页、软件、手机app(application，应用程序)等的时候自动弹出的窗口，主要流行的弹出方式是快速进入网页游戏的快捷途径。

下面对本公开实施例的设计思想进行简要介绍：

在移动端页面的性能优化中，提升页面的显示速度是一项十分重要的事情，页面显示速度直接影响用户的使用体验，是页面性能的重要参考指标。然而在相关技术中，前端项目中的资源会非常多，例如图片、字体包等等。其中图片占了90％的比重，因此需要将其都上传到cdn平台上，而不是跟随代码一起存放到服务器上，也不是将图片编译成base64的形式保留在代码中。在兼容批量图片上传cdn平台的逻辑的情况下，图片的加载都是由浏览器判断，如果需要展示这张图片的时候，再向cdn平台发送网络请求，之后进行下载、引入、展示图片。

也就是说，相关技术中图片等静态资源的加载依赖于是否需要展示，例如在当前的html页面中需要弹出某个弹窗的时候，对于弹窗中需要展示的图片，都是在需要展示该弹窗时才从cdn平台获取。因此在网络条件较差的时候可能出现图片加载过慢，屏幕闪现，甚至图片没有加载等问题。

有鉴于此，本公开实施例提出了一种页面展示方法、装置、电子设备及存储介质。基于webpack打包，预先生成各个静态资源的地址信息组成的静态资源集合，在接收到针对待展示的html页面的展示请求时，即可根据静态资源集合中的各个静态资源的地址信息，从cdn平台预加载各个静态资源的资源文件，并保存到本地缓存中，需要在html页面中展示各个静态资源时，即可直接从本地缓存中获取，而不需要再发送网络请求，从cdn平台请求获取静态资源。在不改变批量上传静态资源的基础上，保证静态资源的正常加载，不出现闪现的图片，或者图片加载错误等问题，并且还提高了页面的显示速度。本公开实施例中基于webpack实现图片等静态资源的预加载，是一种通过webpack打包后将静态资源上传至cdn平台，在html中可以直接通过引入静态资源的映射文件，并将其进行预加载的一种方法。

本公开实施例描述的应用场景是为了更加清楚的说明本公开实施例的技术方案，并不构成对于本公开实施例提供的技术方案的限定，本领域普通技术人员可知，随着新应用场景的出现，本公开实施例提供的技术方案对于类似的技术问题，同样适用。其中，在本公开的描述中，除非另有说明，“多个”的含义。

下面对本公开实施例的应用场景进行简要介绍：

参阅图1所示，其为本公开实施例的应用场景示意图。该应用场景图包括两个终端设备110和一个服务器130，可通过终端设备110登录html页面120。终端设备110与服务器130之间可以通过通信网络进行通信。每个终端设备对应的一个用户，图1中是以用户a和用户b各对应一个终端设备110为例，实际上不限制终端设备的数量。在某些情况下，各终端设备之间可以先通过服务器130进行通信，终端设备到终端设备之间可以建立直接通信，终端设备到终端设备之间直接通信的方式可以称为点到点通信，在这情况下，各终端设备之间的某些交互过程可能并不需要服务器130的中转。

其中，每个终端设备中可以安装有本公开实施例中提供的浏览器客户端。本公开实施例涉及的客户端可以是预安装的客户端，也可以是嵌入在某个应用中的客户端(例如小程序)，还可以是网页版的客户端，不限制客户端的具体类型。

在一种可选的实施方式中，通信网络是有线网络或无线网络。终端设备110以及服务器130可以通过有线或无线通信方式进行直接或间接地连接，本公开在此不做限制。

在本公开实施例中，终端设备110为用户使用的电子设备，该电子设备可以是个人计算机、手机、平板电脑、笔记本、电子书阅读器等具有一定计算能力并且运行有即时通信类软件及网站或者社交类软件及网站的计算机设备。各终端设备110通过无线网络与服务器130连接，服务器130可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、cdn(contentdeliverynetwork，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器。终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本公开在此不做限制。

图2是根据一示例性实施例示出的一种页面展示方法的流程图，应用于页面展示系统中的终端设备，该终端设备上按照由用于页面展示的客户端。如图2所示，包括以下步骤：

在步骤s21中，在接收到对待展示的超文本标记语言页面的访问请求后，从内容分发网络获取超文本标记语言页面的层叠样式表文件；

在步骤s22中，根据从内容分发网络获取到的超文本标记语言页面对应的静态资源集合中的各个静态资源的地址信息，从内容分发网络获取各个静态资源的资源文件，内容分发网络应用于页面展示系统中；

在步骤s23中，根据获取到的各个资源文件对应的地址信息，从获取到的各个资源文件中选取与层叠样式表文件中需要展示的静态资源的地址信息相同的资源文件；

在步骤s24中，基于获取到需要展示的静态资源的资源文件以及层叠样式表文件中与需要展示的静态资源相关的展示信息，展示包含需要展示的静态资源的超文本标记语言页面。

通过上述方案，在接收到针对待展示的html页面的访问请求时，就基于从cdn平台获取到的静态资源集合，对html页面相关的各个静态资源进行预加载并缓存到本地缓存中，包括html页面首屏不需要展示的图片、字体包等资源，因此需要在html页面中展示各个静态资源时，即可直接从本地缓存中获取，而不需要再发送网络请求，从cdn平台请求获取静态资源。因此，本公开实施例保证了静态资源的预加载，避免出现页面白屏或者闪屏等问题，提高了页面展示的效率和展示效果。

其中，静态资源集合可以是表格、序列等形式，在本公开实施例中主要是以表格为例，下文所列举的静态资源表即本公开实施例中的一种表格形式的静态资源集合。例如表1所示，为本公开实施例中示出的一种静态资源表。

表1

在表1中所列举的静态资源都是指图片，地址信息即图片在cdn平台上的地址，在表1中是url(uniformresourcelocator，统一资源定位符)的表示形式，当然也可以是其它形式的网络地址，在此不做具体限定。

需要说明的是，在本公开实施例中，静态资源集合是由页面服务器生成并上传至cdn平台的，具体生成过程如下：

遍历待展示的html页面的css文件，获取css文件包含的各个静态资源的地址信息；通过webpack对获取到的各个静态资源的地址信息进行打包，生成html页面对应的静态资源集合，并将静态资源集合上传至cdn平台。

具体的，css文件中包含与静态资源的引用相关的信息，例如各个静态资源的地址信息，这里的地址信息是指cdn地址，页面服务器通过遍历html页面的css文件，即可获取到该html页面相关的各个静态资源的地址信息。进一步地，基于webpack打包时引入的webpack-mainfust-plugin插件，生成一个静态资源的hash表，也就是上述实施例中列举的静态资源表。在本公开实施例中，基于该插件最终生成的静态资源表可以表示成一个.json文件，该文件中包含的各个静态资源的地址信息除了包括cdn地址外，还可进一步包括本地地址。

其中，表1中的地址信息是指各个静态资源在cdn平台上的cdn地址，也就是网络地址。此外，静态资源表中还可包含各个静态资源的本地地址，其中本地地址是指项目在本地开发阶段的本地地址，而项目上线之后，主要是涉及静态资源的网络地址，也就是cdn地址。本质上来说，本地地址可以不放到静态资源表的内部，但是基于webpack插件打包时，该插件提供的功能就是将本地地址与网络地址都直接展示出来。

在本公开实施例中，用户查看html页面时，客户端就可接收到针对待展示的html页面的访问请求，在接收到该访问请求后，客户端需要从页面服务器获取对应的html文件。

其中，html文件包含该页面的css文件的路径，以及该页面的js文件的路径；客户端根据html文件中css文件的路径，即可从cdn平台获取该页面的css文件；根据html页面中js文件的路径，即可从cdn平台获取该页面的js文件。

在本公开实施例中，页面主要有三个部分：html文件、css文件和js文件。其中，html文件是页面的骨架，css文件是用来修饰页面样式的，js文件是用来触发用户操作的，在实现页面展示的过程中需要将这三者组合到一起。

在一种可选的实施方式中，本公开实施例中的js文件包含用于获取静态资源的加载信息，例如预加载代码，基于该加载信息，结合静态资源集合中的各个静态资源的地址信息，即可实现各个静态资源的预加载。

因此，在本公开实施例中，在根据从cdn平台获取到的html页面对应的静态资源集合中的各个静态资源的地址信息，从cdn平台获取各个静态资源的资源文件之前，首先需要从cdn平台中获取html页面的js文件；进而，根据静态资源集合中的各个静态资源的地址信息，以及js文件中用于获取静态资源的加载信息，即可从cdn平台获取各个静态资源的资源文件。

下面对预加载静态资源的过程进行详细介绍，下文主要是以静态资源为图片为例，对于除图片之外的其他静态资源也是同样的道理：

在一种可选的实施方式中，根据静态资源集合中的各个静态资源的地址信息，以及js文件中用于获取静态资源的加载信息，从cdn平台获取各个静态资源的资源文件时，实际过程如下：

循环遍历静态资源集合中的地址信息，其中每遍历一个地址信息后都通过加载信息生成当前遍历的地址信息对应的实体对象，并根据地址信息定义src函数的属性信息后，通过src函数从cdn平台获取地址信息对应的静态资源的资源文件。

其中，当静态资源为图片时，假设加载信息可以是newimage()函数，则在预加载各个静态资源时，即可通过newimage()循环生成实体对象，并通过src引入图片的链接，这样就做到了图片的加载。在本公开实施例中，src属性是用于指定图像文件的url的，也就是静态资源的地址信息，它的值是图像文件(即资源文件)的url，也就是引用该图像的文件的绝对路径或相对路径。

例如，预加载表1中的图片1时，首先通过newimage()创建一个image对象：vara＝newimage()；之后，定义image对象的src:a.src＝”xxx.png”，这样做就相当于给浏览器本地缓存了一张图片，其中”xxx.png”即url1。

同样地，在预加载其他图片时也是同样的方式，最终即可将各个静态资源的资源文件加载到浏览器缓存中，也就是存储到了客户端的本地缓存中。

在基于上述实施方式实现静态资源的预加载之后，即可依据预加载到的各个静态资源的资源文件展示html页面，需要说明的是，当用户查看html页面时，需要首先展示html页面的首屏，因此html页面的首屏中所涉及的各个静态资源的展示过程与预加载过程需要并行处理，即一边基于js文件中的加载信息以及各个静态资源的地址信息加载首屏需要展示的静态资源的资源文件，一边结合加载到的资源文件中当前需要展示的静态资源来展示html页面的首屏，而并非等所有的静态资源都加载完成后再展示html页面的首屏。

接下来，在展示除页面首屏之外所涉及的其他相关的静态资源，如弹窗或浮层中需要展示的图片时，无需再向cdn平台发送请求。也就是说，当用户触发某些操作而需要展示html页面的弹窗或者浮层，或者从首屏是跳转至其他界面的时候，即可直接从浏览器缓存中读取相应的资源文件进行展示。

例如图3a所示，为本公开实施例中所列举的一种html页面首屏的示意图；目前很多的资讯类话题都有不同维度的观点，这些观点之间形成pk(playerkilling，比赛/挑战)的互动形式。最常见的互动就是单选观点对决双方，如图3a所示，针对话题“运动会是否能如期举行”，用户可通过选择“能”，或者“不能”进行投选，该页面即一种观点pk活动(项目)的首屏，当用户点击图3a中某一按键时，可进一步跳转至图3b所示的界面，该界面中通过浮层的方式展示了x周刊在2020年3月20日发表的一篇名为“xx发言人：运动会可能会延期”的一篇文章，该文章中有一张图片需要展示，在获取该图片的图像文件时，即可根据css文件获取到当前需要展示的该图片的地址信息，之后根据预先获得的绑定关系中各个资源文件对应的地址信息，从获取到的各个资源文件中选取与css文件中当前需要展示的这张图片的地址信息相同的图像文件，其中绑定关系是在预加载各个资源文件之后建立的各个资源文件与各个静态资源的地址信息之间的绑定关系。

在本公开实施例中，基于获取到需要展示的静态资源的资源文件以及css文件中与需要展示的静态资源相关的展示信息，展示包含需要展示的静态资源的html页面时，实际上是需要结合html文件，css文件以及js文件的。

例如展示图3b所示的浮层时，需要依据html文件确定页面的骨架，依据css文件中与图3b所示的浮层中的图片相关的展示信息，修饰页面展示的样式，例如展示图片时，图片的宽、高，图片是居中还是靠左、靠右等。此外，js文件主要涉及用户操作，例如点击哪里有什么反应，滚动到某个位置页面有什么变化之类的。

下面从项目上线阶段和用户使用阶段这两个方面来介绍本公开实施例中的页面展示方法。

参阅图4所示，其为本公开实施例示出的一种项目上线阶段的流程示意图。本公开实施例中的项目即某一活动，例如上述实施例中所列举的观点pk活动，这些项目可以通过html页面的形式展示给用户。

在项目上线阶段，首先需要基于页面服务器，将项目所涉及的静态资源进行打包，上传至cdn平台。也就是将html页面相关联的所有静态资源，包括页面首屏以及后续展示的弹窗、浮层等所涉及的所有静态资源。如图4所示，假设某一项目涉及的静态资源有n个，分别为静态资源1、静态资源2、静态资源3、...、静态资源n。页面服务器首先需要生成与这n个静态资源相关的css文件，以及js文件，并上传至cdn平台。

此外，还需要基于webpack打包时引入webpack-mainfust-plugin插件，生成该项目对应的静态资源表，最终以.json文件这种实体文件的形式上传至cdn平台。

如果一个项目是多入口项目时，则需要对每个入口都进行上述操作，同时，本公开实施例中的webpack-mainfust-plugin提供fluter(过滤)方式，用来过滤不同的内容，从css文件中筛选出各个静态资源的地址信息，最终对每个入口都单独生成一个.json文件用来记录静态资源的地址信息。

其中，多入口是指一个项目下会涉及多个活动，每个活动对应一个html页面，例如在运营项目下可能会包含多种游戏活动，假设包括游戏a暑期活动、游戏b暑期活动和游戏c暑期活动这三种，则每一游戏暑期活动对应一个入口，一个html页面，这里的html页面指首屏，以及后期可能涉及的弹窗等。对于上述这个多入口项目，每个入口都需要单独生成一个.json文件，一共生成3个静态资源表，最终页面服务器将各个.josn文件当做是静态资源上传至cdn平台上。当用户通过任意入口查看html页面时，只需依据该入口对应的静态资源表进行静态资源的预加载即可，预加载出与该入口页面相关的各个静态资源。其中，客户端从cdn平台拉取.json文件时，可通过ajax拉取，并获取其中的数据。

在上述实施方式中，基于webpack-mainfust-plugin插件可一次性获取各个静态资源的地址信息，并批量上传。基于此，可以有效保证项目的开发效率。

图5为本公开实施例示出的一种用户使用阶段的页面展示方法流程图。

在用户查看html页面时，首先需要从页面服务器获取该页面的html文件，根据html文件中css文件的路径，从cdn平台获取该页面的css文件，以及根据html页面中js文件的路径，从cdn平台获取该页面的js文件。在获取到js文件之后，基于js文件中实现预加载图片的代码，循环变量通过ajax从cdn平台获取到的该页面的静态资源表，通过newimage进行图片加载。这里的图片即静态资源，进而将获取到的静态资源的资源文件的地址信息与资源文件进行绑定，基于css文件中确定html页面中当前需要展示的静态资源的地址信息，根据预先获得的绑定关系中各个资源文件对应的地址信息，从获取到的各个资源文件中选取与css文件中当前需要展示的静态资源的地址信息相同的资源文件，基于获取到需要展示的静态资源的资源文件以及所述css文件中与需要展示的静态资源相关的展示信息，展示包含需要展示的静态资源的html页面，具体实现过程可参见上述实施例，在此不再重复赘述。

本公开实施例中的页面展示方式在保证了项目开发的效率的情况下，优化了用户体验。保证用户在网络波动的情况下图片等页面资源的加载，并且不出现闪屏等问题。

图6是根据一示例性实施例示出的一种页面展示方法的流程图，应用于页面展示系统中的cdn平台，如图6所示，包括以下步骤：

在步骤s61中，在接收到终端设备发送的对待展示的超文本标记语言页面的访问请求后，获取与超文本标记语言页面对应的静态资源集合；

在步骤s62中，将静态资源集合发送给终端设备，以使终端设备根据静态资源集合中的各个静态资源的地址信息，从cdn平台获取各个静态资源的资源文件后，根据资源文件展示超文本标记语言页面。

在本公开实施例中，该方法主要应用于cdn平台，在cdn平台上除了存储有html页面对应的css文件、js文件和各个静态资源之外，还预先存储有html页面对应的静态资源集合。其中，终端设备从cdn平台获取到静态资源集合之后，即可依据该集合中的各个静态资源的地址信息，从cdn平台预加载各个静态资源的资源文件，其中，静态资源预加载的过程具体参见上述实施例，在此不再重复说明。

图7是根据一示例性实施例示出的一种页面展示方法的流程图，应用于页面展示系统中的页面服务器，如图7所示，包括以下步骤：

在步骤s71中，遍历待展示的超文本标记语言页面的层叠样式表文件，获取层叠样式表文件包含的各个静态资源的地址信息；

在步骤s72中，通过webpack对获取到的各个静态资源的地址信息进行打包，生成超文本标记语言页面对应的静态资源集合，并将静态资源集合上传至内容分发网络，以使终端设备从内容分发网络获取静态资源集合后，根据静态资源集合中的各个静态资源的地址信息，从内容分发网络获取各个静态资源的资源文件，并根据资源文件展示超文本标记语言页面。

在本公开实施例中，静态资源集合是由页面服务器上传至cdn平台的。具体的，css文件中包含与静态资源的引用相关的信息，例如各个静态资源的地址信息，这里的地址信息是指cdn地址，页面服务器通过遍历html页面的css文件，即可获取到该html页面相关的各个静态资源的地址信息。进一步，基于webpack打包时引入的webpack-mainfust-plugin插件，生成一个静态资源表，也就是本公开实施例中的静态资源集合，并上传至cdn平台，终端设备从cdn平台获取到静态资源集合之后，即可依据该集合中的各个静态资源的地址信息，从cdn平台预加载各个静态资源的资源文件，其中，静态资源预加载的过程具体参见上述实施例，在此不再重复说明。

本公开实施例还包括一种页面展示系统，该系统具体包含三部分：终端设备、cdn平台和页面服务器。

其中，终端设备，用于在接收到对待展示的html页面的访问请求后，从cdn平台获取html页面的css文件；根据从cdn平台获取到的html页面对应的静态资源集合中的各个静态资源的地址信息，从cdn平台获取各个静态资源的资源文件；根据获取到的各个资源文件对应的地址信息，从获取到的各个资源文件中选取与css文件中需要展示的静态资源的地址信息相同的资源文件；基于获取到需要展示的静态资源的资源文件以及css文件中与需要展示的静态资源相关的展示信息，展示包含需要展示的静态资源的html页面；

cdn平台，用于在接收到终端设备发送的对待展示的html页面的访问请求后，获取与html页面对应的静态资源集合；将静态资源集合发送给终端设备；

页面服务器，用于遍历待展示的html页面的css文件，获取css文件包含的各个静态资源的地址信息；通过webpack对获取到的各个静态资源的地址信息进行打包，生成html页面对应的静态资源集合，并将静态资源集合上传至cdn平台。

在本公开实施例中，cdn平台实际上可包括多个服务器，这些服务器即静态资源的服务器，而页面服务器是与终端设备上安装的用于展示html页面的客户端对应的服务器，例如图1所示的服务器130。

图8是根据一示例性实施例示出的一种页面展示的完整方法流程图，具体包括以下步骤：

s81：页面服务器生成待展示html页面的css文件以及js文件，并上传至cdn平台；

s82：页面服务器基于webpack打包生成待展示html页面的静态资源表并上传至cdn平台；

s83：客户端接收到对待展示的html页面的访问请求后，从页面服务器获取该页面的html文件；

s84：客户端根据html文件中的css文件路径以及js文件路径，从cdn平台获取该页面的css文件和js文件；

s85：客户端通过ajax从cdn平台获取该页面对应的静态资源表；

s86：客户端根据静态资源表中各个静态资源的地址信息，以及js文件中用于获取静态资源的加载信息，从cdn平台获取各个静态资源的资源文件；

s87：客户端建立获取到的各个资源文件与静态资源的地址信息之间的绑定关系；

s88：客户端根据css文件确定html页面中当前需要展示的静态资源的地址信息；

s89：客户端根据绑定关系中各个资源文件对应的地址信息，从获取到的各个资源文件中选取与css文件中当前需要展示的静态资源的地址信息相同的资源文件；

s810：客户端基于获取到需要展示的静态资源的资源文件以及css文件中与需要展示的静态资源相关的展示信息，展示包含需要展示的静态资源的html页面。

基于相同的发明构思，本公开实施例还提供一种页面展示装置。图9是根据一示例性实施例示出的一种页面展示装置900的框图。参照图9，该装置包括第一获取单元901，第二获取单元902，选取单元903和展示单元904。

第一获取单元901，被配置为执行在接收到对待展示的超文本标记语言页面的访问请求后，从内容分发网络获取超文本标记语言页面的层叠样式表文件；

第二获取单元902，被配置为执行根据从内容分发网络获取到的超文本标记语言页面对应的静态资源集合中的各个静态资源的地址信息，从内容分发网络获取各个静态资源的资源文件；

选取单元903，被配置为执行根据获取到的各个资源文件对应的地址信息，从获取到的各个资源文件中选取与层叠样式表文件中需要展示的静态资源的地址信息相同的资源文件；

展示单元904，被配置为执行基于获取到需要展示的静态资源的资源文件以及层叠样式表文件中与需要展示的静态资源相关的展示信息，展示包含需要展示的静态资源的超文本标记语言页面。

在一种可选的实施方式中，第一获取单元901还被配置为执行：

在第二获取单元902据从内容分发网络获取到的超文本标记语言页面对应的静态资源集合中的各个静态资源的地址信息，从内容分发网络获取各个静态资源的资源文件之前，从内容分发网络中获取超文本标记语言页面的脚本语言文件；

第二获取单元902具体被配置为执行：

根据静态资源集合中的各个静态资源的地址信息，以及脚本语言文件中用于获取静态资源的加载信息，从内容分发网络获取各个静态资源的资源文件。

在一种可选的实施方式中，第二获取单元902具体被配置为执行：

循环遍历静态资源集合中的地址信息，其中每遍历一个地址信息后都执行下列过程：

通过加载信息生成当前遍历的地址信息对应的实体对象，并根据地址信息定义src函数的属性信息后，通过src函数从内容分发网络获取地址信息对应的静态资源的资源文件。

在一种可选的实施方式中，选取单元903具体被配置为执行：

根据层叠样式表文件确定超文本标记语言页面中当前需要展示的静态资源的地址信息；

根据预先获得的绑定关系中各个资源文件对应的地址信息，从获取到的各个资源文件中选取与层叠样式表文件中当前需要展示的静态资源的地址信息相同的资源文件，其中绑定关系为获取到的各个资源文件与各个静态资源的地址信息之间的绑定关系。

基于相同的发明构思，本公开实施例还提供一种页面展示装置。图10是根据一示例性实施例示出的一种页面展示装置1000的框图。参照图10，该装置包括查询单元1001和发送单元1002。

查询单元1001，被配置为执行在接收到终端设备发送的对待展示的超文本标记语言页面的访问请求后，获取与超文本标记语言页面对应的静态资源集合；

发送单元1002，被配置为执行将静态资源集合发送给终端设备，以使终端设备根据静态资源集合中的各个静态资源的地址信息，从内容分发网络获取各个静态资源的资源文件后，根据资源文件展示超文本标记语言页面。

基于相同的发明构思，本公开实施例还提供一种页面展示装置。图11是根据一示例性实施例示出的一种页面展示装置1100的框图。参照图11，该装置包括遍历单元1101和打包单元1102。

遍历单元1101，被配置为执行遍历待展示的超文本标记语言页面的层叠样式表文件，获取层叠样式表文件包含的各个静态资源的地址信息；

打包单元1102，被配置为执行通过webpack对获取到的各个静态资源的地址信息进行打包，生成超文本标记语言页面对应的静态资源集合，并将静态资源集合上传至内容分发网络，以使终端设备从内容分发网络获取静态资源集合后，根据静态资源集合中的各个静态资源的地址信息，从内容分发网络获取各个静态资源的资源文件，并根据资源文件展示超文本标记语言页面。

关于上述实施例中的装置，其中各个单元执行请求的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图12是根据一示例性实施例示出的一种电子设备1200的框图，该装置包括：

处理器1210；

用于存储处理器1210可执行指令的存储器1220；

其中，处理器1210被配置为执行指令，以实现本公开实施例中任意一种页面展示方法。

在示例性实施例中，还提供了一种包括指令的存储介质，例如包括指令的存储器1220，上述指令可由电子设备1200的处理器1210执行以完成上述方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，非临时性计算机可读存储介质可以是rom、随机存取存储器(ram)、cd-rom、磁带、软盘和光数据存储设备等。

本公开实施例还提供一种计算机程序产品，当所述计算机程序产品在电子设备上运行时，使得所述电子设备执行实现本公开实施例上述任意一项页面展示方法或任意一项页面展示方法任一可能涉及的方法。

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

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