JS和浏览器渲染进程不得不说的秘密(一)

114 阅读3分钟

前言

进程:进程是计算机中正在运行程序的实例

什么是进程呢?可以这样理解 ==> 在我们计算机运行我们的程序的实例时,它会开辟一块内存空间,这个空间就可以理解为进程。例如:

一个手机有着一个256G的内存,这个手机的大小有256G,这256G的大小就是我们的进程了

线程:一个进程至少有一个线程,所以在一个进程开启之后,就会自动创建一个线程

什么是线程呢?==>首先的了解一个概念:一个进程至少有一个线程,所以在一个进程开启之后,就会自动创建一个线程,这个线程就被称为主线程。如果你需要同时运行多段代码,那么这个主线程就会开启更多的线程执行他。例如:

你有一个手机有着充足的内存,这个手机只要一开机就会自动下载王者荣耀,他在应用市场有个队列在展示正在下载中,这个自动下载的队列就可以理解为主线程
但是你现在有个需求,你不但需要下载王者荣耀,你还要下载抖音和永杰无间,你点击下载,他们同时在那个下载队列里面并排着展示,这多个队列也叫线程

浏览器的主要三大进程:

1.浏览器进程

2.网络进程

3.渲染进程(我们的重点)

正片

渲染主线程是如何工作的?

渲染主线程是浏览器中最繁忙的线程,需要它处理的任务包括但不限于:

  • 解析HTML
  • 解析Css
  • 计算样式
  • 布局
  • 处理图层
  • 每秒把页面画60次
  • 执行全局JS代码
  • 执行事件处理函数
  • 执行计时器的回调函数
  • ......

为什么渲染进程不适用多个线程来处理这些事情?

这个解释起来比较复杂,总之简而言之,就是渲染进程不适合多线程处理渲染任务,因为多线程并发有可能引发数据竞争,不一致性,渲染结果不可测等问题,然后为了确保这个渲染任务的执行顺序,一致性,结果可预测,以及简化设计和提高性能,最后这个渲染进程就采取了单线程的模型

事件循环(消息循环)

在此之前,我们得知道渲染进程的结尾是什么:消息队列

  1. 在最开始的时候通过for(;;)来进行循环,这样渲染进程就会进入无限循环
  2. 每一次循环都会检查消息队列有没有任务,如果有就取出第一个任务然后进行下一次循环,如果没有就进入休眠状态
  3. 其他所有线程(包括其他所有进程的线程),可以向消息队列添加任务到末尾,在添加新任务时消息队列如果主线程是休眠状态则会被唤醒,然后继续循环拿去任务
  4. 这整个过程就叫做事件循环(消息循环)