浏览器相关

浏览器

• 进程和线程的区别

  • 进程是程序运行的实例，当运行一个程序时，操作系统会在内存中为其分配一块内存用来存放代码，运行中的数据和一个执行任务的主线程，这个运行环境就是进程；
  • 线程依附于进程，用于执行任务，一个线程只能属于一个进程，一个进程可以分配多个线程，多线程并行处理能够大大提升性能；
  • 两者关系特点
    • 线程之间共享进程的数据
    • 进程之间数据不共享，通信需要使用 IPC
    • 同一进程下的任意线程崩溃都会导致整个进程崩溃
    • 进程关闭时操作系统会回收这部分内存

• 浏览器架构

  • 多进程架构优点：提升了稳定性，安全性，流畅性；
  • 缺点：更高的资源占用，每个渲染进程中都有 V8 引擎；更复杂的体系结构，各个模块耦合性较高；
  • 浏览器主进程
    用户交互、子进程管理、存储等功能
  • 渲染进程
    用于将 CSS、HTML 转换为浏览器可识别的模样，排版引擎和 JS V8 引擎都在渲染进程中，每打开一个 Tab 页都会创建一个新的渲染进程，同一站点（根域名（例如，geekbang.org）加上协议（例如，https:// 或者http://）相同）除外，
  • 插件进程
    用于运行插件，由于插件易崩溃，防止影响主进程而增加的进程
  • 网络进程
    用于网络资源加载
  • GPU 进程
    用于绘制页面

• 从输入 URL 到显示界面都发生了什么

  • 强缓存
  • DNS 解析
  • TLS 握手
  • tcp三次握手
  • 协商缓存
  • TCP/IP 握手
  • http 请求
  • 将获取的页面渲染

• 浏览器渲染过程

  • 构建 DOM 树
    • 将 html 转化为浏览器能够识别的树形结构，可通过 JS 读写
  • 样式计算：为 DOM 树所有元素添加对应的 CSS 样式
    • 将 CSS 转化为能够识别的 styleSheet
    • 将属性值标准化，比如应用了 em，rem 等，red 等
    • 根据继承和层叠为每个 DOM 节点对应 CSS 样式，生成 computedStyle
  • 布局阶段：计算出 DOM 元素的几何位置
    • 额外创建一个只包含 DOM 中可见元素的布局树 LayoutTree
    • 布局计算，几何位置计算
  • 分层
    • 为了 3D 动画，层叠效果（z-index、透明度、position 属性、截取文本）等，对布局树进行分层生成 LayerTree
  • 图层绘制
    • 为图层生成绘制列表（把图层绘制分步形成列表），提交给合成线程
  • 栅格化
    • 合成线程将图层分为图块，先渲染视口附近，将视口附近的图块交给珊格线程池（加快首屏显示）
    • 珊格线程池将图块转为位图（点阵图像，由像素点组成），位图交给合成线程，都转化完合成线程会提交给浏览器进程
  • 合成与显示
    • 浏览器进程生成页面存于内存中发给显卡，显示

• 重绘和回流

  • 回流
    修改了 DOM 元素的几何属性，渲染流程都需重新运行一遍，开销较大
    • width、height、padding、margin、left、top、border 等几何属性
    • 使 DOM 元素移动或增减
    • 读写 offset 族、scroll 族和 client 族属性的时候，浏览器为了获取这些值，需要进行回流操作。
    • 调用 window.getComputedStyle 方法
  • 重绘
    修改的属性不会使 DOM 几何属性变化，渲染流程跳过布局和分层的阶段直接进入图层绘制阶段
    • color

• 浏览器事件循环

• 垃圾回收

  • 回收栈内存，执行上下文栈中有一个记录当前状态的指针ESP，当前执行上下文执行完毕ESP下移，下一个执行上下文入栈会覆盖这部分内存
  • 回收堆内存
    • 新生代区域 1-8M：存活时间短的对象
      • scavenge算法，空间平均分为对象区域和空闲区域；当对象区域快满了触发垃圾回收，标记活动对象和非活动对象，将活动对象复制到空闲区域，清空对象区域然后互换内存；复制是为了不产生内存碎片，这种反转操作让新生代的这两块区域无限使用下去；但是复制时间比较久
        所以新生代区域一般比较小；也就比较容易满，所以新生代区域有对象晋升策略，活过2次垃圾回收的对象被放进老生代区域
    • 老生代区域：存活时间长的对象以及新生代晋升的对象
      • 标记-清除算法
      • 标记-整理算法
      • 增量标记算法，将标记过程分为子标记过程，穿插在js执行过程中执行，解决全停顿造成的卡顿问题

• 性能监控

  • network面板
    • 查看排队时间
      • 一个域名维护6个连接的原因，通过维护多个域名解决；或者使用http2，多路复用技术不需要排队
    • 获取服务器第一字节时间
      • 服务器处理时间过长
      • cookie携带无用数据，可能都要处理，造成反应时间长
      • 网络问题
    • 文件下载时间
      • gzip压缩
      • 去掉注释和console
  • audits生成web性能报告，从六个方面反应性能，会给出一个评分和优化的建议
    • 首次绘制，浏览器渲染进程确认渲染当前请求的html时，会创建一个空白页面；这个过程慢就是因为网络进程请求html的过程慢；通过监控network面板查看原因
    • 首次有效绘制，页面绘制了第一个像素时的时间点；可通过js的async和defer优化，以及css放的位置
    • 首屏时间，页面完全绘制之后的时间点；可能是js执行时间比较久
    • CPU空闲时间，页面达到最小化可交互的情况，可以对大多数用户输入做出反应，还是要尽可能快的加载完关键资源
    • 完全可交互时间，所有元素可交互，事件监听全部注册完毕，优化这里可以通过改变js的优先级，让不影响页面首次加载的js后面执行
    • 最大估计输入时间，估计页面在加载最繁忙的时候，响应用户输入所需的时间，可以使用webworker执行一些计算，释放主线程，重构css选择器，确保执行较小的计算
  • performance生成报告
    • 概览面板
      • 监控fps、cpu以及v8引擎的堆占用情况，以图表的形式在时间线中展示
    • 性能面板
      • 监控网络指标
      • timing指标，关键的时间点在何时产生的数据信息
      • frames指标， 浏览器生成每帧的记录
      • interactions指标，记录用户交互操作
    • 详情面板
      • 展示具体任务的详细时间比如加载时间和渲染时间