JS之 JavaScript运行机制

Lee_Q
103 阅读14分钟

JS之JavaScript运行机制

本文学习目标如下：

  1. 了解进程与线程的基础概念，明确在浏览器中的进程与线程机制；
  2. 了解在浏览器与Node中的事件循环机制；

1、进程与线程

1.1 概述

进程：是CPU资源分配的最小单位。

通俗来讲，是进行中的程序，可以理解为一个可以独立运行且拥有自己的资源空间的任务程序，进程包括运行中的程序和程序所使用到的内存和系统资源。

线程：是CPU调度的最小单位。

线程是建立在进程的基础上的一次程序运行单位，通俗点解释线程就是程序中的一个执行流，一个进程可以有多个线程。

一个进程中只有一个执行流称作单线程，即程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。

一个进程中有多个执行流称作多线程，即在一个程序中可以同时运行多个不同的线程来执行不同的任务， 也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。

CPU是计算机的核心，承担所有的计算任务。CPU可以有很多进程，每个进程之间是相互独立。CPU在运行一个进程时，其他的进程处于非运行状态。CPU使用 时间片轮转调度算法 来实现同时运行多个进程。CPU给每个进程分配资源空间，CPU资源固定，分出去越多，越卡。

区别： 进程是操作系统分配资源的最小单位，线程是程序执行的最小单位。

一个进程由一个或多个线程组成，线程可以理解为是一个进程中代码的不同执行路线。

进程之间相互独立，但同一进程下的各个线程间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号)。

调度和切换：线程上下文切换比进程上下文切换要快得多。

1.2 多进程和多线程

  • 多进程：指在同一时间、同一计算机系统中允许两个或两个以上的进程处于运行状态。比如：在网易云听歌的同时打开编辑器敲代码，编辑器和网易云的进程之间互不干扰；

  • 多线程：指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，即允许单个程序创建多个并行执行的线程来完成各自的任务；

1.3 浏览器进程分类

  • 浏览器作为前端的重要开发工具，了解浏览器进程结构对我们开发有很大的帮助。比如拿Chrome来说，我们每打开一个Tab页就会产生一个进程。浏览器主要进程包含如下：

1.3.1 浏览器进程（Browser Process）

  1. 浏览器的主进程(负责协调、主控)，该进程只有一个；
  2. 负责浏览器界面显示，与用户交互。如前进，后退等；
  3. 负责各个页面的管理，创建和销毁其他进程；
  4. 将渲染(Renderer)进程得到的内存中的Bitmap(位图)，绘制到用户界面上；
  5. 网络资源的管理，下载等；

1.3.2 渲染进程（Renderer Process）

  1. 即通常所说的浏览器内核(Renderer进程，内部是多线程)；
  2. 每个Tab页面都有一个渲染进程，互不影响；
  3. 主要作用为页面渲染，脚本执行，事件处理等；

1.3.3 网络进程（NetWork Process）

  1. 负责网络请求处理，如HTTPS 加密、Cookie、缓存等网络协议和机制；
  2. 负责网络响应处理，如 HTTP 错误、网络超时等异常情况；
  3. 负责处理浏览器的安全机制，如 SSL/TLS 加密、证书验证、XSS 攻击和 CSRF 攻击等；

1.3.4 GPU进程（GPU Process）

  1. 该进程也只有一个，用于3D绘制等等；

1.3.5 插件进程（Plugin Process）

  1. 每种类型的插件对应一个进程，当使用该插件时才创建；

为什么浏览器要多进程

假设浏览器是单进程，那么某个Tab页崩溃了，就影响了整个浏览器，体验就会很差；同理如果插件崩溃了也会影响整个浏览器。 浏览器进程有很多，每个进程又有很多线程，都会占用内存。基于以上原因决定了浏览器要多线程。

1.4 渲染进程

页面的渲染，JS的执行，事件的循环，都在渲染进程内执行，所以我们要重点了解渲染进程渲染进程是多线程的，看渲染进程的一些常用较为主要的线程：

1.4.1 GUI渲染线程

  1. 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等； ① 解析html代码(HTML代码本质是字符串)转化为浏览器认识的节点，生成DOM树，也就是DOM Tree； ② 解析css，生成CSSOM(CSS规则树)； ③ 把DOM Tree 和CSSOM结合，生成Rendering Tree(渲染树)；

  2. 当我们修改了一些元素的颜色或者背景色，页面就会重绘(Repaint)；

  3. 当我们修改元素的尺寸，页面就会回流(Reflow)；

  4. 当页面需要Repaing和Reflow时GUI线程执行，绘制页面；

  5. 回流(Reflow)比重绘(Repaint)的成本要高，我们要尽量避免Reflow和Repaint；

  6. GUI渲染线程与JS引擎线程是互斥的： ① 当JS引擎执行时GUI线程会被挂起(相当于被冻结了)； ② GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行；

