乐趣区

关于javascript:js执行机制

jiezi
  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. 一旦执行栈中的所有同步工作执行结束，零碎就会按秩序读取工作队列中的异步工作，于是被读取的异步工作完结期待状态，进入执行栈，开始执行操作。
    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. 因而打印的后果如下：

退出移动版