第七期:详解JavaScript运行机制(Event Loop)

在浏览器中,每个渲染进程都有一个主线程,主线程非常繁忙，既要处理DOM，又要计算样式，还要处理布局，同时还需要处理JavaScript任务以及各种输入事件。此时我们就需要一个系统来统筹调度这么多不同类型的任务在主线程中有条不紊地执行，而这个统筹调度系统就是本文要介绍的事件循环系统。

 

前言

在浏览器中,每个渲染进程都有一个主线程,主线程非常繁忙，既要处理DOM，又要计算样式，还要处理布局，同时还需要处理JavaScript任务以及各种输入事件。此时我们就需要一个系统来统筹调度这么多不同类型的任务在主线程中有条不紊地执行，而这个统筹调度系统就是本文要介绍的事件循环系统(Event Loop)。

读完本文，希望你能明白：

• 进程与线程的区别

• 最新的Chrome浏览器包括哪些进程?

• 浏览器与Node的事件循环(Event Loop)有何区别?

一、进程与线程

1.概念

我们经常说JavaScript是单线程执行的，那到底什么是线程？什么是进程？

一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。

而线程是操作系统能够进行运算调度的最小单位。线程是不能单独存在的，它是由进程来启动和管理的,在进程中使用多线程并行处理能提升运算效率。

我们通过以下这张图来加深对两者的理解:

• 进程好比图中的工厂，有单独的专属自己的工厂资源。当一个进程关闭之后，操作系统会回收进程所占用的内存。

• 线程好比图中的工人，多个工人在一个工厂中协作工作，工厂与工人是 1:n的关系。这意味着一个进程由一个或多个线程组成，进程中的任意一线程执行出错，都会导致整个进程的崩溃。

• 工厂的空间是工人们共享的，这意味着一个进程的内存空间是共享的，每个线程都可用这些共享内存。

• 多个工厂之间独立存在。这意味着进程之间的内容相互隔离。

2.多进程与多线程

• 多进程：在同一个时间里，同一个计算机系统中允许两个或两个以上的进程处于运行状态。

以最新的 Chrome 浏览器为例,我打开掘金编辑文章页面时,出现以下五个进程:1个网络进程、1个浏览器进程、1个GPU进程以及1个渲染进程，共4个；如果打开的页面有运行插件的话，还需要再加上1个插件进程(下图有番茄闹钟插件)。

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

二、最新的 Chrome 进程架构

最新的Chrome浏览器包括：1个浏览器（Browser）主进程、1个GPU进程、1个网络（NetWork）进程、多个渲染进程和多个插件进程。

接下来我们介绍下这些进程的功能:

• 浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。

• 渲染进程。核心任务是将HTML、CSS 和JavaScript转换为用户可以与之交互的网页，排版引擎Blink和JavaScript引擎V8都是运行在该进程中，默认情况下，Chrome 会为每个Tab标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。渲染进程中主要包含以下线程：主线程(Main thread)、工作线程(Worker thread)、 排版线程 (Compositor thread)和光栅线程(Raster thread)。

• GPU进程。其实，Chrome刚开始发布的时候是没有GPU进程的。而GPU的使用初衷是为了实现3D CSS的效果，只是随后网页、Chrome 的UI界面都选择采用GPU来绘制，这使得GPU成为浏览器普遍的需求。最后&#