进程和线程

进程和线程

◼ 线程和进程是操作系统中的两个概念：
    进程（process）：计算机已经运行的程序，是操作系统管理程序的一种方式；
    线程（thread）：操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中；
◼ 听起来很抽象，这里还是给出我的解释：
    进程：我们可以认为，启动一个应用程序，就会默认启动一个进程（也可能是多个进程）；
    线程：每一个进程中，都会启动至少一个线程用来执行程序中的代码，这个线程被称之为主线程；
    所以我们也可以说进程是线程的容器；
◼ 再用一个形象的例子解释：
    操作系统类似于一个大工厂；
    工厂中里有很多车间，这个车间就是进程；
    每个车间可能有一个以上的工人在工厂，这个工人就是线程；

操作系统的工作方式

◼ 操作系统是如何做到同时让多个进程（边听歌、边写代码、边查阅资料）同时工作呢？
    这是因为CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换；
    当我们进程中的线程获取到时间片时，就可以快速执行我们编写的代码；
    对于用户来说是感受不到这种快速的切换的；
◼ 你可以在Mac的活动监视器或者Windows的资源管理器中查看到很多进程

浏览器中的JavaScript线程

◼ 我们经常会说JavaScript是单线程（可以开启workers）的，但是JavaScript的线程应该有自己的容器进程：浏览器或者Node。
◼ 浏览器是一个进程吗，它里面只有一个线程吗？
    目前多数的浏览器其实都是多进程的，当我们打开一个tab页面时就会开启一个新的进程，这是为了防止一个页面卡死而造成
    所有页面无法响应，整个浏览器需要强制退出；
    每个进程中又有很多的线程，其中包括执行JavaScript代码的线程；
◼ JavaScript的代码执行是在一个单独的线程中执行的：
    这就意味着JavaScript的代码，在同一个时刻只能做一件事；
    如果这件事是非常耗时的，就意味着当前的线程就会被阻塞；
◼ 所以真正耗时的操作，实际上并不是由JavaScript线程在执行的：
    浏览器的每个进程是多线程的，那么其他线程可以来完成这个耗时的操作；
    比如网络请求、定时器，我们只需要在特性的时候执行应该有的回调即可；

宏任务和微任务

◼ 但是事件循环中并非只维护着一个队列，事实上是有两个队列：
    宏任务队列（macrotask queue）：ajax、setTimeout、setInterval、DOM监听、UI Rendering等
    微任务队列（microtask queue）：Promise的then回调、 Mutation Observer API、queueMicrotask()等
◼ 那么事件循环对于两个队列的优先级是怎么样的呢？
    1.main script中的代码优先执行（编写的顶层script代码）；
    2.在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行
        ✓ 也就是宏任务执行之前，必须保证微任务队列是空的；
        ✓ 如果不为空，那么就优先执行微任务队列中的任务（回调）
    <script>
      console.log("script start")//第一个执行
      function bar(){
        console.log("bar function")//第三个执行
      }
      function foo(){
        console.log("foo function")//第二个执行
        bar()
      }
      foo()
      // 常见的加入事件队列
      // 定时器
      setTimeout(()=>{
        console.log("setTimeout0")//第十一个执行
      },0)
      setTimeout(()=>{
        console.log("setTimeout1")//第十二个执行
      },0)
      // Promise中的then的回调也会被添加到队列中
      console.log("1111")//第四个执行
      new Promise((resolve,reject)=>{
          console.log("222222")//第五个执行
          console.log("--------1")//第六个执行
          console.log("--------2")//第七个执行
          resolve("aaaa")
          console.log("--------3")//第八个执行
      }).then(res=>{
        console.log("then函数回调res:",res)//第十一个执行
      })
      console.log("33333")//第九个执行

      console.log("script end")//第十个执行
    </script>