关于javascript:浅谈JS的运行机制

一、辨别过程和线程

1、过程是 cpu 资源分配的最小单位（是能领有资源和独立运行的最小单位）
2、线程是 cpu 调度的最小单位（线程是建设在过程的根底上的一次程序运行单位，一个过程中能够有多个线程）
3、不同过程之间也能够通信，不过代价较大
4、个别通用的叫法：单线程与多线程，都是指在一个过程内的单和多。（所以外围还是得属于一个过程才行）

二、浏览器都蕴含哪些过程

咱们晓得：浏览器是多过程的，再来看看它到底蕴含哪些过程：（为了简化了解，仅列举次要过程）

1、Browser 过程：浏览器的主过程（负责协调、主控），只有一个。

• 负责浏览器界面显示，与用户交互。如后退，后退等
• 负责各个页面的治理，创立和销毁其余过程
• 将 Renderer 过程失去的内存中的 Bitmap，绘制到用户界面上

• 网络资源的治理，下载等

  2、第三方插件过程：每种类型的插件对应一个过程，仅当应用该插件时才创立

  3、GPU 过程：最多一个，用于 3D 绘制等

  4、浏览器渲染过程（浏览器内核）（Renderer 过程，外部是多线程的）：默认每个 Tab 页面一个过程，互不影响。次要作用为：页面渲染，脚本执行，事件处理等

  ps.
  在浏览器中关上一个网页相当于新起了一个过程（过程内有本人的多线程）
  当然，浏览器有时会将多个过程合并（譬如关上多个空白标签页后，会发现多个空白标签页被合并成了一个过程）。

  三、浏览器多过程的劣势

  相比于单过程浏览器，多过程有如下长处：
  1、防止单个 page crash 影响整个浏览器
  2、防止第三方插件 crash 影响整个浏览器
  3、多过程充分利用多核优势
  4、方便使用沙盒模型隔离插件等过程，进步浏览器稳定性

  四、浏览器内核（渲染过程）

  对于一般的前端操作来说，最重要的是什么呢？答案是渲染过程。能够这样了解，页面的渲染，JS 的执行，事件的循环，都在这个过程内进行。
  浏览器的渲染过程蕴含的线程（列举一些次要常驻线程）：

  1、GUI 渲染线程

• 负责渲染浏览器界面，解析 HTML，CSS，构建 DOM 树和 RenderObject 树，布局和绘制等。
• 当界面须要重绘（Repaint）或因为某种操作引发回流 (reflow) 时，该线程就会执行

• 留神，GUI 渲染线程与 JS 引擎线程是互斥的，当 JS 引擎执行时 GUI 线程会被挂起（相当于被解冻了），GUI 更新会被保留在一个队列中等到 JS 引擎闲暇时立刻被执行。

  2、JS 引擎线程

• 也称为 JS 内核，负责解决 Javascript 脚本程序。（例如 V8 引擎）
• JS 引擎线程负责解析 Javascript 脚本，运行代码。
• JS 引擎始终期待着工作队列中工作的到来，而后加以解决，一个 Tab 页（renderer 过程）中无论什么时候都只有一个 JS 线程在运行 JS 程序

• 同样留神，GUI 渲染线程与 JS 引擎线程是互斥的，所以如果 JS 执行的工夫过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

  3、事件触发线程

• 归属于浏览器而不是 JS 引擎，用来管制事件循环（能够了解，JS 引擎本人都忙不过来，须要浏览器另开线程帮助）
• 当 JS 引擎执行代码块如 setTimeOut 时（也可来自浏览器内核的其余线程, 如鼠标点击、AJAX 异步申请等），会将对应工作增加到事件线程中
• 当对应的事件合乎触发条件被触发时，该线程会把事件增加到待处理队列的队尾，期待 JS 引擎的解决

• 留神，因为 JS 的单线程关系，所以这些待处理队列中的事件都得排队期待 JS 引擎解决（当 JS 引擎闲暇时才会去执行）

  4、定时触发器线程

• 传说中的 setInterval 与 setTimeout 所在线程
• 浏览器定时计数器并不是由 JavaScript 引擎计数的,（因为 JavaScript 引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的精确）
• 因而通过独自线程来计时并触发定时（计时结束后，增加到事件队列中，期待 JS 引擎闲暇后执行）

• 留神，W3C 在 HTML 规范中规定，规定要求 setTimeout 中低于 4ms 的工夫距离算为 4ms。

  5、异步 http 申请线程

• 在 XMLHttpRequest 连贯后是通过浏览器新开一个线程申请

• 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，再由 JavaScript 引擎执行。

  五、JS 的运行机制

  • JS 分为同步工作和异步工作
  • 同步工作都在主线程上执行，造成一个执行栈
  • 主线程之外，事件触发线程治理着一个工作队列，只有异步工作有了运行后果，就在工作队列之中搁置一个事件。
  • 一旦执行栈中的所有同步工作执行结束（此时 JS 引擎闲暇），零碎就会读取工作队列，将可运行的异步工作增加到可执行栈中，开始执行。

macrotask（宏工作）与 microtask（微工作）

JS 中分为两种工作类型：macrotask 和 microtask，在 ECMAScript 中，microtask 称为 jobs，macrotask 可称为 task。

1、macrotask（又称之为宏工作），能够了解是每次执行栈执行的代码就是一个宏工作（包含每次从事件队列中获取一个事件回调并放到执行栈中执行）

• 每一个 task 会从头到尾将这个工作执行结束，不会执行其它

• 浏览器为了可能使得 JS 外部 task 与 DOM 工作可能有序的执行，会在一个 task 执行完结后，在下一个 task 执行开始前，对页面进行从新渲染

  2、microtask（又称为微工作），能够了解是在以后 task 执行完结后立刻执行的工作

• 也就是说，在以后 task 工作后，下一个 task 之前，在渲染之前
• 所以它的响应速度相比 setTimeout（setTimeout 是 task）会更快，因为无需等渲染

• 也就是说，在某一个 macrotask 执行完后，就会将在它执行期间产生的所有 microtask 都执行结束（在渲染前）

  3、别离什么样的场景会造成 macrotask 和 microtask 呢？

  macrotask：主代码块，setTimeout，setInterval 等（能够看到，事件队列中的每一个事件都是一个 macrotask）
  microtask：Promise，process.nextTick 等

  4、总结下运行机制：

• 执行一个宏工作（栈中没有就从事件队列中获取）
• 执行过程中如果遇到微工作，就将它增加到微工作的工作队列中
• 宏工作执行结束后，立刻执行以后微工作队列中的所有微工作（顺次执行）
• 以后宏工作执行结束，开始查看渲染，而后 GUI 线程接管渲染

• 渲染结束后，JS 线程持续接管，开始下一个宏工作（从事件队列中获取）

  对于 macrotask 与 microtask，举个栗子：

  console.log('script start');
  
  setTimeout(function() {console.log('setTimeout');
  }, 0);
  
  Promise.resolve().then(function() {console.log('promise1');
  }).then(function() {console.log('promise2');
  });
  
  console.log('script end');

  由上可知，正确执行程序是这样子的：

  script start
  script end
  promise1
  promise2
  setTimeout