DeepFE
首发于DeepFE
Chrome 文件选择延迟 Bug

Chrome 文件选择延迟 Bug

在 Chrome 更新某个版本之后,file input 控件在某些场景下会出现点击后延迟数秒才能弹出文件选择对话框的问题,并且使用以下最小实现即可触发:

<form>
  <input type="file" accept=".zip">
</form>

其中 accept 的值会影响故障表现。

此问题在各操作系统的 Chrome 上均可不稳定复现,其他浏览器则没有此问题,基本可以认定是 Chrome 的 bug。

关于此问题,在开发者群体中也有所讨论,但一直未能形成结论。

寻根究底

这个 bug 有一个很有意思的特点,就是每次延迟的时间不稳定, 这种不稳定性让人联想到和网络IO是否有关系。

Stack Overflow 用户 cute_ptr 的 0 赞回答提供了一个细节:

I Think I may have found the reason, at least on my machine: When my internet connection is on, it opens fast the file dialog when I turn it off, it is slow, then I turn it on again and it is fast again.

简单来说,网络连接的情况会影响这个 bug 的表现。

通过连接/断开 VPN 验证,当 VPN 连接时不会出现这个 bug,而断开的时候就一定会出现。

使用 Fiddler 捕获网络流量(开启TLS解密),比较两种情况下的请求,发现了一个特殊的请求:

POST https://sb-ssl.google.com/safebrowsing/clientreport/download?key=xxxxxxxxxxxxxxxx HTTP/1.1
      Host: sb-ssl.google.com
      Connection: keep-alive
      Content-Length: 194
      Content-Type: application/octet-stream
      User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
      Accept-Encoding: gzip, deflate, br
      Cookie: XXXXXXXXXXXXXX


      https://www.foobar.com/apps/home/XXXXXXXXXX
      https://www.foobar.com/apps/home/XXXXXXXXXX.zip .zip


该请求会在点击 file input 的同时触发, 其中包括了页面上下文信息和 file input 的信息,从 url 上推断属于 Chrome 的安全策略。

在国内的网络环境下,因为 某些原因 Google 服务器不可达,这个请求会花费几秒钟才会超时,在此之前会阻塞选择文件对话框的弹出,造成故障现象。

这也是国外 web 开发者和 Chromium 团队无法定位这个 bug 的根本原因: 没有人会在重现浏览器 bug 时有意断网。

反馈问题

此问题我已反馈到 Chromium Issue 638874

638874 - The system‘s file-select-popup appear too slowly, when a input has accept or multiple attribute - chromium - Monorail

并且开发团队已经开始着手解决问题

chromium-review.googlesource.com

从开发团队的回应上看, 这是 Chrome 下载文件时的安全检查策略,因为错误的实现在上传时也触发了,会在后续版本中修正。


经实测 , Chrome Canary 60 中已经修复此问题。
编辑于 2017-07-20

文章被以下专栏收录