【JS】js执行机制

• Z时代
• 2024-01-10
• 分类：技术分享

1. js最大特点是单线程的，单线程意味着所有任务需要排队，这样会导致一个问题：如果js执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
2. 为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许javascript脚本创建多个线程，于是js出现了同步和异步。

3. js执行机制将任务分为同步任务和异步任务

   1. 同步任务

      同步任务都在主线程上执行，形成一个执行栈

   2. 异步任务

      js的异步是通过回调函数实现的，分为以下三类

      1. 普通事件：click等
      2. 资源加载：onload等
      3. 定时器：setTimeout等

4. js执行机制实现

   1. 先执行执行栈中的同步任务
   2. 异步任务（回调函数）放入任务队列中。
   3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行操作。
   4. 
   5. 由于主线程不断的重复获得任务、执行任务，再获得任务，再执行，这种机制被称为事件循环

5. 用例分析

   console.log(1);
   document.onclick = function () {
   console.log('click');
   };
   console.log(2);
   setTimeout(function () {
   console.log(3);
   },3000);

   将上述js代码按照从上往下的次序放入执行栈中，如下图所示：

执行过程：

1. 依次执行打印1，将onclick事件交由异步处理程序，打印2，将setTimeout事件交由异步处理程序

2. 在setTimeout设置的3秒之前点击页面

   1. 异步进程在点击页面事件开始后，将处理函数（回调函数打印click）交由任务队列中
   2. 3秒之间完成之后，异步处理程序将回调函数（打印3）交由任务队列中
   3. 事件循环在主线程完成之后不断监听任务队列是否为空，不为空，将任务按照先进先出的原则将任务交由主线程进行执行
   4. 因此打印的结果如下：

   

3. 在setTimeout设置的3秒之后点击页面

   1. 3秒之间完成之后，异步处理程序将回调函数（打印3）交由任务队列中
   2. 异步进程在点击页面事件开始后，将处理函数（回调函数打印click）交由任务队列中
   3. 事件循环在主线程完成之后不断监听任务队列是否为空，不为空，将任务按照先进先出的原则将任务交由主线程进行执行
   4. 因此打印的结果如下：

      

以上是 【JS】js执行机制 的全部内容， 来源链接： utcz.com/a/113115.html