浏览器的多进程架构简介

526 阅读3分钟

浏览器的进程包括:

  • Browser进程(主进程)

    • 前进后退
    • 页面管理创建销毁其他进程
    • 网络资源的管理下载
    • 将render进程得到的内存中的bitMap,绘制到用户界面
  • 浏览器渲染进程

    • 默认每个Tab页面一个进程,互不影响
    • 用于渲染页面、执行脚本、事件处理
    • 浏览器渲染进程包括
    • GUI渲染线程
    • 负责渲染浏览器界面,解析HTML、CSS、构建DOM树和渲染树,布局和绘制
    • 界面重排重绘
    • GUI渲染线程与JS线程互斥,当JS引擎线程执行时,GUI线程被挂起,GUI的更新会保存在一个队列中等JS引擎线程空闲时间立即被执行。
    • 为什么GUI与JS引擎线程互斥
    • JS可以操作DOM如果在修改元素同时渲染界面(即JS线程和GUI线程同时进行),渲染线程前后获得的数据很可能不一致
  • JS引擎线程

    • 负责处理JS脚本(如V8引擎)
    • JS引擎等待任务队列中任务的到来,
    • 注意JS线程与GUI线程互斥,如果JS执行的时间过长,就会导致页面渲染不连贯,导致页面渲染加载阻塞
  • 事件触发线程

    • 归属浏览器而不是JS引擎,用来控制事件循环
    • 当JS引擎执行代码块,如点击事件,Ajax等会将对应任务添加到事件线程中
    • 当对应的事件被触发时,该线程会把事件添加到待处理队列的尾部,等待JS引擎的处理
    • 由于JS的单线程关系,所有这些待处理事件都要排队等JS引擎处理
  • 定时触发器线程

    • setInterval,setTimeout所在线程
    • 浏览器定时计数器并不是JS引擎计数的(因为JS引擎是单线程的如果处于阻塞线程状态就会影响计数的准确度)
    • 因此通过单独的线程来计时并触发定时(即使完毕后,添加到事件队列的尾部,等JS引擎空闲后再执行)
    • 另外setTimeout中低于4ms,按4ms计算
  • 异步请求线程

    • XMLHttpRequest在连接建立后通过浏览器新开一个线程请求
    • 请求状态变化时,如果有回调函数,异步请求线程产生状态变化事件,将事件放入事件队列,再由JS引擎执行。
  • 第三方插件进程

    • 每种插件对应一个进程,仅当使用该插件时才会创建
  • GPU进程

    • 最多一个,用于3D绘制等

JS为什么单线程

  • JS的主要用途是与用户互动和操作DOM

    • 如此如果是多线程会带来同步问题,比如两个线程一个在DOM上添加内容,一个删除了该DOM,会出现冲突
  • 为利用CPU多核的能力,H5中使用Web Worker标准

    • 允许JS创建多个线程
    • 但是子线程完全受主线程控制,且不可以操作DOM