ajax用https请求不了_Chrome滚动事件概率性Block Ajax请求

最近发现一件有意思的事情，在Chrome 61 62 64 68版本上（也许不止这些版本），滚动事件会概率性Block住Ajax请求或者其它的异步事件，具体表现为，只要用户使用鼠标滚轮滚动页面，请求就一直Pending， Promise、setTimeout 这些异步行为也不会往下走。如果直接拖动滚动条，则不会出现这一问题。

这个问题多出现在滚动到底/顶触发请求的场景，比如聊天列表滚动到顶拉取IM消息，网页滚动到底拉取新的博客这种。

可以自己测试一下玩玩看，HTML代码如下（知乎竟然不支持上传html文件...）。

这个问题不是必现的，感觉上似乎得滚动得很快才能复现，本组测试妹子使用这个html可以多次复现，可以清楚地看到图片请求被Pending在那里，即便她停止滚动，请求依旧Pending，而通过滚动条触发的请求则不会被Pending。（那一刻我震惊了...）

<!--Reproduction of https://bugs.chromium.org/p/chromium/issues/detail?id=661155
--><html><head><title>Scroll network throttling</title><style>.fixed {position: fixed;}img {width: 120px;height: 120px;background: #777;}body {background: repeating-linear-gradient(to bottom, #ddd, #ddd 40px, #fff 40px, #fff 80px);}</style></head><body><p>Scroll the page and don't stop (easiest on devices with inertia scrolling or a free-scrolling wheel). After 1000px of scrolling the image src will be set.</p><div class="fixed"><img id="img" /></div><div style="height: 20000%"></div><script>// Bug only occurs if there is a touch listener attached to any element (even if marked as passive)document.body.addEventListener('touchstart', () => {});const initialScrollOffset = window.pageYOffset;const img = document.getElementById('img');const setSrc = () => {img.src = 'http://placeimg.com/200/200/any';}const scrollCallback = (e) => {if (window.pageYOffset - initialScrollOffset < 1000) {return;}document.removeEventListener('scroll', scrollCallback);setSrc();}document.addEventListener('scroll', scrollCallback)</script></body>
</html>

所以，奇怪的知识增加了！开心！

——————————————————————————————————————

分割线后是详细的调查过程，主要研究目标是Content Download耗时过长问题。

事情的起因是这样的：

有用户报障说卡顿，远程看了一下发现请求的Timing里Content Download耗时特别久，虽然官方文档说Content Download只是Chrome从收到响应的第一个比特开始，到接收完所有数据的耗时，但是由于当时网络延迟很低，只有6ms，也没有丢包，所以我觉得3KB的东西不太可能传700ms，于是开始研究Content Download耗时这个问题。

有博客[1]的问题描述跟我们比较相似，大致意思是Chrome浏览器对于mousewheel实现的不标准，即便使用scroll事件也会相互影响，解决方案是干掉window下mousewheel事件的默认行为。但是这个结论怎么看怎么诡异，同时我这边也不能复现问题，所以没有办法验证。

于是继续查，在这篇博客[2]里，有对应的gif录像，大致意思是用鼠标滚轮触发请求之后，在Chrome里会一直转圈，在其它浏览器里都正常，同时如果用鼠标拖动滚动条也是正常的，所以怀疑Chrome有bug，但是他试验出来网络请求就是一直Pending，并不会触发Content Download时间过长。

另外，在某个提问[3]中，也叙述了Chrome中使用鼠标的滚动事件block住异步行为的问题。

同时，在Chrome的某个issue页[4]中找到了相关的描述和复现方式，请测试妹纸复现成功，验证在我们QT 5.12编译出来的 Chrome 61版本的应用中确实可以复现这个问题。

所以我想了一下，第一篇博客那个诡异的结论可能是在服务端返回第一个比特之后，再触发的异步行为被block，不过，我实在是复现不了。我能够确认的是，Chrome真的有滚动block异步行为的问题，不过可能触发条件太tricky了，所以直到现在，这个问题还是没有修复的记录[5]。

ajax用https请求不了_Chrome滚动事件概率性Block Ajax请求相关推荐

ajax不执行_好程序员Java学习路线分享原生Ajax的使用
好程序员Java学习路线分享原生Ajax的使用,首先我们先来看一下什么是 AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 就是异步.JavaScript ...
ajax请求到参数太大获取参数失败问题,Ajax请求参数较长导致请求失败
Ajax请求参数比较长,第5行参数大概1100个字符吧,是接口的请求报文. $.ajax({ type:"POST", url:"${ctx}/test.action?m ...
JavaWeb-----Ajax异步请求 json对象服务器如何返回json数据使用ajax完成一个案例
1. 回顾 1. servlet的生命周期: 2. filter: 过滤放行和拦截一些资源.比如:黑白名单,登录校验,编码设置等. (1)创建一个类并实现Filter接口以及重写接口的抽象方法 ...
ajax将响应结果显示到iframe,脚本化HTTP 取得响应指定请求
脚本化HTTP 下面将会用js代码操纵HTTP 下面将会说明在没有致使web浏览器从新加载任何窗口或者窗体的状况下,脚本实现web浏览器和服务器之间的通讯. ajax:为一种找早起避免页面重载而动态更 ...
ajax put请求_前端基础面试：手写一个ajax,说说XMLHttpRequest 都有哪些属性?
前言在 Ajax 出现之前,网页想要和服务器通信,最常用的方式是使用 form 表单:用户提交表单后,浏览器就开始跳转,服务器接收表单并处理,然后将新的网页返回给浏览器:整个过程用户都只有等待,用户 ...
jq中法可以发起ajax请求的方法有,jQuery实现监控页面所有ajax请求的方法
本文实例讲述了jQuery实现监控页面所有ajax请求的方法.分享给大家供大家参考,具体如下: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想到的解决 ...
ajax请求数据 ztree_ajax 异步获取数据填充到表格显示(ajax) 文档(Options API) DataTables中文网...
描述(Description) 使用这个参数可以让 DataTables 像使用jQuery ajax 一样从一个数据源获取数据,最终获取到返回的数据来显示表格,DataTables 支持 Java ...
.netcore 判断是否 ajax 请求_第3部分-异步使用2-2：Ajax 之状态码
参考资料:AJAX 状态值(readyState)与状态码(status)详解一.AJAX实际运行中的几种状态值 AJAX实际运行当中,对于访问XMLHttpRequest(XHR)时并不是一次完成 ...
jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...

ajax用https请求不了_Chrome滚动事件概率性Block Ajax请求

ajax用https请求不了_Chrome滚动事件概率性Block Ajax请求相关推荐

最新文章

热门文章