阅读 93

浏览器的进程和线程

Chrome浏览器中,当你打开一个 Tab 页时,其实就是创建了一个进程,一个进程下面是有多个线程的。比如渲染线程、JS 引擎线程、HTTP 请求线程等等, 当你发起一个请求时候,其实就是创建了一个线程,当请求结束后,该线程就会被销毁。

一个浏览器通常由以下常驻线程组成:

  • GUI 渲染线程
  • JavaScript引擎线程
  • 定时触发器线程
  • 事件触发线程
  • 异步http请求线程

GUI 渲染线程

  1. 主要负责页面的渲染,解析HTML、CSS,构建DOM树,布局和绘制等。

  2. 当界面需要重绘或者由于某种操作引发回流时,将执行该线程。

  3. 该线程与JS引擎线程互斥,当执行JS引擎线程时,GUI渲染会被挂起,当任务队列空闲时,主线程才会去执行GUI渲染。

JS引擎线程

  1. 该线程负责处理js脚本,执行代码。
  2. 该线程与渲染线程互斥,因此当js脚本执行时间过长,将导致页面渲染的阻塞。

定时器触发线程

  1. 负责执行异步定时器函数的线程, 如setTimeout,setInterval。
  2. 主线程依次执行代码时候,遇到定时器,会将定时器交给该线程处理,当计数完成后,会将完毕后的事件加入到Callback Queue, 然后由事件触发线程 也就是Event Loop来控制,交给js引擎线程执行。

事件触发线程(Event Loop)

  1. 负责监听call stack,如果里面是空,则执行第二条。
  2. 负责将Callback Queue里的事件交给JS引擎线程执行。

异步HTTP请求线程

  1. 负责执行异步请求一类的函数,如: Promise,ajax等。
  2. 主线程依次执行代码,如果遇到异步请求,会将函数交给该线程处理,该线程监听状态码改变,并且如果有回调函数,会将回调加入到Callback Queue,然后有事件触发线程来将Callback Queue中的函数交给JS引擎线程处理。

参考文章: 浏览器与Node的事件循环(Event Loop)有何区别?