页面显示方法、装置、计算机设备、存储介质和计算机程序产品制造方法及图纸

本申请涉及一种页面显示方法、装置、计算机设备、存储介质和计算机程序产品。所述方法包括：接收页面打开请求；根据所述页面打开请求判断是否存在骨架屏；当存在所述骨架屏时，加载所述骨架屏对应的脚本，其中所述骨架屏对应的脚本是预先生成的，且与所述页面对应的项目是分开单独维护的；执行所述脚本以在上层显示所述骨架屏，并并行在下层显示透明的原始页面；根据显示结果关闭所述骨架屏，并显示原始页面。采用本方法对项目无倾入，骨架屏的逻辑代码与项目本身的代码单独维护，可各自迭代更新，不会增加原项目的体积。不会增加原项目的体积。不会增加原项目的体积。

【技术实现步骤摘要】
页面显示方法、装置、计算机设备、存储介质和计算机程序产品


[0001]本申请涉及网页显示
，特别是涉及一种页面显示方法、装置、计算机设备、存储介质和计算机程序产品。

技术介绍

[0002]骨架屏是指在页面数据加载完成之前，先给客户展示的大致结构。
[0003]传统技术中，骨架屏生成技术方案是通过vueSSR(vue服务端渲染)结合webpack在构建时渲染写好的vue骨架屏组件，将预渲染生成的DOM节点和相关样式插入到最终输出的html中。
[0004]然而，上述方案骨架屏代码维护在项目内，打包后的项目的体积更大，项目体积变大后导致用户访问所需时间更多，白屏时间更长。

技术实现思路

