JavaScript代码会导致iOS Safari崩溃

Question

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

当我尝试查看列表时，应用程序崩溃，在chrome上它滞后很多。我想可能是我搞砸了代码，但当我尝试在iOS safari上测试这个小提琴http://jsfiddle.net/Z8GVm/1/，它抛出safari无响应。我不应该在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操作中，所以这个新版本的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();

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