JS执行机制

469 阅读2分钟

javascript

javascript是一门单线程语言。 js和dom渲染共用同一个线程,因为js可以修改dom结构。dom渲染和js执行是互斥的,dom渲染js必须停止,js执行过程中dom渲染也必须停止。

异步

异步是基于js单线程的。

同步和异步区别

异步不会阻塞代码的执行,同步会阻塞代码的执行;

// 异步(callback回调函数)
console.log(100);
setTimeout(() => {
    console.log(200);
}, 2000);
console.log(300);

//同步
console.log(1);
alert(1)
console.log(3);

异步应用场景

  • 网络请求(如ajax、图片加载)
  • 定时任务(如setTimeout、setInterval)

javascript事件循环

javascript的执行机制是事件循环(Event Loop)。

1、js任务

1.1 、广义:分为同步任务和异步任务。

1.2 、细分:宏任务和微任务。

  • macro-task(宏任务):包括整体代码script,setTimeout,setInterval
  • micro-task(微任务):Promise,process.nextTick

2、js执行机制

事件循环

1、同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入Event Table并注册函数。

2、当指定的事情完成时,Event Table会将这个函数移入Event Queue。

3、主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。

4、上述过程会不断重复,也就是常说的Event Loop(事件循环)。

3、事件循环,宏任务,微任务的关系图

1、整体代码script作为第一个宏任务进入主线程;执行主线程任务时,若遇到宏任务,其回调函数被分发到宏任务Event Queue中;若遇到微任务,将其回调函数被分发到微任务Event Queue中;主线程执行结束,有微任务,执行微任务Event Queue里面的所有微任务;没有微任务,开始新的宏任务;第一轮事件循环正式结束。

2、第二轮事件循环从宏任务Event Queue开始,作为新的宏任务进入主线程,循环步骤1;

原文参考:mp.weixin.qq.com/s/MELXPrwLY…