一种优化html5页面首屏用户体验的加载技术架构的制作方法

本发明属于html5页面，具体为一种优化html5页面首屏用户体验的加载技术架构。

背景技术：

1、互联网技术在不断发展，手机端用户对于html5页面的使用要求也不断提高，从最初简单的信息浏览，逐渐增加页面操作交互，再到复杂的动态交互与展示效果，开发人员已经不能单纯的只从完成需求功能的目的出发去实现页面的展示，在完成功能的同时，还需从用户体验上考虑更优的实现方案，使用户流畅的、舒服的、节能的完成页面内容的浏览与操作，从而留住更多的潜在客户与实现更高的订单转化率。

2、使用html5页面对客户展示专题内容、商品内容，是大多互联网公司使用的技术方案，现有html5网页的普遍做法为将页面所需数据与dom元素内容在服务器端逐一加载完毕后，生成完整的html结构，输出到客户端并渲染为网页内容，展示给用户，这种方法通过在服务器端加载页面内容方案，会导致页面打开速度较慢，因为在服务端组合所需数据的过程，客户端是一个等待状态，用户看到的是白屏内容，或者在服务器端不加载数据，通过javascript技术在页面中异步加载各模块所需数据api，采用异步加载的好处是不阻塞，哪个模块api请求先得到返回结果，就先展示哪个模块内容，但缺点是没有先后顺序，使得用户看到的内容展示没有顺序，比较凌乱，并且由于html5的加载速度取决于网络速度，在网络环境不好的情况下，页面内容很容易出现错乱、闪屏、撑开或收缩的情况，并且用户体验上给人非常杂乱的感觉，容易导致潜在客户的流失，而且现有网页开发过程中，基本做法是用户打开网页时，就将整页内容数据完全加载，不太考虑用户是否真正的要向下滚动浏览首屏之外内容，十分的浪费网络资源，因此需要对其进行改进。

技术实现思路

1、针对现有技术的不足，本发明提供了一种优化html5页面首屏用户体验的加载技术架构，具有首屏加载速度快、浏览顺畅的优点。

2、为实现上述目的，本发明提供如下技术方案：一种优化html5页面首屏用户体验的加载技术架构，具体步骤如下：

3、步骤一：首屏加载顺序

4、假设页面首屏内容分为5个子模块，定义数组【子模块1,子模块2,子模块3,子模块4,子模块5】，数组中为5个元素表示对应模块内api请求是否加载完成，在各子模块请求接口并成功返回数据后，通知主页面并删除数组中对应的模块标识，首屏中实时监控数组中标识数量是否为0，数组长度为0代表所有子模块重要数据都已加载完毕，可以开始依次渲染页面内容，当前时间用户看到的页面，是从上至下依次渲染的内容，不会再出现抖动、闪烁、模块错乱和内容穿插的情况；

5、步骤二：首屏加载速度

6、假设页面内容较多，首屏之外向下滚动有很多资讯内容、商品列表，点击某按钮开关，出现的弹层中还有动态数据内容，但是除首屏之外的数据，在页面刚打开时就加载会有三个问题：

7、1：影响页面首次打开的页面响应速度，网络环境不好的情况下，需要等待较长时间；

8、2：除首屏之外的内容，也许不是用户想浏览的，但是也一次性的全部加载完成；

9、3：移动网络环境下，消耗了用户更多的流量；

10、针对上面的问题，通过使用javascript技术通过监听用户操作行为，得到用户在首屏加载完成后的点击和网页滚动操作标识，之后再加载除首屏之外内容，从而解决以上3个问题。

11、优选的，步骤一中所述的子模块是通过将html5网页首屏内容进行模块拆分得到的，将拆分的子模块标识记录到全局数组变量中。

12、优选的，步骤一中所述通过在子模块中找到关键数据的api接口请求，在该api接口执行完毕后，无论该api接口执行成功或是失败。

13、优选的，步骤一中所述的子模块请求接口并成功返回数据后，调用主页面钩子函数，在主页面钩子函数中，取到对应子模块调用参数，在模块标识数组中，将对应元素删除。

14、优选的，步骤一中所述通过创建计算属性，计算子模块标识数组中，是否所有子模块api接口都已加载完成，其中未加载完的子模块标识还在数组中，长度为0代表所有子模块接口都已加载完毕，便依次渲染各个子模块内容展示给用户。

15、优选的，步骤二中所述的首屏加载过慢出现接口调用pending超时情况时，通过设置网页初始化的1500毫秒后，将子模块标识数组内容全部清空，强制展示首屏页面内容，无论当前页面内容是否有缺失。

