From c2687a018a66ffa38f409980e7410c22f42d7835 Mon Sep 17 00:00:00 2001 From: sunny Date: Tue, 23 Jul 2024 18:15:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20js=20=E4=BA=8B=E4=BB=B6=E5=BE=AA?= =?UTF-8?q?=E7=8E=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/nav/fragment/javascript.ts | 4 + config/sidebar/fragment/index.ts | 4 + ...ypeTransform.md => data-type-transform.md} | 0 docs/javascript/event-loop.md | 179 ++++++++++++++++++ public/javascript_eventloop.png | Bin 0 -> 53575 bytes 5 files changed, 187 insertions(+) rename docs/javascript/{dataTypeTransform.md => data-type-transform.md} (100%) create mode 100644 docs/javascript/event-loop.md create mode 100644 public/javascript_eventloop.png diff --git a/config/nav/fragment/javascript.ts b/config/nav/fragment/javascript.ts index 8f4cbf4..2c168d1 100644 --- a/config/nav/fragment/javascript.ts +++ b/config/nav/fragment/javascript.ts @@ -31,6 +31,10 @@ export default [ title: '垃圾回收与内存泄漏', link: '/javascript/garbage-collection', }, + { + title: '事件循环', + link: '/javascript/event-loop', + }, { title: '浮点数精度问题', link: '/javascript/floating-point-precision', diff --git a/config/sidebar/fragment/index.ts b/config/sidebar/fragment/index.ts index 6cf75c9..0424597 100644 --- a/config/sidebar/fragment/index.ts +++ b/config/sidebar/fragment/index.ts @@ -38,6 +38,10 @@ export default [ title: '浮点数精度问题', link: '/javascript/floating-point-precision', }, + { + title: '事件循环', + link: '/javascript/event-loop', + }, ], }, { diff --git a/docs/javascript/dataTypeTransform.md b/docs/javascript/data-type-transform.md similarity index 100% rename from docs/javascript/dataTypeTransform.md rename to docs/javascript/data-type-transform.md diff --git a/docs/javascript/event-loop.md b/docs/javascript/event-loop.md new file mode 100644 index 0000000..10ed544 --- /dev/null +++ b/docs/javascript/event-loop.md @@ -0,0 +1,179 @@ +--- +title: JavaScript 事件循环 +description: + - 运行机制 + - 事件循环 +group: + title: JavaScript +toc: content +--- + +# JavaScript 事件循环 + +在介绍 JavaScript 事件循环之前呢，我们先来介绍一些前置知识。 + +## 进程与线程 + +### 什么是进程 + +CPU 是计算机的核心，承担所有的计算任务。 + +官网说法，进程是 CPU 资源分配的最小单位。 + +字面意思就是进行中的程序，我将它理解为一个可以独立运行且拥有自己的资源空间的任务程序，进程包括运行中的程序和程序所使用到的内存和系统资源。CPU 可以有很多进程，我们的电脑每打开一个软件就会产生一个或多个进程，为什么电脑运行的软件多就会卡，是因为 CPU 给每个进程分配资源空间，但是一个 CPU 一共就那么多资源，分出去越多，越卡，每个进程之间是相互独立的，CPU 在运行一个进程时，其他的进程处于非运行状态，CPU 使用 时间片轮转调度算法 来实现同时运行多个进程。 + +### 什么是线程 + +线程是 CPU 调度的最小单位。 + +线程是建立在进程的基础上的一次程序运行单位，通俗点解释线程就是程序中的一个执行流，一个进程可以有多个线程。 + +一个进程中只有一个执行流称作单线程，即程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。 + +一个进程中有多个执行流称作多线程，即在一个程序中可以同时运行多个不同的线程来执行不同的任务， 也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。 + +### 进程与线程的区别 + +进程是操作系统分配资源的最小单位，线程是程序执行的最小单位。 + +一个进程由一个或多个线程组成，线程可以理解为是一个进程中代码的不同执行路线。 + +进程之间相互独立，但同一进程下的各个线程间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号)。 + +调度和切换：线程上下文切换比进程上下文切换要快得多。 + +### 多进程与多线程 + +- 多进程：多进程指的是在同一个时间里，同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。多进程带来的好处是明显的，比如大家可以在网易云听歌的同时打开编辑器敲代码，编辑器和网易云的进程之间不会相互干扰； +- 多线程：多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，也就是说允许单个程序创建多个并行执行的线程来完成各自的任务； + +## JS 为什么是单线程 + +JS 的单线程，与它的用途有关。 + +作为浏览器脚本语言，JavaScript 的主要用途是与用户互动，以及操作 DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定 JavaScript 同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？ + +还有人说 js 还有 Worker 线程，对的，为了利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程是完 全受主线程控制的，而且不得操作 DOM。所以，这个标准并没有改变 JavaScript 是单线程的本质。 + +## 浏览器 + +拿 Chrome 来说，我们每打开一个 Tab 页就会产生一个进程。 + +### 浏览器包含哪些进程 + +1. Browser 进程 + 1. 浏览器的主进程(负责协调、主控)，该进程只有一个； + 2. 负责浏览器界面显示，与用户交互。如前进，后退等； + 3. 负责各个页面的管理，创建和销毁其他进程； + 4. 将渲染(Renderer)进程得到的内存中的 Bitmap(位图)，绘制到用户界面上； + 5. 网络资源的管理，下载等； +2. 第三方插件进程 + 1. 每种类型的插件对应一个进程，当使用该插件时才创建； +3. GPU 进程 + 1. 该进程也只有一个，用于 3D 绘制等等； +4. 渲染进程 + 1. 即通常所说的浏览器内核(Renderer 进程，内部是多线程)； + 2. 每个 Tab 页面都有一个渲染进程，互不影响； + 3. 主要作用为页面渲染，脚本执行，事件处理等； + +### 为什么浏览器需要多进程 + +假设浏览器是单进程，那么某个 Tab 页崩溃了，就影响了整个浏览器，体验有多差？同理如果插件崩溃了也会影响整个浏览器。 + +浏览器进程有很多，每个进程又有很多线程，都会占用内存 + +### 渲染进程 + +页面的渲染，JS 的执行，事件的循环，都在渲染进程内执行，所以我们要重点了解渲染进程 + +渲染进程是多线程的，看渲染进程的一些常用较为主要的线程 + +#### GUI 渲染线程 + +1. 负责渲染浏览器界面，解析 HTML，CSS，构建 DOM 树和 RenderObject 树，布局和绘制等； + 1. 解析 HTML 代码( HTML 代码本质是字符串)转化为浏览器认识的节点，生成 DOM 树，也就是 DOM Tree； + 2. 解析 CSS，生成 CSSOM ( CSS 规则树)； + 3. 把 DOM Tree 和 CSSOM 结合，生成 Rendering Tree (渲染树)； +2. 当我们修改了一些元素的颜色或者背景色，页面就会重绘( Repaint )； +3. 当我们修改元素的尺寸，页面就会回流( Reflow )； +4. 当页面需要 Repaing 和 Reflow 时 GUI 线程执行，绘制页面； +5. 回流( Reflow )比重绘( Repaint )的成本要高，我们要尽量避免 Reflow 和 Repaint； +6. GUI 渲染线程与 JS 引擎线程是互斥的： + 1. 当 JS 引擎执行时 GUI 线程会被挂起(相当于被冻结了)； + 2. GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行； + +#### JS 引擎线程 + +1. JS 引擎线程就是 JS 内核，负责处理 Javascript 脚本程序(例如 V8 引擎)； +2. JS 引擎线程负责解析 Javascript 脚本，运行代码； +3. JS 引擎一直等待着任务队列中任务的到来，然后加以处理： + 1. 浏览器同时只能有一个 JS 引擎线程在运行 JS 程序，所以 JS 是单线程运行的； + 2. 一个 Tab 页( renderer 进程)中无论什么时候都只有一个 JS 线程在运行 JS 程序； +4. GUI 渲染线程与 JS 引擎线程是互斥的，JS 引擎线程会阻塞 GUI 渲染线程 + 1. 就是我们常遇到的 JS 执行时间过长，造成页面的渲染不连贯，导致页面渲染加载阻塞(就是加载慢)； + 2. 例如浏览器渲染的时候遇到 `