JS在浏览器中的执行机制

对JS执行机制进行一些梳理

单线程

JS是单线程执行的,但并不代表浏览器只有一个线程，它还包括：

• UI渲染线程
• 浏览器事件触发线程
• http请求线程
• 计时器线程
• EventLoop轮询的处理线程

JS可以操作dom，影响渲染，所以JS线程和UI线程是互斥的，这也就解释了为什么JS执行时会阻塞页面的渲染。

单个JS文件中语句的执行机制

1. 所有的同步语句，直接执行
2. 如果遇到异步任务，就把它放到浏览器对应的线程中去执行，然后执行下一条语句。异步任务如果执行完毕，浏览器就会将它的回调函数放到异步队列中去
3. 完成JS文件的执行

执行栈

JavaScript 只是一个单线程的编程语言，这意味着它只有一个执行栈，这样它只能一次做一件事情。 如果前面的语句没有返回，那么后面的语句都会被阻塞调，这就是JS选择异步的原因。 执行栈会依次执行当前栈中的代码，而把什么代码放入执行栈中，是由事件循环决定的

事件循环

一个脚本文件从第一行开始到最后运行完成可以看作是一个entry task，即初始化任务。这就是事件循环中的第一个宏任务，该宏任务会首先放入执行栈中执行。而在这个任务中，我们有可能使用了setTimeout、Ajax、Promise等接口，这样我们就在该宏任务中注册了很多的异步任务。异步任务会直接跳过，接着执行宏任务中的同步语句，直到当前JS文件执行完毕，第一个宏任务就完成了，执行栈为空。此后，事件循环线程会按照规定的逻辑，把要处理的任务放至JS线程的执行栈中

具体的事件循环规则，请参考： javascript事件循环(浏览器/node)

转载于:https://juejin.im/post/5c2dbcc86fb9a049d37f3913