16、优选的，步骤二中所述的除首屏之外的内容是否展示，可以通过在主页面中创建一个全局变量boolean变量isstarttoscroll，用于控制是否展示首屏之外内容，页面初始化后，监听用户滚动事件与点击事件，在用户触发滚动或点击事件后，将boolean变量isstarttoscroll设置为true，首屏之外内容模块在得到istarttoscroll变量为ture后，开始依次请求api接口，得到请求数据后渲染至页面展示给用户浏览。

17、优选的，步骤一中所述的子模块，可以通过使用压栈与弹栈的方法，实时对已加载子模块数组标识进行操作。

18、优选的，步骤二中所述首屏之外的内容可以通过监听用户滚动与点击操作，从而判断首屏之外的内容是否需要进行加载，在用户初次触发该操作后，首屏之外内容模块再请求对应数据接口并渲染内容数据。

19、与现有技术相比，本发明的有益效果如下：

20、本专利提供了一种针对html5网页加载无序、闪烁、错乱、内容较多、缓慢、流量耗费较大等问题的解决方案，通过前端js技术手段，将一整页内容分割为若干模块，根据用户实际操作，按需加载各模块内容，达到html5网页首屏加速、浏览顺畅、提高用户体验的目的，从而增加了潜在用户的浏览时长并提高商业数据转换率。

技术特征：

1.一种优化html5页面首屏用户体验的加载技术架构，其特征在于：具体步骤如下：

2.根据权利要求1所述的一种优化html5页面首屏用户体验的加载技术架构，其特征在于：步骤一中所述的子模块是通过将html5网页首屏内容进行模块拆分得到的，将拆分的子模块标识记录到全局数组变量中。

3.根据权利要求1所述的一种优化html5页面首屏用户体验的加载技术架构，其特征在于：步骤一中所述通过在子模块中找到关键数据的api接口请求，在该api接口执行完毕后，无论该api接口执行成功或是失败。

4.根据权利要求1所述的一种优化html5页面首屏用户体验的加载技术架构，其特征在于：步骤一中所述的子模块请求接口并成功返回数据后，调用主页面钩子函数，在主页面钩子函数中，取到对应子模块调用参数，在模块标识数组中，将对应元素删除。

5.根据权利要求1所述的一种优化html5页面首屏用户体验的加载技术架构，其特征在于：步骤一中所述通过创建计算属性，计算子模块标识数组中，是否所有子模块api接口都已加载完成，其中未加载完的子模块标识还在数组中，长度为0代表所有子模块接口都已加载完毕，便依次渲染各个子模块内容展示给用户。

6.根据权利要求1所述的一种优化html5页面首屏用户体验的加载技术架构，其特征在于：步骤二中所述的首屏加载过慢出现接口调用pending超时情况时，通过设置网页初始化的1500毫秒后，将子模块标识数组内容全部清空，强制展示首屏页面内容，无论当前页面内容是否有缺失。

7.根据权利要求1所述的一种优化html5页面首屏用户体验的加载技术架构，其特征在于：步骤二中所述的除首屏之外的内容是否展示，可以通过在主页面中创建一个全局变量boolean变量isstarttoscroll，用于控制是否展示首屏之外内容，页面初始化后，监听用户滚动事件与点击事件，在用户触发滚动或点击事件后，将boolean变量isstarttoscroll设置为true，首屏之外内容模块在得到istarttoscroll变量为ture后，开始依次请求api接口，得到请求数据后渲染至页面展示给用户浏览。

8.根据权利要求1所述的一种优化html5页面首屏用户体验的加载技术架构，其特征在于：步骤一中所述的子模块，可以通过使用压栈与弹栈的方法，实时对已加载子模块数组标识进行操作。

9.根据权利要求1所述的一种优化html5页面首屏用户体验的加载技术架构，其特征在于：步骤二中所述首屏之外的内容可以通过监听用户滚动与点击操作，从而判断首屏之外的内容是否需要进行加载，在用户初次触发该操作后，首屏之外内容模块再请求对应数据接口并渲染内容数据。

技术总结本发明属于html5页面技术领域，且公开了一种优化html5页面首屏用户体验的加载技术架构，具体步骤如下：步骤一：首屏加载顺序假设页面首屏内容分为5个子模块，定义数组【子模块1,子模块2,子模块3,子模块4,子模块5】，数组中为5个元素表示对应模块内API请求是否加载完成，在各子模块请求接口并成功返回数据后。本专利提供了一种针对HTML5网页加载无序、闪烁、错乱、内容较多、缓慢、流量耗费较大等问题的解决方案，通过前端JS技术手段，将一整页内容分割为若干模块，根据用户实际操作，按需加载各模块内容，达到html5网页首屏加速、浏览顺畅、提高用户体验的目的，从而增加了潜在用户的浏览时长并提高商业数据转换率。技术研发人员：刘勇,冯岩,刘文泽受保护的技术使用者：北京皮尔布莱尼软件有限公司技术研发日：技术公布日：2024/9/2