Javascript是单线程的微妙之处/含义是什么?

时间:2014-02-26 21:25:40

标签: javascript jquery browser

我对Javascript / JQuery不是很有经验。所以我最近发现Javascript是单线程的 所以我想了解这有什么含义:

  1. 编写代码时
  2. 由于此单线程模型,在Javascript中被视为不良做法
  3. 举一个我要问的例子,在我发现这个问题的时候,我立即想到了Java的Swing。在Java的情况下,暗示着耗时的代码应该在更新UI的代码之外 同样关于2,我假设由于单线程性质而导致的不良实践示例是建议使用服务器端推送技术而不是Ajax进行实时更新。我认为这是首选的原因。

    那么有人可以解释这个话题的细微之处吗?

1 个答案:

答案 0 :(得分:5)

Swing(当没有从EDT创建手动线程时)和浏览器JavaScript DOM / UI非常类似范例 - 单线程/回调执行模型在概念上传输得相当好。

另一个存在相同的“暗示” - 任何方式阻止“UI线程”,从而阻碍用户交互。 (根据我的经验,这通常与在给定事件中循环或处理过大的数据集有关。)

SwingWorkers大致可以被认为是Web Workers,因为它们都提供了对并发执行上下文的异步抽象,而后者既不支持对UI的直接访问。但是,JavaScript无法“意外地”触摸来自不同线程的共享数据。

在“拉”与“推”方法中使用AJAX / XHR或WebSockets与JavaScript并发模型没有直接关系。它们只是同一端的独立手段,并且(几乎无处不在)异步处理。


通常,当需要拆分长时间运行的 UI操作时,例如添加数千个复杂的DOM元素(uhg!),我将setTimeout与数组一起使用作为队列。一个简单的非泛型示例可能如下所示:

function processItemsInUI (items) {
    var endTime = (+new Date) + 40 * 1000; // stop ~40ms in future
    var item;
    while ((items = items.shift()) && (+new Date) < endTime) {
       // have item, and limit not exceeded
       // processItem(item);
    }
    if (items.length) {
        // wait ~30s ms before doing more work
        setTimeout(function () { processItemsInUI(items) }, 30 * 1000);
    } else {
        // done!
    }
}

processItemsInUI(getManyManyItems());

上述替代方案包括

  1. 减少通过过滤器获取/显示的项目数量,这样可以避免与过多的UI工作相关的问题,并且;

  2. 虚拟化项目呈现,例如在Slick Grid中完成(或者说是Tumblr存档视图),以避免创建DOM元素,直到它们实际上“在视图中”。 / p>

相关问题