线程和进程、浏览器中的JavaScript线程、JavaScript的宏任务和微任务

骑猪看日落 2023-10-02 20:04 3阅读 0赞

#### 文章目录 ####

*   *   *  认识进程和线程
         *  操作系统的工作方式
         *  浏览器中的JS线程
         *  浏览器的事件循环
         *  微任务宏任务

#### 认识进程和线程 ####

**线程和进程是操作系统中的两个概念：**

*  **进程（process）**：计算机**已经运行的程序**，是**操作系统管理程序**的一种方式；
 *  **线程（thread）**：操作系统能够运行**运算调度的最小单位**，通常情况下**它被包含在进程**中；

**听起来很抽象，这里还是给出我的解释：**

*  **进程**：我们可以认为，启动**一个应用程序**，就会**默认启动一个进程**（也可能是多个进程）
 *  **线程**：每**一个进程中**，都**会启动至少一个线程用来执行程序中的代码**，这个**线程被称之为主线程**；
 *  所以我们**也可以说进程是线程的容器**；

**再用一个形象的例子解释：**

*  操作系统类似于一个大工厂；
 *  工厂中里有很多车间，这个车间就是进程；
 *  每个车间可能有一个以上的工人在工厂，这个工人就是线程；

**这里有一幅图, 可以看一下帮助大家理解**:

![在这里插入图片描述][e6c6ae61da734ace96dca9fc3c431855.png_pic_center]

#### 操作系统的工作方式 ####

**操作系统是如何做到同时让多个进程（边听歌、边写代码、边查阅资料）同时工作呢？**

*  这是因为**CPU的运算速度非常快**，它可以**快速的在多个进程之间迅速的切换**；
 *  当我们**进程中的线程**获取到**时间片**时，就可以**快速执行我们编写的代码**；
 *  对于用户来说**是感受不到这种快速的切换的**；

你可以在Mac的活动监视器或者Windows的资源管理器中查看到很多进程：  
![在这里插入图片描述][089ad9aaeeac4ddf87a52e45e8565161.png_pic_center]

#### 浏览器中的JS线程 ####

我们经常会说**JavaScript是单线被程**（可以开启workers\*\*）**的，但是**JavaScript的线程应该有自己的容器进程\*\*：**浏览器或者Node。**

**浏览器是一个进程吗，它里面只有一个线程吗？**

*  目前**多数的浏览器其实都是多进程的**，当我们**打开一个tab页面时就会开启一个新的进程**，这是**为了防止一个页面卡死而造成所有页面无法响应**，整个浏览器需要强制退出；
 *  **每个进程中又有很多的线程**，其中**包括执行JavaScript代码的线程**；

**JavaScript的代码执行是在一个单独的线程中执行的：**

*  这就意味着JavaScript的代码，在**同一个时刻只能做一件事**；
 *  如果**这件事是非常耗时**的，就意味着当前的线程就**会被阻塞**；

**所以真正耗时的操作，实际上并不是由JavaScript线程在执行的：**

*  浏览器的**每个进程是多线程**的，那么**其他线程可以来完成这个耗时的操作**；
 *  比如**网络请求、定时器**，我们只需要在特性的时候执行应该有的回调即可；

#### 浏览器的事件循环 ####

**如果在执行JavaScript代码的过程中，有异步操作呢？**

*  中间我们插入了一个**setTimeout的函数**调用；
 *  这个**函数被放到入调用栈中**，**在线程中的执行会立即结束**，并**不会阻塞后续代码的执行**；

function sum(num1, num2) {
        
      return num1 + num2
    }
    
    function bar() {
        
      return sum(20, 30)
    }
    
    setTimeout(() => {
        
      console.log("10秒后的setTimeout")
    }, 10000)
    
    const result = bar()
    console.log(result)

![在这里插入图片描述][e03e07e9aa3b485a9aee0a73b6569b9a.png_pic_center]

#### 微任务宏任务 ####

**但是事件循环中并非只维护着一个队列，事实上是有两个队列：**

*  **宏任务队列**（macrotask queue）：ajax、setTimeout、setInterval、DOM监听、UI Rendering等
 *  **微任务队列**（microtask queue）：Promise的then回调、 Mutation Observer API、queueMicrotask()等

**那么事件循环对于两个队列的优先级是怎么样的呢？**

1.  main script中的代码优先执行（编写的顶层script代码）；
2.  在**执行任何一个宏任务之前**（不是队列，是一个宏任务），都**会先查看微任务队列中是否有任务需要执行**
    
     *  也就是**宏任务执行之前，必须保证微任务队列是空的**；
     *  如果**不为空，那么就优先执行微任务队列中的任务**（回调）；

微任务队列中是否有任务需要执行\*\*

*  也就是**宏任务执行之前，必须保证微任务队列是空的**；
 *  如果**不为空，那么就优先执行微任务队列中的任务**（回调）；

讲完这些后面我们就可以看看Promise的面试题了

[e6c6ae61da734ace96dca9fc3c431855.png_pic_center]: https://img-blog.csdnimg.cn/e6c6ae61da734ace96dca9fc3c431855.png#pic_center
[089ad9aaeeac4ddf87a52e45e8565161.png_pic_center]: https://img-blog.csdnimg.cn/089ad9aaeeac4ddf87a52e45e8565161.png#pic_center
[e03e07e9aa3b485a9aee0a73b6569b9a.png_pic_center]: https://img-blog.csdnimg.cn/e03e07e9aa3b485a9aee0a73b6569b9a.png#pic_center