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

技术编号:42616947 阅读:43 留言:0更新日期:2024-09-03 18:22
本发明专利技术属于html5页面技术领域,且公开了一种优化html5页面首屏用户体验的加载技术架构,具体步骤如下:步骤一:首屏加载顺序假设页面首屏内容分为5个子模块,定义数组【子模块1,子模块2,子模块3,子模块4,子模块5】,数组中为5个元素表示对应模块内API请求是否加载完成,在各子模块请求接口并成功返回数据后。本专利提供了一种针对HTML5网页加载无序、闪烁、错乱、内容较多、缓慢、流量耗费较大等问题的解决方案,通过前端JS技术手段,将一整页内容分割为若干模块,根据用户实际操作,按需加载各模块内容,达到html5网页首屏加速、浏览顺畅、提高用户体验的目的,从而增加了潜在用户的浏览时长并提高商业数据转换率。

【技术实现步骤摘要】

本专利技术属于html5页面,具体为一种优化html5页面首屏用户体验的加载技术架构


技术介绍

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

2、使用html5页面对客户展示专题内容、商品内容,是大多互联网公司使用的技术方案,现有html5网页的普遍做法为将页面所需数据与dom元素内容在服务器端逐一加载完毕后,生成完整的html结构,输出到客户端并渲染为网页内容,展示给用户,这种方法通过在服务器端加载页面内容方案,会导致页面打开速度较慢,因为在服务端组合所需数据的过程,客户端是一个等待状态,用户看到的是白屏内容,或者在服务器端不加载数据,通过javascript技术在页面中异步加载各模块所需数据api,采用异步加载的好处是本文档来自技高网...

【技术保护点】

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

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

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

4.根据权利要求1所述的一种优化html5页面首屏用户体验的加载技术架构,...

【技术特征摘要】

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

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

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

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

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

6.根据权利要求1所述的一种优化html5页面首屏用户体验的加载技术架构,其特征在于:步骤二...

【专利技术属性】
技术研发人员:刘勇冯岩刘文泽
申请(专利权)人:北京皮尔布莱尼软件有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1