1.4.2 JS引擎线程

  1. JS引擎线程就是JS内核，负责处理Javascript脚本程序(例如V8引擎)；

  2. JS引擎线程负责解析Javascript脚本，运行代码；

  3. JS引擎一直等待着任务队列中任务的到来，然后加以处理： ① 浏览器同时只能有一个JS引擎线程在运行JS程序，所以js是单线程运行的； ② 一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序；

  4. GUI渲染线程与JS引擎线程是互斥的，js引擎线程会阻塞GUI渲染线程 ① 就是我们常遇到的JS执行时间过长，造成页面的渲染不连贯，导致页面渲染加载阻塞(就是加载慢)； ② 例如浏览器渲染的时候遇到

1.4.3 事件触发线程

  1. 属于浏览器而不是JS引擎，用来控制事件循环，并且管理着一个事件队列(task queue)；

  2. 当js执行碰到事件绑定和一些异步操作(如setTimeOut，也可来自浏览器内核的其他线程，如鼠标点击、AJAX异步请求等)，会走事件触发线程将对应的事件添加到对应的线程中(比如定时器操作，便把定时器事件添加到定时器线程)，等异步事件有了结果，便把他们的回调操作添加到事件队列，等待js引擎线程空闲时来理；

  3. 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理；

  4. 因为JS是单线程，所以这些待处理队列中的事件都得排队等待JS引擎处理；

1.4.4 定时触发器线程

  1. setInterval与setTimeout所在线程；
  2. 浏览器定时计数器并不是由JavaScript引擎计数的(因为JavaScript引擎是单线程的，如果处于阻塞线程状态就会影响记计时的准确)；
  3. 通过单独线程来计时并触发定时(计时完毕后，添加到事件触发线程的事件队列中，等待JS引擎空闲后执行)，这个线程就是定时触发器线程，也叫定时器线程；
  4. W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms；

1.4.5 异步http请求线程

  1. 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求；
  2. 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中再由JavaScript引擎执行；
  3. 简单说就是当执行到一个http异步请求时，就把异步请求事件添加到异步请求线程，等收到响应(准确来说应该是http状态变化)，再把回调函数添加到事件队列，等待js引擎线程来执行；

JS为什么是单线程

JS之所以是单线程，是与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很 复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？还有人说js还有Worker线程，对的，为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程是完全受主线程控制的，而且不得操作DOM。所以，这个标准并没有改变JavaScript是单线程的本质。

2、事件循环(Event Loop)

JS分为同步任务和异步任务。同步任务都在主线程(这里的主线程就是JS引擎线程)上执行，会形成一个执行栈。主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放一个事件回调。一旦执行栈中的所有同步任务执行完毕(也就是JS引擎线程空闲了)，系统就会读取任务队列，将可运行的异步任务(任务队列中的事件回调，只要任务队列中有事件回调，就说明可以执行)添加到执行栈中，开始执行:

我们来看一段简单的代码：


  let setTimeoutCallBack = function() {
    console.log('');
  };

  let httpCallback = function() {
    console.log('http');
  }

  console.log('1');
  // setTimeout
  setTimeout(setTimeoutCallBack,1000);
  // http
  ajax.get('/info',httpCallback);

  console.log('2');


  以上代码的执行过程：
  1. JS是按照顺序从上往下依次执行的，可以先理解为这段代码时的执行环境就是主线程，也就是也就是当前执行栈；
  2. 首先，执行 console.log('我是同步任务1') ；
  3. 接着，执行到 setTimeout 时，会移交给定时器线程，通知定时器线程 1s 后将 setTimeoutCallBack 这个回调交给事件触发线程处理，
     在 1s 后事件触发 线程会收到 setTimeoutCallBack 这个回调并把它加入到事件触发线程所管理的事件队列中等待执行；
  4. 接着，执行http请求，会移交给异步http请求线程发送网络请求，请求成功后将 httpCallback 这个回调交由事件触发线程处理，
     事件触发线程收到 httpCallback 这个回调后把它加入到事件触发线程所管理的事件队列中等待执行；
  5. 再接着执行 console.log('我是同步任务2') ；
  6. 至此主线程执行栈中执行完毕，JS引擎线程已经空闲，开始向事件触发线程发起询问，询问事件触发线程的事件队列中是否有需要执行的回调函数，
     如果有将事件队列中的回调事件加入执行栈中，开始执行回调，如果事件队列中没有回调，JS引擎线程会一直发起询问，直到有为止；

