前端必了解的同步和异步

（一）js引擎机制的变化

在了解js引擎机制前，我们先来看这段代码,大家认为这段代码的结果是什么呢？

<body>
    <button>点击</button>
    <script>
        console.log(1);
        document.querySelector('button').addEventListener('click', function () {
            console.log(2);
        })
        setTimeout(() => {
            console.log(3);

        }, 10000)
        console.log(4);

    </script>
</body>

在了解具体的执行结果之前，我们先说说js引擎机制的变化,最开始的js引擎机制是同步的，随着时代的发展,js引擎机制引入了异步，那么有小伙伴就问了，什么是引擎？什么是同步和异步？接下来，咱们废话不多说，直接进入到主题

（二）何为Js引擎机制

JavaScript引擎是专门处理JavaScript脚本的虚拟机。它的主要功能是将JavaScript代码编译为不同CPU对应的汇编代码，并负责执行代码、分配内存以及垃圾回收等。在早期引擎编译代码的过程中，采取同步的方式，也就是说是从上往下的顺序依次执行的，这样的方式有很大的缺点，必须要等上一个任务执行完，才能执行下一个任务，这样的编译方式会带来资源的浪费，所以后来就加入了异步

（三）何为同步和异步

在早期引擎编译代码的过程中，采取同步的方式，也就是说是从上往下的顺序依次执行的，这样的方式有很大的缺点，必须要等上一个任务执行完，才能执行下一个任务，这样的编译方式会带来资源的浪费，所以后来就加入了异步

何为同步

同步操作指的是在执行某个任务时，必须等待这个任务完成后才能继续执行下一个任务。这种模式下，任务按顺序逐一执行，前一个任务未完成时，后续任务必须等待。这就像是排队等候服务，前面的人未完成业务，后面的人无法进行。同步操作通常是阻塞的，即在等待任务完成的过程中，程序不会执行其他任务，这可能会导致资源的浪费，尤其是在等待某些耗时操作（如I/O操作）时。

假设你正在准备一顿晚餐，需要完成洗菜、切菜、炒菜等一系列步骤。在同步模式下，你会按照顺序一步一步来完成这些任务：

洗菜：你先把所有的菜都洗干净，放在一边。
切菜：接着，你把洗好的菜切成需要的形状和大小。
炒菜：最后，你开始炒菜，按照菜谱的顺序依次放入食材，翻炒至熟。

在这个过程中，每一步都必须等待前一步完成才能进行下一步。比如，你不能在菜还没洗完的时候就开始切菜，也不能在菜还没切好的时候就开始炒菜。这种按照顺序一步一步来，前一步完成后才能进行下一步的方式，就是同步。

何为异步

异步操作则允许在执行一个任务时不必等待它完成就可以继续执行其他任务。这种模式下，可以同时处理多个任务，提高了程序的效率和响应速度。当一个异步任务完成时，系统会通知相应的程序进行后续处理。异步操作通常是非阻塞的，即程序可以在等待一个任务完成的同时，继续执行其他任务。如果还是不清楚的话，和同步一样举个洗菜做饭的例子

现在，想象一下你和你妈妈一起准备晚餐。你们决定分工合作：