[发明专利]一种监听前端页面元素展现方法、电子设备及存储介质

说明书

本申请提供了一种监听前端页面元素展现方法、装置、电子设备及可读存储介质，其特征在于，包括：S1、判断前端页面视图是否处于滚动状态；S2、如果前端页面视图不处于滚动状态，则向页面元素发送信息请求，所述信息请求中包括页面元素计算位置的指令；S3、页面元素获取信息请求，根据页面元素计算位置的指令，判断页面元素是否处于页面视图范围；S4、如果页面元素处于页面视图范围，则向第一页面事件发送页面元素的消息队列，第一页面事件根据消息队列对页面元素进行处理；S5、第一页面事件将页面元素处理信息发送给服务器。采用本发明能够可以提升前端页面性能，提高页面展现的准确性。

技术领域

本发明涉及前端页面处理的技术领域，尤其涉及一种监听前端页面元素展现方法、电子设备及存储介质。

背景技术

对于设计的页面元素的大小往往比前端页面视图大的多，尤其是是在手机APP的页面视图的情况下，手机页面的视图远小于设计的页面元素的大小，后端人员需要根据用户对前端页面的点击、浏览统计等行为对页面元素进行处理，对于页面元素的展现需要依赖用户的滚动操作，而需要展现的元素出现在手机页面视图情况下，手机会向服务器发送请求通知记录展现的元素，而现有技术中一方面由于页面视图即便处于惯性滚动状态下，也需要对全部的页面元素保持监听状态，而监听状态会导致页面滚动卡顿，体验变差，另一方面由于未区分页面视图展现的元素与全部页面元素，导致所有元素都处于需要计算位置的状态，这进一步影响了前端页面的流畅度。

本发明，主要就是为了解决前端页面元素监听与展现的技术问题，首先判断页面视图是否处于滚动状态，在滚动状态下，不进行页面元素的监听，在不处于滚动状态，则计算页面的位置，在确保页面视图范围内的页面元素进行展现，再将页面事件对页面元素的处理情况发送给服务器用于记录页面元素处理情况。本发明对页面元素进行了组件化处理，页面首先监听到不处于滚动状态，才发送信息请求进行页面元素页面视图范围内的处理，因此本发明能够提升页面展现性能。

发明内容

为解决现有状况的不足，本发明针对以上背景技术的缺陷，本发明提出了一种监听前端页面元素展现方法、装置、电子设备及计算机可读存储介质。

本申请第一方面提出了一种监听前端页面元素展现方法，其特征在于，包括：

S1、判断前端页面视图是否处于滚动状态；

S2、如果前端页面视图不处于滚动状态，则向页面元素发送信息请求，所述信息请求中包括页面元素计算位置的指令；

S3、页面元素获取信息请求，根据页面元素计算位置的指令，判断页面元素是否处于页面视图范围；

S4、如果页面元素处于页面视图范围，则向第一页面事件发送页面元素的消息队列，服务器根据消息队列对页面元素进行处理；

S5、第一页面事件将页面元素处理信息发送给服务器。

进一步地，判断前端页面视图是否处于滚动状态的方法包括：

S11、获取页面视图第一预设时间内的滚动距离或第二预设时间内页面视图顶部到页面顶部元素的距离差值；

S12、判断所述滚动距离或距离差值是否大于0；

S13、如果所述滚动距离或距离差值大于0，则页面视图依然处于滚动状态，否则页面视图不处于滚动状态。

进一步地，所述S1之后还包括，如果前端页面视图处于滚动状态，则不向页面元素发送信息请求。

进一步地，所述S3中判断页面元素处于页面视图范围的方法包括：

S31、获取页面视图顶部到页面顶部元素的距离L1、页面视图的高度S、视图页面元素的高度H、视图页面元素顶部到页面顶部元素的距离L2；