谷歌Chrome在大型数据汇总方面存在滞后



摘要:

我正试图通过表单字段输入传递base64编码的图像数据。我的代码在我测试过的所有浏览器上都能很好地工作,但在谷歌Chrome上,提交后会有大量的CPU延迟,其长度与提交的数据长度成正比。

详细信息:

我在做什么:我的网站上有一个SVG编辑器,用户可以在其中创建要保存到其配置文件中的图像。一旦用户完成工作,他们就会单击"保存"-这会启动一些javascript,通过canvas.toDataURL((将SVG转换为编码的数据字符串,将其存储在隐藏的输入字段中,提交表单,并向用户返回其设计的概述。

出了什么问题代码本身似乎在Firefox和Google Chrome中都没有问题。无论数据字符串大小如何,Firefox页面加载都需要1-2秒。然而,在Google Chrome上,加载"概览"页面所需的时间与隐藏字段中提交的数据字符串的大小成比例。

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

测试图像1:

  • 5000个字符-1.78秒
  • 50000个字符-8.24秒
  • 73198个字符-11.67秒(未截断(

测试图像2:

  • 5000个字符-1.92秒
  • 50000个字符-8.79秒
  • 307466个字符-42.24秒(未截断(

我的问题:

延迟是不可接受的(因为大多数图像的大小至少为100k(;有人知道谷歌浏览器是怎么回事吗

我想重申,无论浏览器如何,服务器都以相同的速度响应;这肯定是一个客户端,浏览器特定的问题谷歌浏览器。

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

摘要

当所述数据被放入实际输入字段时,谷歌Chrome似乎在处理大量数据时遇到了问题。我怀疑这是Chrome试图清理用于显示数据的内存的问题。

详细信息

我能够实现一个变通方法,完全取消客户端表单,并通过javascript XMLHttpRequest提交数据(正如我在问题结束时所谈到的(,然后在AJAX回调中将用户重定向到下一页。

我永远无法让Django识别手动形成的FileField对象(作为多部分/表单数据(,但我能够让它接受手动形成的CharField字符串(这是我的base64编码画布数据(。

由于数据从未被放入输入字段,谷歌Chrome会毫不延迟地做出响应。

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

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

在阅读了你的文章后,我计划使用jquery的ajax来发布数据。我希望这能解决问题。

最新更新