【问题标题】：Google Chrome Lags on Large Form Data Sumbissions谷歌浏览器在大型数据提交方面滞后
【发布时间】：2013-04-17 08:56:22
【问题描述】：

总结：

我正在尝试通过表单字段输入传递 base64 编码的图像数据。我的代码在我测试过的所有浏览器上都可以正常工作，但是在 Google Chrome 上存在严重的 CPU 延迟、提交后延迟 - 其长度与提交的数据长度成正比。

详情：

我在做什么： 我的网站上有一个 SVG 编辑器，用户可以在其中创建图像以保存到他们的个人资料中。一旦用户完成他们的工作，他们点击“保存”——这会启动一些 JavaScript，通过 canvas.toDataURL() 将 SVG 转换为编码数据字符串，将其存储在隐藏的输入字段中，提交表单，然后返回用户了解他们的设计。

有什么问题？ 代码本身似乎在 Firefox 和 Google Chrome 上都没有问题。 Firefox 页面加载需要 1-2 秒，无论 data_string 大小如何。但是，在 Google Chrome 上，加载“概览”页面所需的时间与隐藏字段中提交的数据字符串的大小成正比。

例如，如果我截断不同长度的数据字符串，我会收到不同的页面加载时间：

测试图片 1：

5000 个字符 - 1.78 秒
50000 个字符 - 8.24 秒
73198 个字符 - 11.67 秒（未截断）

测试图像 2：

5000 个字符 - 1.92 秒
50000 个字符 - 8.79 秒
307466 个字符 - 42.24 秒（未截断）

我的问题：

延迟是不可接受的（因为大多数图像的大小至少为 100k）；有谁知道 Google Chrome 发生了什么？

我想重申，无论浏览器如何，服务器的响应速度都是一样的；这绝对是 Google Chrome 的客户端浏览器特定问题。

我也很欣赏其他建议。我花了一些时间试图欺骗浏览器认为数据是文件上传（通过将文本输入更改为文件输入字段，然后手动尝试形成数据并通过 javascript 提交，但我似乎无法让 Django 识别伪造的文件（因此它会出错，认为没有上传任何文件）。

【问题讨论】：

标签： javascript django forms google-chrome lag

【解决方案1】：

总结

当将数据放入实际输入字段时，Google Chrome 似乎在处理大量数据时出现问题。我怀疑这是 Chrome 尝试清理用于显示数据的内存的问题。

详情

我能够通过完全取消客户端表单并通过 javascript XMLHttpRequest 提交数据（正如我在问题结束时提到的那样）来实现解决方法，然后将用户重定向到AJAX 回调中的下一页。

我永远无法让 Django 识别手动形成的 FileField 对象（作为 multipart/form-data），但我能够让它接受手动形成的 CharField 字符串（这是我的 base64编码的画布数据）。

因为数据永远不会被放入输入字段，谷歌浏览器会立即响应。

我希望这对可能遇到类似问题的人有所帮助。

【讨论】：

【解决方案2】：

我也遇到了同样的问题，我正在寻找解决方案。在我的情况下，页面最初的几次运行没有这样的问题。然后它突然开始延迟消耗大量内存，这反过来又使我的整个系统运行非常缓慢。我在另一台 PC 上进行了尝试，就像预期的那样，在最初的几次运行中提交大尺寸的 svg 数据没有问题，但后来它也显示出同样的滞后问题。

阅读您的帖子后，我打算使用 jquery 的 ajax 来发布数据。我希望这能解决问题。

【讨论】：