[TOC]

浏览器是多进程的

Browser进程

  • 浏览器的主进程(负责协调、主控)，该进程只有一个
  • 负责浏览器界面显示，与用户交互。如前进，后退等
  • 负责各个页面的管理，创建和销毁其他进程
  • 将渲染(Renderer)进程得到的内存中的Bitmap(位图)，绘制到用户界面上

  • 网络资源的管理，下载等

    第三方插件进程

  • 每种类型的插件对应一个进程，当使用该插件时才创建

    GPU进程

  • 该进程也只有一个，用于3D绘制等等

    渲染进程(重)

  • 即通常所说的浏览器内核(Renderer进程，内部是多线程)

  • 每个Tab页面都有一个渲染进程，互不影响

  • 主要作用为页面渲染，脚本执行，事件处理等

    渲染进程Renderer的主要线程

    GUI渲染线程

  • 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等

  • 解析html代码(HTML代码本质是字符串)转化为浏览器认识的节点，生成DOM树，也就是DOM Tree
  • 解析css，生成CSSOM(CSS规则树)
  • 把DOM Tree 和CSSOM结合，生成Rendering Tree(渲染树)
  • 当我们修改了一些元素的颜色或者背景色，页面就会重绘(Repaint)
  • 当我们修改元素的尺寸，页面就会回流(Reflow)
  • 当页面需要Repaing和Reflow时GUI线程执行，绘制页面
  • 回流(Reflow)比重绘(Repaint)的成本要高，我们要尽量避免Reflow和Repaint
  • GUI渲染线程与JS引擎线程是互斥的
  • 当JS引擎执行时GUI线程会被挂起(相当于被冻结了)

  • GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行

    JS引擎线程


    作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

  • JS引擎线程就是JS内核，负责处理Javascript脚本程序(例如V8引擎)

  • JS引擎线程负责解析Javascript脚本，运行代码
  • JS引擎一直等待着任务队列中任务的到来，然后加以处理
  • 浏览器同时只能有一个JS引擎线程在运行JS程序，所以js是单线程运行的
  • 一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序
  • GUI渲染线程与JS引擎线程是互斥的，js引擎线程会阻塞GUI渲染线程
  • 就是我们常遇到的JS执行时间过长，造成页面的渲染不连贯，导致页面渲染加载阻塞(就是加载慢)

  • 例如浏览器渲染的时候遇到