根据上述代码可以发现：

  1. 定时触发线程只管理定时器且只关注定时不关心结果，定时结束就把回调扔给事件触发线程；
  2. 异步http请求线程只管理http请求同样不关心结果，请求结束把回调扔给事件触发线程；
  3. 事件触发线程只关心异步回调入事件队列；
  4. JS引擎线程只会执行执行栈中的事件，执行栈中的代码执行完毕，就会读取事件队列中的事件并添加到执行栈中继续执行；
  5. 反复执行，就是我们所谓的事件循环(Event Loop)；

image.png

  1. 执行栈开始顺序执行；
  2. 判断是否为同步，异步则进入异步线程，最终事件回调给事件触发线程的任务队列等待执行，同步继续执行；
  3. 执行栈空，询问任务队列中是否有事件回调；
  4. 任务队列中有事件回调则把回调加入执行栈末尾继续从第一步开始执行；
  5. 任务队列中没有事件回调则不停发起询问；

2.1 宏任务

在ECMAScript中， macrotask 也被称为task。

由于JS引擎线程和GUI渲染线程是互斥的关系，浏览器为了能够使宏任务和DOM任务有序的进行，会在一个宏任务执行结果后，在下一个宏任务执行前，GUI渲染线程开始工作，对页面进行渲染：

常见的宏任务：

  1. 主代码块；
  2. setTimeout；
  3. setInterval；
  4. setImmediate () -Node；
  5. requestAnimationFrame () -浏览器

2.2 微任务

ES6新引入了Promise标准，同时浏览器实现上多了一个 microtask 微任务概念，在ECMAScript中， microtask 也被称为jobs。

我们已经知道宏任务结束后，会执行渲染，然后执行下一个宏任务， 而微任务可以理解成在当前宏任务执行后立即执行的任务。

当一个宏任务执行完，会在渲染前，将执行期间所产生的所有微任务都执行完：

常见微任务

  1. process.nextTick () -Node；
  2. Promise.then()；
  3. catch；
  4. finally；
  5. Object.observe；
  6. MutationObserver；

image-1.png

  1. 首先执行一个宏任务，执行结束后判断是否存在微任务；
  2. 有微任务先执行所有的微任务，再渲染，没有微任务则直接渲染；
  3. 然后再接着执行下一个宏任务；

完整Event Loop

image-2.png

  1. 整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为同步任务、异步任务两部分，同步任务会直接进入主线程依次执行，异步任务会再分为宏任务和微任务；

  2. 宏任务进入到 Event Table 中，并在里面注册回调函数，每当指定的事件完成时， Event Table 会将这个函数移到 Event Queue 中；

  3. 微任务也会进入到另一个 Event Table 中，并在里面注册回调函数，每当指定的事件完成时， Event Table 会将这个函数移到 Event Queue 中；

  4. 当主线程内的任务执行完毕，主线程为空时，会检查微任务的 Event Queue ，如果有任务，就全部执行，如果没有就执行下一个宏任务；

  5. 上述过程会不断重复，这就是Event Loop；

2.3 NodeJS中的运行机制

虽然NodeJS中的JavaScript运行环境也是V8，也是单线程，但是，还是有一些与浏览器中的表现是不一样的。其实nodejs与浏览器的区别，就是nodejs的宏任务分好几种类型，而这好几种又有不同的任务队列，而不同的任务队列又有顺序区别，而微任务是穿插在每一种宏任务之间的。

在node环境下，process.nextTick的优先级高于Promise，可以简单理解为在宏任务结束后会先执行微任务队列中的nextTickQueue部分，然后才会执行微任务中的Promise部分。

image-3.png

NodeJS的Event Loop：

  1. Node会先执行所有类型为timers的 MacroTask ，然后执行所有的 MicroTask ( NextTick 例外)；
  2. 进入 poll 阶段，执行几乎所有 MacroTask ，然后执行所有的 MicroTask ；
  3. 再执行所有类型为 check 的 MacroTask ，然后执行所有的 MicroTask ；
  4. 再执行所有类型为 close callbacks 的 MacroTask ，然后执行所有的 MicroTask ；
  5. 至此，完成一个 Tick，回到 timers 阶段，重复执行；
avatar
文章
阅读
粉丝