Question

我有一个简单的网页，可以作为更复杂的数据集的介绍。

这一复杂的数据集需要花费大量时间进行渲染。

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

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

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

编辑：

考虑到这一点我在呈现数据时实际上并没有访问dom，模板引擎将字符串放在一起创建html，所以webworkers完全没问题。

有没有人可以分享这种方法？

Answer 1

当然，网络工作者将是最佳选择。但对于不支持Web工作者的浏览器（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()做得太多，用户界面仍会无法接受地反应迟钝。另一方面，如果它没有做太多，它可以减慢你的数据处理速度。在后一种情况下，您可以在调用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 worker适合您，因为他们无法访问DOM。您将无法与原始网页进行交互，然后发送文本＆＃34;消息＆＃34;到它。

如果您只是在进行计算并希望将这些计划发送到原始网页，那么网络工作人员就会很棒。

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

但是你不能做像

这样的事情

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

网络工作者没有可用的窗口或文档对象。

javascript预加载复杂数据

2 个答案: