chrome 页面滚动造成 ajax 加载延迟 (952 views)

gHOST

2018-05-08 07:32:24

问题

在 chrome 下实现滚动到最下方自动加载更多,每次都有 2s 左右的延迟,体验非常差。

同样的代码,使用点击“加载更多”按钮就没有延迟。更换浏览器,滚动到最下方自动加载更多也没有出现延迟的 bug。

经过多次的重现问题,明显看到在pc的chrome,使用touch模式延迟偶尔消失,而使用mousewheel延迟又出现。故将问题定位到mousewheel事件 和其相近对应的 scroll事件中。

bug解决方案

结合上诉原因并通过查看的几个帖子讨论,得出如下结论:

  • chrome浏览器的mousewheel事件是引起这一延迟的原因(mousewheel事件不是标准事件,不推荐大家使用),当然!代码中我并没有使用mousewheel事件,但是使用scroll事件就可能会引起mousewheel事件的冲突,而在我们特质的手机客户端中的webview不幸的也命中了这一缺陷。

  • 想要解决这个问题,可以尝试监听这一事件(如果浏览器没有这一事件,也不会响应这一监听,没有冲突),并在事件触发的时候,取消其所有默认行为:

故通过监听其事件模型的 deltaY(鼠标垂直滚动量)当其有垂直位移的时候,触发preventDefault,故代码如下:

 window.addEventListener("mousewheel", (e) => {
   if (e.deltaY === 1) {
     e.preventDefault();
   }
 })

将这段代码加入前端基础库的页面初始化代码中,神奇的发现相关的页面content-download延迟问题都得到了解决。

参考:http://www.jb51.net/article/138858.htm