我有一个简单的网页,用于介绍一组更复杂的数据。
这组复杂的数据需要很长时间才能呈现。
对于新用户,当他们到达简单网页时,我开始在内存中渲染复杂页面,创建 html 元素等,而不将它们插入到 dom 中。
然而,这仍然明显很慢,并导致介绍页面上的滚动停滞和滞后。
我正在考虑使用网络 worker 。但在我 promise 类似的事情之前,我会询问这是否真的是可行的方法,或者是否还有其他可能的解决方案。谢谢。
编辑:
考虑到我在渲染数据时实际上并没有访问dom,模板引擎将字符串放在一起创建html,所以网络 worker 完全没问题。
关于这个方法有什么可以分享的吗?
最佳答案
Web Workers 无疑是最佳选择。但是对于不支持 web worker 的浏览器(IE < 10),这里有一个后备方法:
如果您的代码是同步的,它会在运行时卡住浏览器。但是,如果您可以将处理过程分成适当大小的 block ,则可以将其分解到足以让浏览器有机会响应用户交互的程度。
所以,这段代码:
for (var i = 0; i < data.length; i++) {
processData(data[i]);
}
变成这样:
var i = 0;
(function processNext() {
if (i < data.length) {
processData(data[i++]);
setTimout(processNext, 0);
}
})();
这并不理想 - 如果 processData()
做的太多,UI 仍然会无响应,令人无法接受。另一方面,如果它做的不是很多,它会大大减慢您的数据处理速度。在后一种情况下,您可以在调用 setTimeout 之前一次处理一定数量的迭代:
var i = 0;
(function processNext() {
if (i < data.length) {
for (var stop = i + 100; i < stop && i < data.length; i++) {
processData(data[i]);
}
setTimout(processNext, 0);
}
})();
关于javascript预加载复杂数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9041935/