[发明专利]一种首屏加载优化方法、装置、电子设备及计算机可读存储介质

说明书

本申请提供了一种首屏加载优化方法、装置、电子设备及计算机可读存储介质，其特征在于，包括：S1、获取屏幕页面长度和第一页面标识；S2、获取单个加载元素的长度；S3、获取必要加载元素数量，根据所述必要加载元素数量确定必要加载资源；S4、利用键值对的方式存储所述必要加载资源；S5、根据所述加载请求获取所述首页页面加载所需的必要加载资源；S6、对所述必要加载资源执行页面渲染操作；S7、待所述必要加载资源加载完成后，加载所述必要加载资源之外的首页页面加载资源。采用本发明能够可以提升页面首屏加载速度，实现对前端加载资源的控制，本发明相对简单，易于推广。

技术领域

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

背景技术

在现有信息技术发展的今天，网站的页面元素越来越丰富，并且主页变得又长又大，当页面过长或者页面内容元素过大的时候，首页的加载速度会变得非常缓慢，用户等待的白屏时间将会变长，导致用户体验随着页面的大小而下降。首页的加载的资源所展开的页面往往是大于屏幕界面的，现阶段首屏加载的方式，基本上都是从资源大小控制，打包方式，拆包形式，利用浏览器加载特性来提升加载速度，减少页面加载的白屏时间。

本发明，主要就是为了提升用户体验，专注首屏加载，加载必要资源，减少首屏渲染的白屏时间。与本发明比较接近的技术：一种长屏页面加载方法、装置和电子设备，这种长屏加载，主要通过信息存储方式将页面存储，进行本地加载，和本发明有着明显的区别，本发明提供了一种屏幕加载资源计算机制，可实现在计算完首屏资源后，优先加载要展示的必要加载资源，通过计算达到加载资源最小化。

发明内容

为解决现有状况的不足，本发明针对以上背景技术的缺陷，本发明提出了一种首屏加载优化方法、装置、电子设备及计算机可读存储介质。

本申请第一方面提出了一种首屏加载优化方法，其特征在于，包括：

S1、获取屏幕页面长度和第一页面标识；

S2、利用HTML的标签属性获取单个加载元素的长度；

S3、根据屏幕页面的长度不大于必要加载元素数量与单个加载元素的长度的乘积，获取必要加载元素数量，根据所述必要加载元素数量确定必要加载资源；

S4、利用键值对的方式存储所述必要加载资源；其中，所述键为第一页面标识，所述值为所述必要加载资源；

S5、在首次加载页面的情况下，响应于页面的加载指令，获取页面地址，所述页面地址为待加载页面的地址；接收首页页面的加载请求，并根据所述加载请求获取所述首页页面加载所需的必要加载资源，其中，所述加载请求包括第一页面标识；

S6、对所述必要加载资源执行页面渲染操作，以完成所述首页页面的加载；

S7、待所述必要加载资源加载完成后，加载所述必要加载资源之外的首页页面加载资源。

优选地，所述步骤S1包括利用JavaScript Controller计算屏幕页面的长度与宽度。

优选地，所述步骤S3包括：

S31、所述屏幕页面的长度包括屏幕页面的长和宽；所述单个加载元素的长度包括单个加载元素的长和宽；

S32、根据屏幕页面的长不大于第一元素数量乘以单个元素的长，屏幕页面的宽等于第二元素数量乘以单个元素的宽；计算出第一元素数量与第二元素数量；所述第一元素数量为必要加载资源在屏幕长度方向的最大加载数量；所述第二元素数量为必要加载资源在屏幕宽度方向的最大加载数量；

S33、根据所述第一元素数量与第二元素数量确定必要加载资源的数量。

优选地，所述方法还包括基于预设的规则将所述必要加载资源单独打包成首页页面。