1

概括：

我正在尝试通过表单字段输入传递 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 的客户端浏览器特定问题。

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

4

2 回答 2

1

概括

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

细节

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

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

由于数据从未放入输入字段，因此 Google Chrome 会立即响应。

我希望这可以帮助任何可能遇到类似问题的人。

于 2013-04-30T23:43:40.310 回答
0

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

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

于 2013-05-02T14:49:41.950 回答