单线程的JavaScript是如何实现异步的

如图所求，JavaScript引擎线程称为主线程，它负责解析JavaScript代码；其他可以称为辅助线程，这些辅助线程便是JavaScript实现异步的关键了！

如（代码片段2）：主线程负责自上而下顺序执行，当遇到setTimeout函数后，便将其交给定时器线程去执行，自己继续执行下面的代码！从而达到异步的目的。

不仅如此，更关键的是：

任务队列

当定时器线程计时执行完之后，会将回调函数放入任务队列中！

当这些任务加入到任务队列后并不会立即执行，而是处于等候状态！等主线程处理完了自己的事情后，才来执行任务队列中任务！

这个过程我感觉像是古代嫔妃被翻了牌子后，就需要在自己寝宫里精心准备，等待皇上批完凑折后的驾临...（哦，别想歪了!）

这段代码的执行结果：1 - 4 - 3 - 2。LOOK！2是最后打印的，哪怕该计时器的时间设置为0。通过之前的同步和异步的解释，1和4先于2打印应该很好理解了，但同样是异步，3也优先于2打印，这又是为什么呢？答案就是因为 setTimeout属于宏任务，而Promise属于微任务！

好吧~ 这就是宏任务和微任务的差别...什么？没懂？

微任务是皇后所生的，是嫡子；而宏任务是某个小妃子所生， 是庶子！你说选太子的时候谁优先？

浏览器的Event Loop

console.log(‘start‘);
setTimeout(() => {
    console.log(‘time1‘);
    Pormise.resolve().then(() => {
        console.log(‘promise1‘);
    })
}, 0);
setTimeout(() => {
    console.log(‘time2‘);
    Pormise.resolve().then(() => {
        console.log(‘promise2‘);
    })
}, 0);
Pormise.resolve().then(() => {
    console.log(‘promise3‘);
});
console.log(‘end‘);

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Web Workertitle>
head>
body>
    button onclick="startWorker()">开始button>
    button onclick="stopWorker()">停止button>
    button onclick="updateNum()">在运行时点击button>
    div id="output">div>
    div id="num">div>

    script id="worker" type="app/worker">
        function updateSync() {
            for (let i = 0; i  10000000000; i++) {
                if (i % 100000 === 0) {
                    postMessage(i);
                }
            }
        }
        updateSync();
    script>

    script>
        let worker;
        function startWorker() {
            let blob = new Blob([document.querySelector(‘#worker‘).textContent]);
            let url = window.URL.createObjectURL(blob);
            console.log(url);
            worker = new Worker(url);

            worker.onmessage = function(e) {
                document.getElementById(‘output‘).innerHTML = e.data;
            }
        }

        function stopWorker() {
            if (worker) {
                worker.terminate();
            }
        }
        
        let num = 0;
        function updateNum() {
            num++;
            document.getElementById(‘num‘).innerHTML = num;
        }
    script>
body>
html>