#JavaScript的执行流程

预计阅读时间: 5 分钟

#执行机制

既然js是单线程语言，所以我们可以得出结论：javascript是按照语句出现的顺序执行的。

那么问题来了：我们在浏览一些门户网站时，页面上的内容是非常丰富的，包括图片、视频、广告等等，这些资源的加载是非常耗时的，难道我们要卡着直到某一张高清图片完全显示出来？然后接着再卡着去加载下一个耗时资源吗？，这对用户体验来说是非常糟糕的。

这显然是不合理的，就目前我们所看到的网站的资源加载并不是这样的，直观上的感受可以看到页面上的内容是逐渐显示的，先显示一部分，然后再显示另一部分，甚至有时候我们会发现有些文本内容是先显示出来的，而图片是后加载的。

那就与我们前面所说的结论相悖了，那么肯定是有什么机制来实现这种效果的。

#事件循环机制

js实际上将任务分成两种，一种是同步任务，一种是异步任务。

• 同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务，简单来说就是按照顺序执行的任务，这也是我们前面所说的js是按照语句出现的顺序执行的。
• 异步任务：当遇到很耗时或者需要等待的任务时，js会将这个任务交给浏览器的其他线程去执行，然后继续执行下一个任务，当这个任务执行完毕后，会将这个任务放到一个任务队列中，等待主线程空闲时，再将这个任务拿出来执行。

#流程

1. 主线程执行同步任务
2. 遇到异步任务，将异步任务交给浏览器的其他线程去执行
3. 继续执行同步任务
4. 异步任务执行完毕后，将任务放到任务队列中
5. 主线程空闲时，去任务队列中检查是否有任务，如果有就拿出来执行

这个过程就是事件循环机制，主线程不断的执行任务，

不断的运行这个过程，不断的check任务队列中是否有任务，如果有就拿出来执行，直到任务队列为空后，就会等待新的任务加入。