javascript预加载复杂数据

Question

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

这组复杂的数据需要花费大量时间来渲染。

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

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

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

编辑：

想想看，在渲染数据时我实际上并没有访问 dom，模板引擎将字符串放在一起来创建 html，所以 webworkers 完全没问题。

有没有人可以分享一下这个方法？

Answer 1

当然，网络工作者将是一条出路。但对于不支持 Web Worker 的浏览器（IE < 10），这里有一个后备方法：

如果您的代码是同步的，它将在运行时冻结浏览器。但是，如果您可以将处理分成适当大小的块，则可以将其分解得足以让浏览器有机会响应用户交互。

因此，这段代码：

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

Answer 2

我认为 Web 工作者不适合您，因为他们无权访问 DOM。您将无法与原始网页进行交互，只能向其发送文本“消息”。

如果您只是进行计算并希望将其发送到原始网页，那么网络工作者会很棒。

var pi = Computepi();
self.postMessage('Pi is: ' + pi);

但是，您不能执行类似“

var canvas = document.createElement("canvas");
DrawComplexFractal(canvas);
self.postMessage(canvas);

没有可供网络工作人员使用的窗口或文档对象”之类的操作。