js单线程问题

首先需要理解的是浏览器是多线程，主要包括：UI线程用于渲染页面；浏览器事件触发线程用于控制交互，响应用户；js线程用于执行js任务；http线程用于处理请求（ajax是委托给浏览器新开一个http线程）；EventLoop处理线程用于轮询消息队列，然后我们写的js代码是运行在js引擎线程中，是单线程的。

在js引擎线程中，有一个主线程和任务队列，像一些同步任务会在主线程中运行，然而对于一些异步操作比如setTimeout,AJAX异步请求等会将此操作放到任务队列执行，等到异步操作完成之后会调用回调函数来执行，一定要明白执行的顺序，首先执行主线程，然后执行任务队列的内容。下面请看代码：

setTimeout(function () {
    setTimeout(function () {
        console.log(1)
    }, 100);
    console.log(2)
    setTimeout(function () {
        console.log(3)
    }, 0);
}, 0);

setTimeout(function () {
    console.log(4)
}, 100);

console.log(5)

下面来分析这段代码，在这段代码中首先一个setTimeout，js引擎会将此setTimeout放入队列，然后进去之后会将里边的两个setTimeout载依次放入队列，因为里边的输出2是同步操作，所以会立马输出2，然后最外层的setTime执行完了。出来后同样的将下边的setTimeout放入队列，输出5也是同步操作，因此会再输出5。然后队列里的setTimeout会依次执行。所以最后的输出是5 2 1 3 4

同样下面这段代码更加说明js的单线程问题

while(true){
    
}
console.log(2);

执行后，你会发现程序一直运行，不会输出2，因为while为同步操作，会在主线程执行。然后条件为true,所以会一直阻塞主线程，而不会执行下面的console。

猜你喜欢