一、辨别过程和线程

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 startscript endpromise1promise2setTimeout