[发明专利]一种前端页面请求的预计响应时间的智能显示方法及装置

说明书

技术领域

本发明涉及网站页面领域，尤其涉及一种前端页面请求的预计响应时间的智能显示方法及装置。

背景技术

目前Web前端页面中，每个请求都是需要将数据发送到服务器然后再返回，这个过程将会消耗一定时间。

如图1所示，目前类似的前端提示都比较单调，基本上都是出现一个loading的效果图，提示用户一直等待返回结果，用户不知道多久才会有返回结果。这个原理实现的逻辑也比较简单，发出请求时，把加载的效果显示出来，然后监听ajax的success返回数据后把加载效果移除就可以。

然而这种仅显示loading的方式会让用户感到困惑或者不耐烦，因为这个等待的时间不知道是几秒钟还是几分钟，有的时候等了好长时间都还是显示loading的效果图，让用户的体验及其糟糕。

因此，本发明实施例为解决这个痛点，通过结合历史点击返回的时间，预测出一个响应时间，让用户点击之前能够预知，减少等待未知时间所产生的烦躁感，提高浏览体验。

发明内容

本发明实施例提供了一种前端页面请求的预计响应时间的智能显示方法及装置，用于解决传统方法仅显示loading效果图导致用户体验糟糕的技术问题。

本发明实施例提供的一种前端页面请求的预计响应时间的智能显示方法，包括：

S1：收集页面元素，取得页面元素n的请求值RIDn并发送至服务端，计算服务端收到请求值RIDn与服务端返回数据的时间差作为页面元素n对应的响应时间T_RIDn；

S2：当检测到用户终端打开前端页面时，发送一个取得本页面所有页面元素的响应时间的请求至服务端并记录当前时间值为t1；

S3：接收到服务端返回的包含所有页面元素的响应时间的数据并记录当前时间值为t2；

S4：计算用户终端的网络延时基数T_D＝t2-t1；

S5：检测到用户终端的鼠标坐标参数对应到页面元素n时，通过页面元素n对应的响应时间T_RIDn和用户终端的网络延时基数T_D相加计算获得页面元素n的前端页面请求的预计响应时间Tn＝T_RIDn+T_D；

S6：在页面上将页面元素n预计响应时间Tn显示在页面元素n的旁边。

优选地，所述步骤S1具体包括：

S101：当检测到第一用户终端打开前端页面时，收集第一用户终端的页面元素；

S102：取得页面元素n的请求值RIDn并发送至服务端，计算服务端收到请求值RIDn与服务端返回数据的时间差作为页面元素n对应的响应时间T_RIDn；

S103：对计算得到的页面元素n对应的响应时间T_RIDn与服务器存储的页面元素n对应的响应时间T_RIDn求平均值并将求得的平均值更新至服务器作为服务器存储的页面元素n对应的响应时间T_RIDn；

S104：当检测到下一个用户终端打开前端页面时，收集下一个用户终端的页面元素并执行步骤S102。

优选地，所述步骤S1中收集页面元素之后，取得页面元素n的请求值RIDn并发送至服务端之前还包括：

检测页面元素n对应的ID是否为前端页面元素的唯一请求值RID，若否，则跳过对页面元素n的计算，若是，则继续对页面元素n的计算。

优选地，所述步骤S1之前还包括：

S0：对前端页面进行初始化，遍历DOM树。

优选地，所述步骤S4之后还包括：

从接收到的服务端返回的包含所有页面元素的响应时间的数据中提取与页面元素n对应的响应时间T_RIDn。

本发明实施例提供的一种前端页面请求的预计响应时间的智能显示装置，包括：

页面元素响应时间计算模块，用于收集页面元素，取得页面元素n的请求值RIDn并发送至服务端，计算服务端收到请求值RIDn与服务端返回数据的时间差作为页面元素n对应的响应时间T_RIDn；

响应时间请求发送模块，用于当检测到用户终端打开前端页面时，发送一个取得本页面所有页面元素的响应时间的请求至服务端并记录当前时间值为t1；

接收数据模块，用于接收到服务端返回的包含所有页面元素的响应时间的数据并记录当前时间值为t2；

网络延时基数计算模块，用于计算用户终端的网络延时基数T_D＝t2-t1；

页面请求预计响应时间计算模块，用于检测到用户终端的鼠标坐标参数对应到页面元素n时，通过页面元素n对应的响应时间T_RIDn和用户终端的网络延时基数T_D相加计算获得页面元素n的前端页面请求的预计响应时间Tn＝T_RIDn+T_D；