一种首屏加载优化方法、装置、电子设备及计算机可读存储介质与流程

1.本发明涉及屏幕加载优化相关的技术领域，尤其涉及一种首屏加载优化方法、装置、电子设备及计算机可读存储介质。


背景技术：

2.在现有信息技术发展的今天，网站的页面元素越来越丰富，并且主页变得又长又大，当页面过长或者页面内容元素过大的时候，首页的加载速度会变得非常缓慢，用户等待的白屏时间将会变长，导致用户体验随着页面的大小而下降。首页的加载的资源所展开的页面往往是大于屏幕界面的，现阶段首屏加载的方式，基本上都是从资源大小控制，打包方式，拆包形式，利用浏览器加载特性来提升加载速度，减少页面加载的白屏时间。
3.本发明，主要就是为了提升用户体验，专注首屏加载，加载必要资源，减少首屏渲染的白屏时间。与本发明比较接近的技术：一种长屏页面加载方法、装置和电子设备，这种长屏加载，主要通过信息存储方式将页面存储，进行本地加载，和本发明有着明显的区别，本发明提供了一种屏幕加载资源计算机制，可实现在计算完首屏资源后，优先加载要展示的必要加载资源，通过计算达到加载资源最小化。


技术实现要素：

4.为解决现有状况的不足，本发明针对以上背景技术的缺陷，本发明提出了一种首屏加载优化方法、装置、电子设备及计算机可读存储介质。
5.本技术第一方面提出了一种首屏加载优化方法，其特征在于，包括：
6.s1、获取屏幕页面长度和第一页面标识；
7.s2、利用html的标签属性获取单个加载元素的长度；
8.s3、根据屏幕页面的长度不大于必要加载元素数量与单个加载元素的长度的乘积，获取必要加载元素数量，根据所述必要加载元素数量确定必要加载资源；
9.s4、利用键值对的方式存储所述必要加载资源；其中，所述键为第一页面标识，所述值为所述必要加载资源；
10.s5、在首次加载页面的情况下，响应于页面的加载指令，获取页面地址，所述页面地址为待加载页面的地址；接收首页页面的加载请求，并根据所述加载请求获取所述首页页面加载所需的必要加载资源，其中，所述加载请求包括第一页面标识；
11.s6、对所述必要加载资源执行页面渲染操作，以完成所述首页页面的加载；
12.s7、待所述必要加载资源加载完成后，加载所述必要加载资源之外的首页页面加载资源。
13.优选地，所述步骤s1包括利用javascript controller计算屏幕页面的长度与宽度。
14.优选地，所述步骤s3包括：
15.s31、所述屏幕页面的长度包括屏幕页面的长和宽；所述单个加载元素的长度包括单个加载元素的长和宽；
16.s32、根据屏幕页面的长不大于第一元素数量乘以单个元素的长，屏幕页面的宽等于第二元素数量乘以单个元素的宽；计算出第一元素数量与第二元素数量；所述第一元素数量为必要加载资源在屏幕长度方向的最大加载数量；所述第二元素数量为必要加载资源在屏幕宽度方向的最大加载数量；
17.s33、根据所述第一元素数量与第二元素数量确定必要加载资源的数量。
18.优选地，所述方法还包括基于预设的规则将所述必要加载资源单独打包成首页页面。
19.优选地，将所述必要加载资源利用键值对的方式缓存到本地，将所述必要加载资源之外的首页页面加载资源存储到web服务器。
20.优选地，响应于首页页面的加载请求，从客户端本地加载所述必要资源；
21.待所述必要加载资源加载完成后，加载web服务器存储的所述必要加载资源之外的首页页面加载资源并进行本地存储。
22.优选地，预设的第一时间段结束后，删除本地存储的所述必要加载资源之外的首页页面加载资源。
23.本技术第二方面提出了一种首屏加载优化装置，其特征在于，包括：
24.获取模块，用于获取屏幕页面长度和第一页面标识；
25.第一计算模块，利用html的标签属性获取单个加载元素的长度；
26.第二计算模块，用于根据屏幕页面的长度不大于必要加载元素数量与单个加载元素的长度的乘积，获取必要加载元素数量，根据所述必要加载元素数量确定必要加载资源；
27.存储模块，用于利用键值对的方式存储所述必要加载资源；其中所述键为第一页面标识，其中所述值为所述必要加载资源；
28.同步加载模块，用于在首次加载页面的情况下，响应于页面的加载指令，获取页面地址，所述页面地址为待加载页面的地址；接收首页页面的加载请求，并根据所述加载请求获取所述首页页面加载所需的必要加载资源，其中，所述加载请求包括第一页面标识；
29.渲染模块，用于对所述必要加载资源执行页面渲染操作，以完成所述首页页面的加载；
30.异步加载模块，待所述必要加载资源加载完成后，加载所述必要加载资源之外的首页页面加载资源。
31.本技术第三方面提出了一种电子设备，其特征在于，包括：处理器，以及与所述处理器通信连接的存储器；
32.所述存储器存储计算机执行指令；
33.所述处理器执行所述存储器存储的计算机执行指令，以实现上述的首屏加载优化方法。
34.本技术第四方面提出了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现上述的首屏加载优化方法。
35.本技术第五方面提出了一种计算机程序产品，其特征在于，包括计算机程序，该计
算机程序被处理器执行时实现上述的首屏加载优化方法。
36.本发明的有益效果为：通过屏幕大小相对精准的控制页面首屏展示元素，可以提升页面首屏加载速度，而且前端对于加载实现了控制，增强了对于资源的前端控制，而且相对来说比较简单，易于推广，提升用户体验。
附图说明
37.图1为本发明的首屏加载优化方法的流程示意图。
38.图2为本发明的首屏加载优化装置的结构框图。
具体实施方式
39.为了更清楚的理解本发明的内容，将结合附图和实施例详细说明。
40.但是应该理解，这些描述只是示例性的，而并非要限制本发明的范围。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本发明的概念。在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本发明。这里使用的词语“一”、“一个(种)”和“该”等也应包括“多个”、“多种”的意思，除非上下文另外明确指出。此外，在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。
41.在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。本发明是已有专利技术的改进，所以对于本技术未描述的部分以现有技术来实现。
42.首屏加载时间是指从输入网址，到页面完全渲染首个屏幕页面的时间。由于现有网站的页面元素越来越丰富，并且主页变得又长又大，当页面过长或者页面内容元素过大的时候，首页的加载速度会变得非常缓慢，用户等待页面完全展示的时间将会变长，导致用户体验随着页面的越来越大而下降，而在本技术所要解决的技术问题就是基于网站的页面尺寸大于屏幕页面的情况下，提出了一种屏幕加载资源计算机制，可实现在计算完首屏最多资源后，优先加载要展示的资源，通过计算达到加载资源最小化，提高用户的体验。
43.本技术第一方面提出了一种首屏加载优化方法，其特征在于，包括：
44.s1、获取屏幕页面长度和第一页面标识；
45.获取屏幕页面的长度的方法有很多种，包括对屏幕页面的大小直接进行测量或通过获取屏幕页面的默认大小设置参数，所述屏幕页面大小既包括页面全屏或者对页面进行缩放一定比例的页面大小，所述第一页面标识用于后续的键值对查询必要加载资源；
46.优选地，所述步骤s1包括利用javascript controller计算屏幕页面的长度与宽度。在待加载的资源准备完成后，通过运行javascript代码，构建javascript controller，之后javascript controller计算屏幕页面的大小。
47.s2、利用html的标签属性获取单个加载元素的长度；
48.javascript controller利用html的标签计算待加载资源的单个元素的长度。
49.s3、根据屏幕页面的长度不大于必要加载元素数量与单个加载元素的长度的乘积，获取必要加载元素数量，根据所述必要加载元素数量确定必要加载资源；
50.由于待加载资源的全部元素都加载的情况下在本技术的情况下是远大于屏幕页面的大小的，所以只能在待加载资源中计算出能够加载的必要加载元素数量。
51.优选地，所述步骤s3包括：
52.s31、所述屏幕页面的长度包括屏幕页面的长和宽；所述单个加载元素的长度包括单个加载元素的长和宽；
53.s32、根据屏幕页面的长不大于第一元素数量乘以单个元素的长，屏幕页面的宽等于第二元素数量乘以单个元素的宽；计算出第一元素数量与第二元素数量；所述第一元素数量为必要加载资源在屏幕长度方向的最大加载数量；所述第二元素数量为必要加载资源在屏幕宽度方向的最大加载数量；即根据屏幕页面的长度≤第一元素数量*单个元素的长，屏幕页面的宽度≤第一元素数量*单个元素的宽，计算出屏幕页面长度方向和宽度方向的最大的元素加载数量。
54.s33、根据所述第一元素数量与第二元素数量确定必要加载资源的数量。
55.由于计算出了屏幕页面长度方向和宽度方向的最大的元素加载数量，所以可以对首页页面加载资源进行划分为必要加载资源与其他加载资源，但需要满足必要加载资源的数量在屏幕页面的长度方向与宽度方向上不大于屏幕页面长度方向和宽度方向的最大的元素加载数量。对于必要加载资源的划分，本领域的技术人员可以预设优先级、所要实现的网站页面的功能以及下一个加载的页面资源等要素进行选择，本技术不对必要加载资源的选择以及划分进行限制，只需要满足必要加载资源的数量在屏幕页面的长度方向与宽度方向上不大于屏幕页面长度方向和宽度方向的最大的元素加载数量即可。
56.s4、利用键值对的方式存储所述必要加载资源；其中，所述键为第一页面标识，所述值为所述必要加载资源；
57.键值对查询速度很快，所以根据屏幕页面的大小确定必要加载资源后，将必要加载资源进行存储，所述第一页面标识是基于屏幕页面的大小而进行的标记，其可以来源于新建的标记，也可以来自于网络设备的编号，只需要满足与屏幕页面的大小有着对应的关系即可，而所述必要加载资源是基于屏幕页面的大小获得的，所以第一页面标识与所述必要加载资源也存在着一定的对应关系，用键值对的方式存储第一页面标识与所述必要加载资源，以便于后续的加载资源时候，根据第一页面标识快速查询加载资源时候；
58.优选地，将所述必要加载资源利用键值对的方式缓存到本地，将所述必要加载资源之外的首页页面加载资源存储到web服务器，这样就减小了资源包体积，也避免了对本地存储空间的不必要占用。
59.s5、在首次加载页面的情况下，响应于页面的加载指令，获取页面地址，所述页面地址为待加载页面的地址；接收首页页面的加载请求，并根据所述加载请求获取所述首页页面加载所需的必要加载资源，其中，所述加载请求包括第一页面标识；
60.s6、对所述必要加载资源执行页面渲染操作，以完成所述首页页面的加载；
61.优选地，响应于首页页面的加载请求，从客户端本地加载所述必要资源；
62.s7、待所述必要加载资源加载完成后，加载所述必要加载资源之外的首页页面加载资源。
63.优选地，待所述必要加载资源加载完成后，加载web服务器存储的所述必要加载资源之外的首页页面加载资源并进行本地存储。
64.优选地，预设的第一时间段结束后，删除本地存储的所述必要加载资源之外的首页页面加载资源。
65.当然，这时的存储，可以是临时存储，因此，在本说明书实施例中，该方法还可以包括：
66.这里的第一时间段是所述必要加载资源之外的首页页面加载资源加载后的时间，比如，可以在加载后30天后，具体数值可以根据需要进行设置，之后删除本地存储的所述必要加载资源之外的首页页面加载资源。这样，避免了长期占用本地存储空间。
67.优选地，所述方法还包括基于预设的规则将所述必要加载资源单独打包成首页页面，对于使用频率较高的首屏页面加载资源，我们可以将首屏页面加载资源本地化存储。
68.本技术第二方面提出了一种首屏加载优化装置，其特征在于，包括：
69.获取模块，用于获取屏幕页面长度和第一页面标识；
70.第一计算模块，利用html的标签属性获取单个加载元素的长度；
71.第二计算模块，用于根据屏幕页面的长度不大于必要加载元素数量与单个加载元素的长度的乘积，获取必要加载元素数量，根据所述必要加载元素数量确定必要加载资源；
72.存储模块，用于利用键值对的方式存储所述必要加载资源；其中所述键为第一页面标识，其中所述值为所述必要加载资源；
73.同步加载模块，用于在首次加载页面的情况下，响应于页面的加载指令，获取页面地址，所述页面地址为待加载页面的地址；接收首页页面的加载请求，并根据所述加载请求获取所述首页页面加载所需的必要加载资源，其中，所述加载请求包括第一页面标识；
74.渲染模块，用于对所述必要加载资源执行页面渲染操作，以完成所述首页页面的加载；
75.异步加载模块，待所述必要加载资源加载完成后，加载所述必要加载资源之外的首页页面加载资源。
76.本技术第三方面提出了一种电子设备，其特征在于，包括：处理器，以及与所述处理器通信连接的存储器；
77.所述存储器存储计算机执行指令；
78.所述处理器执行所述存储器存储的计算机执行指令，以实现上述的首屏加载优化方法。
79.本技术第四方面提出了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现上述的首屏加载优化方法。
80.本技术第五方面提出了一种计算机程序产品，其特征在于，包括计算机程序，该计算机程序被处理器执行时实现上述的首屏加载优化方法。
81.本发明的有益效果为：通过屏幕大小相对精准的控制页面首屏展示元素，可以提升页面首屏加载速度，而且前端对于加载实现了控制，增强了对于资源的前端控制，而且相对来说比较简单，易于推广，提升用户体验。
82.本领域技术人员可以进一步意识到，结合本文的实施例的算法步骤，能够以电子硬件、计算机软件或二者结合的方式实现，且这些功能究竟以硬件还是软件的方式执行，取决于技术方案的特定应用和设计约束条件，本领域技术人员可以对每个特定的应用使用不
同方法实现所描述的功能，但是这种实现不应认为超出本发明的范围。
83.尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
84.以上所述仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换等都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求书的保护范围为准。