javascript预加载复杂数据

Question

我有一个简单的网页，用于介绍一组更复杂的数据。

这组复杂的数据需要很长时间才能呈现。

对于新用户，当他们到达简单网页时，我开始在内存中渲染复杂页面，创建 html 元素等，而不将它们插入到 dom 中。

然而，这仍然明显很慢，并导致介绍页面上的滚动停滞和滞后。

我正在考虑使用网络 worker 。但在我 promise 类似的事情之前，我会询问这是否真的是可行的方法，或者是否还有其他可能的解决方案。谢谢。

编辑:

考虑到我在渲染数据时实际上并没有访问dom，模板引擎将字符串放在一起创建html，所以网络 worker 完全没问题。

关于这个方法有什么可以分享的吗？

Answer 1

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);
    }
})();