JS执行机制
一、JS是单线程
JavaScript语言得一大特点就是单线程,也就是说,同一个时间只能做一件事情。这是因为JavaScript这门脚本语言诞生的使命所致,JavaScript是为处理页面中用户的交互以及操作DOM而诞生。比如我们对某个DOM元素进行添加和删除操作,不能同时进行,应该先进行添加,之后再删除。
而单线程就意味着所有任务需要排队,前一个任务结束才会执行后一个任务,这样所导致的问题是如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
console.log('1')
setTimeout(() => {
console.log('2')
}, 0);
console.log('3')
二、同步和异步
程序里面所有的任务,可以分成两类:同步任务(synchronous)和异步任务(asynchronous)。
为了利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制,且不得操作 DOM。所以,这个新标准并没有改变 JavaScript 单线程的本质。
同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。
异步:异步任务是那些被引擎放在一边,不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有“堵塞”效应。
它们的本质区别是:这条流水线上各个流程的执行顺序不同。
同步任务都是在主线程上执行,形成一个执行栈。
JS的异步任务是通过回调函数实现的。
一般而言,异步任务有以下三种类型:
- 普通事件,如click,resize等;
- 资源加载,如load,error等;
- 定时器,包括setlnterval,setTimeout等。
异步任务相关回调函数添加到任务队列中。
三、JS执行机制
1、先执行执行栈中的同步任务。
2、异步任务(回调函数)放入任务队列中。
3、一旦执行栈中的所有同步任务执行完毕,系统会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
JS执行机制:
由于主线程不断重复获取任务、执行任务、再获取任务、再执行任务,所以这种机制被称为事件循环(event loop)。