【问题标题】:JQuery ajax freezes ui when response is very large当响应非常大时,JQuery ajax 冻结 ui
【发布时间】:2012-05-07 21:32:51
【问题描述】:

当我使用 JQuery ajax 函数并且响应非常大 ~1mb 时,用户界面会在调用成功函数之前冻结。我在使用 JSON.parse 函数并解析大量数据时体验过这一点。我相信这个函数是在请求返回时使用的,将内容格式化为 JSON。这是我正在使用的代码。

$.ajax({
        url: "/sessions/" + this.get("session_id") + "/get_sample_data",
        data: params,
        dataType: 'json',
        type: "GET",
        success: function (response) {
            success(response);
        }
    });

是否有覆盖响应的代码,以便我可以将解析错开成部分并希望最大限度地减少 ui 上的阻塞?还是有另一种方法来解决这个问题。我正在使用 chrome 和 chrome canary,两者的结果相同。

提前致谢

【问题讨论】:

  • 问题出在哪里?在 jQuery 中解析 JSON?还是你的代码解析 JSON?
  • 1MB 的 JSON? 1MB 纯文本???您要在单个网页上显示什么?也许你应该考虑你的查询!
  • @Amberlamps 也许你的意思是“重新思考”?在加载 JSON 游戏地图或 base64 编码的精灵地图时,我通常会看到 1MB 或更多。这是合理的,但有时它们是矫枉过正的。
  • 1mb 是未压缩的 GPS 数据。我想在这种高水平的数据上对其进行测试,以便我可以对其进行压力测试以了解系统的功能。

标签: javascript json performance jquery


【解决方案1】:

猜测是解析巨大的 JSON 响应是导致延迟的原因。如果是这种情况,那么您有以下选择:

  1. 将服务器响应分解为多个请求。
  2. 将解析分解为多个部分。
  3. 将响应发送给 Web Worker 并在 Web Worker 中对其进行解析(不适用于旧版浏览器)。

要将解析分解为多个部分,您必须更改 jQuery ajax 调用以仅返回原始文本,并且您必须创建自己的 JSON 解析器,该解析器可以在 setTimeout() 上分块完成工作,所以UI 可以在解析时保持活动状态。这将是一个合理的工作量。我假设您将从现有的 JSON 解析器开始,然后您必须对其进行修改以保存它的状态,使其可以分块工作。

如果您可以适当地修改与服务器的接口,则更改与服务器的接口以检索 JSON 片段可能是解决问题的更简单方法。

关于如何分块处理大数据的一些替代思路,可以查看Best way to iterate over an array without blocking the UI

【讨论】:

    猜你喜欢
    • 2014-08-07
    • 2015-09-06
    • 1970-01-01
    • 2016-12-09
    • 2011-03-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-31
    相关资源
    最近更新 更多