我正在编写一个 Sencha Touch 应用程序,用户将以 JSON 格式下载 5000 条记录,并将用它们填充 Ext.List 控件。该应用程序下载记录很好,因为我只是使用 JSON.parse(...),然后使用本地存储存储将此数据添加到列表中。
当我尝试查看列表时,应用程序崩溃了,并且在 Chrome 上它滞后了很多。我想可能是我弄乱了代码,但是当我尝试使用这个 fiddle http://jsfiddle.net/Z8GVm/1/ 在 iOS safari 上进行测试时,它导致 Safari 无响应。我不是应该用 JavaScript 在 iOS safari 中保存那么多数据吗?如果这是真的,我有一个论点,即网络仍然不成熟,因为假设它可以完成 native 应用程序可以做的所有事情。
尝试使用 Chrome http://senchafiddle.com/#gxtZ9 尝试 iOS safari http://jsfiddle.net/Z8GVm/1/
最佳答案
这可能是数据量太大,无法连续处理而不让浏览器有任何循环,并且移动浏览器认为 JavaScript 已无响应。在我的四核桌面上甚至需要几秒钟的时间来处理。
您可以将其分成 block ,并在每个 block 之间让浏览器喘口气(使用 setTimeout
),如下所示。此处演示:http://jsfiddle.net/jfriend00/XFgAa/ 。请注意,这比之前在每一行都使用 document.write()
的版本快了好几倍,因为这会累积一个对象的数据值(value),并在一个 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(" ");
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();
仅供引用,在移动浏览器中,与桌面浏览器相比,您会更快地达到可用内存或本地存储的一些限制,因此您确实不应该将大量数据放入页面甚至本地存储中。
关于JavaScript 代码导致 iOS Safari 崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8689020/