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

Question

我在Javascript/JQuery方面不是很有经验.所以我最近发现Javascript是单线程的.
所以我试图理解这有什么含义:

1. 编写代码时
2. 由于这个单线程模型,在Javascript中被认为是不好的做法

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

那么有人可以解释这个主题的微妙之处吗？

Answer 1

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

一项所述的相同的"含义"的其他存在-不不阻止在"UI线程" 的任何方式,使得它阻止用户交互.(根据我的经验,这通常与在给定事件中循环或处理过大的数据集有关.)

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

在"拉"与"推"方法中使用AJAX/XHR或WebSocket与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元素,直到它们实际上"在视图中".