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

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

https://chromium-review.googlesource.com/c/514582/。

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

经实测 ， Chrome Canary 60 中已经修复此问题。

饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com

本文作者：饥人谷方应杭老师