Javascript $(document).ready()是在主线程中执行,还是异步执行?

Javascript $(document).ready()是在主线程中执行,还是异步执行?,javascript,jquery,multithreading,events,asynchronous,Javascript,Jquery,Multithreading,Events,Asynchronous,我正在使用$(document).ready()中的图形可视化库,它似乎阻止了用户界面。我希望$(document).ready()在单独的线程中执行 有人知道细节吗?也许我应该使用setTimeout异步运行代码 编辑: 术语“异步”和“独立线程”在JavaScript中具有误导性。我不是JavaScript专家,也找不到更准确的术语。请参阅答案以进行澄清 除了Web工作者(不直接访问DOM)之外,JavaScript在单个线程中运行$(document).ready()是异步的,因为当加载D

我正在使用
$(document).ready()中的图形可视化库,它似乎阻止了用户界面。我希望
$(document).ready()
在单独的线程中执行

有人知道细节吗?也许我应该使用
setTimeout
异步运行代码

编辑:


术语“异步”和“独立线程”在JavaScript中具有误导性。我不是JavaScript专家,也找不到更准确的术语。请参阅答案以进行澄清

除了Web工作者(不直接访问DOM)之外,JavaScript在单个线程中运行
$(document).ready()
是异步的,因为当加载DOM时,传递给它的回调可能会立即或稍后触发,但当它的回调实际运行时,它是JS运行时正在处理的唯一事情

例如,长时间运行的
for
循环将阻塞UI线程,而不管它是否在就绪回调、事件处理程序、异步XHR的成功回调中,防止它阻塞线程的唯一方法是通过使用
setTimeout

调度稍后的块,将其分解为多个循环。JavaScript中没有单独的线程。所有JavaScript都在一个线程中执行;UI更新正在同一线程中执行。如果您的JavaScript正忙,则不会进行UI更新。“异步”在这里有点误导;这意味着函数的执行将被延迟(但仍在单个线程中)

基本上,浏览器有一个执行队列。所有事件处理程序在触发时都放入执行队列;超时函数也是如此。当任何没有调用方的函数退出时,将执行队列中的下一个函数。UI更新也在同一队列中

因此,当您执行
$(document).ready(fn)
时,它(简单地说,jQuery使它有点复杂,尤其是对于较旧的浏览器)将附加一个处理程序。当加载所有内容时,浏览器将触发此处理程序,从而将其放入执行队列。轮到它时,它会执行;它执行的任何UI更新都将在处理程序退出时绘制

--


*)单线程规则有一个例外:web工作者。每个web工作者都在自己的线程中运行,但他们的能力非常有限;基本上,只进行计算(他们根本无法访问UI)。

异步并不意味着多线程。Javascript是基于事件的,当发生某些事情(事件发生)时将调用函数。事件侦听函数不是在单独的线程上执行的,它只是计划稍后执行

但是有一种古老的技术可以在不支持浏览器的情况下模拟多线程。它将一个完整的任务分解为延迟的小任务

例如,您编写了以下内容,这将导致阻塞:

for (var i = 0; i < 10000000; i++) {
    // do something very slow
}

$(document).ready()
DOMcontentLoaded
相同@不,有区别
onload
将等待所有可见的外部资源(如内联图像)加载,而ready在其自身完全加载DOM时执行,其行为类似于在结束前加载脚本。@RayonDabre,
DOMcontentLoaded
是否在主线程中执行?@Amadan那么,我看到他刚刚进行了编辑。@Jay,JavaScript通常被认为只有一个执行线程,我无法理解您使用的术语<代码>独立线程!这样使用
setTimeout
听起来很神奇,有什么例子吗?
(function step(i) {
    if (i < 10000000) {
        // do something very slow
        setTimeout(function() {step(i + 1)}, 1);
    }
})(0);
(function() {
    var i = 0;
    (function step() {
        if (i < 10000000) {
            // do something very slow
            i++;
            setTimeout(step, 1);
        }
    })();
})();