[0005]基于此，有必要针对上述技术问题，提供一种能够对项目无倾入，骨架屏的逻辑代码与项目本身的代码单独维护，可各自迭代更新，不会增加原项目的体积的页面显示方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。
[0006]第一方面，本申请提供一种页面显示方法，所述方法包括：
[0007]接收页面打开请求；
[0008]根据所述页面打开请求判断是否存在骨架屏；
[0009]当存在所述骨架屏时，加载所述骨架屏对应的脚本，其中所述骨架屏对应的脚本是预先生成的，且与所述页面对应的项目是分开单独维护的；
[0010]执行所述脚本以在上层显示所述骨架屏，并并行在下层显示透明的原始页面；
[0011]根据显示结果关闭所述骨架屏，并显示原始页面。
[0012]在其中一个实施例中，所述加载所述骨架屏对应的脚本之前，还包括：
[0013]判断所述骨架屏是否有效；
[0014]当所述骨架屏有效时，继续执行加载所述骨架屏对应的脚本。
[0015]在其中一个实施例中，所述加载所述骨架屏对应的脚本，包括：
[0016]判断本地是否存在与所述骨架屏对应的脚本；
[0017]当本地存在与所述骨架屏对应的脚本时，加载所述骨架屏对应的脚本；
[0018]当本地不存在与所述骨架屏对应的脚本时，异步下载所述骨架屏对应的脚本，并在下载完成后，加载所述骨架屏对应的脚本。
[0019]在其中一个实施例中，所述判断本地是否存在与所述骨架屏对应的脚本，包括：
[0020]判断所述骨架屏对应的脚本是否为内置脚本；
[0021]当所述骨架屏对应的脚本为内置脚本，则判定本地存在与所述骨架屏对应的脚本；
[0022]当所述骨架屏对应的脚本不为内置脚本，则判断所述骨架屏对应的脚本是否已下载；
[0023]当所述骨架屏对应的脚本已下载，则判定本地存在与所述骨架屏对应的脚本；
[0024]当所述骨架屏对应的脚本未下载，则判定本地不存在与所述骨架屏对应的脚本。
[0025]在其中一个实施例中，所述根据显示结果关闭所述骨架屏，并显示原始页面，包括：
[0026]当所述原始页面的显示结果满足预设条件时，接收所述原始页面发送的关闭骨架屏的通知，其中，所述预设条件包括页面请求结束；
[0027]根据所述通知关闭所述骨架屏，并显示原始页面。
[0028]在其中一个实施例中，所述根据显示结果关闭所述骨架屏，并显示原始页面，包括：
[0029]当所述原始页面在下层显示预设时长后未接收到所述原始页面发送的关闭骨架屏的通知时，关闭所述骨架屏，并显示原始页面。
[0030]第二方面，本申请还提供一种页面显示装置，所述装置包括：
[0031]第一接收模块，用于接收页面打开请求；
[0032]第一判断模块，用于根据所述页面打开请求判断是否存在骨架屏；
[0033]加载模块，用于当存在所述骨架屏时，加载所述骨架屏对应的脚本，其中所述骨架屏对应的脚本是预先生成的，且与所述页面对应的项目是分开单独维护的；
[0034]第一显示模块，用于执行所述脚本以在上层显示所述骨架屏，并并行在下层显示透明的原始页面；
[0035]第二显示模块，用于根据显示结果关闭所述骨架屏，并显示原始页面。
[0036]第三方面，本申请还提供一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述的第一方面中任意一个实施例中的方法的步骤。
[0037]第四方面，本申请还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述的第一方面中任意一个实施例中的方法的步骤。
[0038]第五方面，本申请还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述的第一方面中任意一个实施例中的方法的步骤。
[0039]上述页面显示方法、装置、计算机设备、存储介质和计算机程序产品，在接收到页面打开请求后，先判断页面是否存在骨架屏，当存在骨架屏时，则加载骨架屏对应的脚本，其中所述骨架屏对应的脚本是预先生成的，且与所述页面对应的项目是分开单独维护的，这样对项目无倾入，骨架屏的逻辑代码与项目本身的代码单独维护，可各自迭代更新，不会增加原项目的体积，利用骨架屏与h5框架的无关性，可对h5项目实现零倾入，无常规h5骨架屏的倾入性高、代码体积变大的缺点，从而后续执行脚本以在上层显示骨架屏，并并行在下层显示透明的原始页面；根据显示结果关闭骨架屏，并显示原始页面，这样并行开启两个网页视图，一个展示骨架屏，一个在底部加载原始页面，充分利用并行更快的特性，尽可能最快地展示原始页面。
附图说明
[0040]图1为一个实施例中页面显示方法的应用环境图；
[0041]图2为一个实施例中页面显示方法的流程示意图；
[0042]图3为一个实施例中的骨架屏生成方法的流程图；
[0043]图4为一个实施例中的骨架屏与原始页面交互流程的示意图；
[0044]图5为一个实施例中应用程序下载骨架屏脚本并渲染骨架屏的流程图；
[0045]图6为一个实施例中页面显示装置的结构框图；
[0046]图7为一个实施例中计算机设备的内部结构图。
具体实施方式
[0047]为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
[0048]本申请实施例提供的页面显示方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上，也可以放在云上或其他网络服务器上。
[0049]其中，终端102中可以安装有各种应用程序，终端102在接收到页面打开请求，该页面打开请求可以是用户触摸屏幕产生的或者是通过硬件，例如鼠标等操作产生的，该页面打开请求可以是打开应用程序的首页面或者是从应用程序的一个页面向另外一个页面跳转的请求。终端102在接收到页面打开请本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面显示方法，其特征在于，所述方法包括：接收页面打开请求；根据所述页面打开请求判断是否存在骨架屏；当存在所述骨架屏时，加载所述骨架屏对应的脚本，其中所述骨架屏对应的脚本是预先生成的，且与所述页面对应的项目是分开单独维护的；执行所述脚本以在上层显示所述骨架屏，并并行在下层显示透明的原始页面；根据显示结果关闭所述骨架屏，并显示原始页面。2.根据权利要求1所述的方法，其特征在于，所述加载所述骨架屏对应的脚本之前，还包括：判断所述骨架屏是否有效；当所述骨架屏有效时，继续执行加载所述骨架屏对应的脚本。3.根据权利要求1或2所述的方法，其特征在于，所述加载所述骨架屏对应的脚本，包括：判断本地是否存在与所述骨架屏对应的脚本；当本地存在与所述骨架屏对应的脚本时，加载所述骨架屏对应的脚本；当本地不存在与所述骨架屏对应的脚本时，异步下载所述骨架屏对应的脚本，并在下载完成后，加载所述骨架屏对应的脚本。4.根据权利要求1所述的方法，其特征在于，所述判断本地是否存在与所述骨架屏对应的脚本，包括：判断所述骨架屏对应的脚本是否为内置脚本；当所述骨架屏对应的脚本为内置脚本，则判定本地存在与所述骨架屏对应的脚本；当所述骨架屏对应的脚本不为内置脚本，则判断所述骨架屏对应的脚本是否已下载；当所述骨架屏对应的脚本已下载，则判定本地存在与所述骨架屏对应的脚本；当所述骨架屏对应的脚本未下载，则判定本地不存在与所述骨架屏对应的脚本。5.根据权利要求1所述的方法，其特征在于，所述根据显示结果...

【专利技术属性】
技术研发人员：王敏，赵晨雪，张勇，曾德平，陈旺，
申请(专利权)人：上海鱼尔网络科技有限公司，
类型：发明
国别省市：