AJAX 解析大量 JSON 并存储在 localStorage答案

【问题标题】：AJAX parse big amount of JSON and store in localStorageAJAX 解析大量 JSON 并存储在 localStorage
【发布时间】：2014-02-18 23:31:56
【问题描述】：

我正在构建一个应该能够离线工作的应用程序。我正在使用 jQuery Mobile、PHP、MySQL 和 jStorage 以便轻松使用 HTML5 localStorage

我正在尝试找出将数据下载到本地设备 localStorage 并在稍后阶段使用它而不会使浏览器变慢或崩溃的最佳方法。

我在 MySQL 表中有大约 5000 条记录（500 Kb 的数据），我需要应用下载所有这些数据，以便离线时在第二阶段使用。

download_script.php 以 JSON 格式返回所有记录例如

{"1":{"1":{"p_bar":"10.30","v_0":"0.0312207306000000","h_vap":"311.78","p_10c":"99.99"}},"2":{"1":{"p_bar":"10.40","v_0":"0.0309405941000000","h_vap":"311.29","p_10c":"0.00"}},

我想知道是否有任何方法可以优化以下脚本（例如，为了不挂起浏览器，并可能显示正在下载的数据百分比）

$.ajax({
  url: "download_script.php",
  cache: false,
  success: function(big_json_dump){
  $.jStorage.set('some_key', big_json_dump);
 }
});

这种方法可以优化吗？使用 radpidjson？如何更改它以显示下载数据的实时百分比？

【问题讨论】：

首先，将 dataType 设置为“text”，这样 jquery 就不会尝试解析它，然后只需将其分配给 localstorage 键。除了使数据转储更小之外，您无法真正对其进行优化。
在使用 AJAX 方面，您可能会一筹莫展，但这里有一个想法：stackoverflow.com/a/3360510/2191572
也许这也是：stackoverflow.com/a/15405450/2191572
如果您要执行某种分块下载过程，那么使用 websockets 处理 10-20 个快速请求会好得多，因为 websockets 不需要多次启动连接，而是保持持久连接就像 DBMS 的 pconnect 一样连接到您的服务器。如果你想知道这个网站是如何快速通知通知的，这是因为它也使用了 websockets。该网站由一些最优秀、最聪明的人构建和维护，他们着眼于网站的最大利益，他们选择了 websockets。
我不确定 JSLINQ 可以使用什么样的魔法，但它看起来只是一种简单的数组/json 访问方法，通过使其可查询。我真的不会担心 500kb 的数据，除非您将其塞入单个字符串变量中。想找点乐子？打开您的任务管理器并找到内存使用部分。现在导航到此代码所在的页面 <script>var html = 'SomeString'; for(var i = 0; i < 1000000; i++){ html+= html; }</script> insert evil crazy

标签： php jquery json rapidjson jstorage

【解决方案1】：

（您在 cmets 中进行了很好的讨论，但问题没有得到解答......）

“为了不挂起浏览器”，您需要将数据分成更小的部分并分别获取每个部分（例如在循环中）。否则，解析大量 JSON 可能会使浏览器挂起几毫秒。 Rapidjson 无能为力，因为 Rapidjson 是 C++，而浏览器使用 JavaScript。

“显示数据的百分比”你需要先通知浏览器的JavaScript关于部分的总量。同样，与 Rapidjson 无关。

还有 JavaScript 流式 JSON 解析器（如 Clarinet），理论上可以解析大块的 JSON 文档。这使您可以更好地控制解析，但代价是大量 CPU 和编程复杂性。你可能需要引入一个 Web Worker 或一个不活动的时刻来保持浏览器的响应。但是，如果您使用的是 Web Worker，则可以在其中执行标准 JSON.parse：http://igorminar.github.io/webworker-json-perf/; http://blog.softwareispoetry.com/2013/05/using-web-workers-to-jsonparse-large.html

【讨论】：

【解决方案2】：

对结果进行分页，循环执行$.ajax：

var total_records = 5000; // get this number to the browser somehow.
var per_page = 75;
var total_pages = Math.floor(total_records / per_page);

for(var i = 0; i < total_pages; i++) {
    $.ajax({
      url: "download_script.php",
      cache: false,
      data: { page: i },
      success: function(big_json_dump){
      $.jStorage.set('some_key', big_json_dump);
     }
    });
}

在 PHP 中 / 在你的 SQL 语句中分页：

$page = intval($_GET['page']);
$from = $page * 50;
SELECT * FROM my_table LIMIT $from, 50;
                             ^^     ^^ total records to show
                             record_cursor

【讨论】：