javascript - Google Chrome 在大格式数据提交方面落后

Question

摘要:

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

详细信息:

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

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

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

测试图像 1:

• 5000 个字符 - 1.78 秒
• 50000 个字符 - 8.24 秒
• 73198 个字符 - 11.67 秒(未 chop )

测试图像 2:

• 5000 个字符 - 1.92 秒
• 50000 个字符 - 8.79 秒
• 307466 个字符 - 42.24 秒(未 chop )

我的问题:

延迟是 Not Acceptable (因为大多数图像的大小至少为 100k)；有谁知道 Google Chrome 发生了什么事吗？

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

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

Answer 1

摘要

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

详细信息

我能够通过完全取消客户端表单并通过 javascript XMLHttpRequest 提交数据(正如我在问题末尾提到的那样)，然后将用户重定向到AJAX 回调中的下一页。

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

由于数据永远不会放入输入字段，Google Chrome 浏览器会立即响应。

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