JS执行机制

JS执行机制

 <script>
        console.log(1);
        document.onclick = function() {
            console.log('我点击了');
        }
        console.log(2);
        setTimeout(function() {
            console.log(3);
        }, 3000)
    </script>

我们想要知道这段代码的执行顺序，要先了解JS的执行机制。
１、JS作为一门浏览器脚本语言它有一大特点就是它是单线程的，那么它同一个时间只能做同一件事。
2、当执行js代码时中间如果有一段很长时间的定时器代码等着执行,难道我们要一直等着吗?为了解决这个问题,利用多核CPU的计算能力,HTML5提出了Web Worker标准,允许JavaScript脚本创建多个线程.于是,JS中就出现了同步和异步
3、同步任务:同步任务都在主线程上执行,形成一个执行栈
4 、异步任务:JS的异步是通过回调函数实现的,一般而言,异步任务分为三种类型:
(1)普通事件–如click,resize等;
(2)资源加载–如load,error等;
(3)定时器–如setInterval,setTimeout等;
异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)
5、JS先执行执行栈中的同步任务,异步任务(回调函数)将被异步进程处理放入任务队列(消息)中等待被执行.
6、就像上面代码中先在控制台输出1和2,然后那个定时器函数被放入任务队列,主线程执行完毕后,查询任务队列取出一个任务,提入主线程处理.
7、如果出现了点击触发了onclick事件,那么异步进程处理就将其放入任务队列中,当主线程查询任务队列时再将其推入主线程处理.

因为我在3秒后才点击,所以输出 3 这个事件要比点击事件先输出.

8、其中由于主线程不断地重复获得任务,执行任务,再获取任务,再执行,所以这种机制被称为事件循环(event loop)