浏览器运行机制

浏览器是多进程机制

• 主进程
  • 负责浏览器界面显示与用户交互
  • 负责各个页面管理，创建和销毁其他进程
  • 将渲染进程得到的内存中的 Bitmap 绘制到用户界面
  • 网络资源的管理、下载等
• 渲染进程：每个 tab 页是一个进程，进程内可以多线程
  • 页面渲染
  • 脚本执行
  • 时间处理
• GPU 进程
  • 绘制 3D 图形
• 插件进程
  • 处理浏览器插件

渲染进程

• 渲染线程

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

  • 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行

  • GUI 渲染线程与 JS 引擎线程是互斥的，当 JS 引擎执行时 GUI 线程会被挂起，GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行。

• 脚本线程

  • 一个渲染进程只有一个 JS 线程
  • 负责处理并执行 JS 脚本程序
  • 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞

• 事件线程

  • 收集管理事件
  • 处理事件循环

• 定时器线程

  • 接收 setTimeout 和 setInterval 的回调函数
  • 管理定时器

• 网络请求线程

  • 发送和接收网络请求
  • 将回调函数放入事件队列

输入 URL 到页面展示过程

• 解析 URL 输入
• 发起 URL 请求
  • DNS 解析
  • TCP 通信
  • 数据处理
• 创建渲染进程
• 页面渲染
  • 解析 HTML 生成 DOM
  • 解析 CSS 生成 CSSDOM
  • 加载或执行 JavaScript
  • 生成渲染树
  • 布局
  • 分层
  • 生成绘制列表
  • 光栅化
  • 显示

repaint

• repiant 或者 redraw 遍历所有的节点检测各节点的可见性、颜色、轮廓等可见的样式属性，然后根据检测的结果更新页面的响应部分。
• 当 render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘

reflow

• reflow 指的是计算页面布局。某个节点 reflow 时会重新计算节点的尺寸和位置，而且还有可能触发其子节点、祖先节点和页面上的其他节点 reflow。在这之后再触发一次 repaint。
• 当 render tree 中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流,每个页面至少需要一次回流，就是在页面第一次加载的时候。

触发条件

• 调整窗口大小
• 改变字体
• 增加或者移除样式表
• 内容变化，比如用户在 input 框中输入文字
• 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)
• 操作 class 属性
• 脚本操作 DOM
• 计算 offsetWidth 和 offsetHeight 属性
• 设置 style 属性的值