复习梳理浏览器运行机制

135 阅读1分钟

多进程的浏览器

浏览器包括以下进程:

  • GPU进程
  • Browerser进程
  • 渲染进程即浏览器、js引擎
  • 插件进程

多线程的浏览器引擎

js引擎包括以下线程:

  • GUI线程即ui线程(dom解析、css解析、渲染树)
  • js线程(js代码执行,并且管理微任务队列microtask)
  • 事件触发线程(管理事件队列,这里是宏任务队列macrotask)
  • 定时器线程
  • 异步请求线程

js线程和ui线程互斥,所以当js线程执行代码时会阻塞页面渲染。催生了WebWorker与SharedWorker。WebWorker是在当前tab所属进程中新开一个js线程;SharedWorker是浏览器新开一个进程维护,可以在多个页面tab共用。

js线程事件处理机制

  • 执行一个宏任务(栈中没有就从事件队列中获取)

  • 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中

  • 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)

  • 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染

  • 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)

image.png

参考文章

juejin.cn/post/684490…