JavaScript 代码使 iOS Safari 崩溃

Question

我正在编写一个 Sencha Touch 应用程序，用户将在其中下载 5000 条 JSON 格式的记录，并将用它们填充 Ext.List 控件。该应用程序下载记录很好，因为我只是使用 JSON.parse(...) 然后将此数据添加到使用本地存储存储的列表中。

当我尝试查看列表时，应用程序崩溃并且在 chrome 上它滞后很多。我想可能是我弄乱了代码，但是当我用这个小提琴http://jsfiddle.net/Z8GVm/1/ 对 iOS Safari 进行测试时，它使 Safari 无响应。难道我不应该用 JavaScript 在 iOS Safari 中保存这么多数据吗？如果这是真的，我认为 Web 仍然不成熟，无法假设它可以完成原生应用程序可以做的所有事情。

试试 chrome http://senchafiddle.com/#gxtZ9 试试 iOS safari http://jsfiddle.net/Z8GVm/1/

Answer 1

在不让浏览器有任何循环的情况下连续处理的数据可能太多，并且移动浏览器认为 javascript 已无响应。在我的四核桌面上处理甚至需要几秒钟。

您可以将其分成多个块，并在每个块之间像这样让浏览器喘口气（使用setTimeout）。在这里演示：http://jsfiddle.net/jfriend00/XFgAa/。请注意，这比在每一行使用document.write() 的先前版本快数倍，因为这会累积对象的数据价值并在一次 DOM 操作中一次添加所有数据，因此这个新版本的 DOM 操作数量是 1/27 .

function addBigData() {
    // populate big array
    var items = [], i;
    for (i = 0; i < 5000; i++) {
        var data = {};
        for (var j = 1; j <= 8; j++) {
            data["prop" + j] = "Some Big Data " + j;
        }

        var item = {};
        item.data = data;

        items.push(item);
    }

    i = 0;
    function addNextChunk() {
        var chunkEnd = Math.min(i + 20, items.length);
        var chunk = [], item;
        while (i < chunkEnd) {
            item = items[i++];
            chunk.push("Item " + i);
            chunk.push("<br />");
            for (var prop in item.data) {
                chunk.push("&nbsp;&nbsp;&nbsp;");
                chunk.push(prop + " = " + item.data[prop]);
                chunk.push("<br />");
            }

            chunk.push("<br /><br />");
        }
        var div = document.createElement("div");
        div.innerHTML = chunk.join("");
        document.body.appendChild(div);
        if (i < items.length) {
            setTimeout(addNextChunk, 1);
        }
    }

    addNextChunk();
}

addBigData();

仅供参考，在移动浏览器中，可用内存或本地存储空间会比桌面浏览器更快地达到一些限制，因此您真的不应该将大量数据放入页面甚至本地存储中。