单进程和多进程

  1. 一个进程就是程序运行实例，启动该程序的时候，操作系统会为改程序建立一块内存，用来存放代码，运行中的数据和一个执行任务的主线程，我们把这样一个程序叫做进程
  2. 单进程和多进程，单进程浏览器会造成不稳定，不流畅等问题。进程之间的数据是隔离的，所以当一个进程崩溃，不会影响其他的进程
  3. 一个进程可以有很多线程，线程之间的数据是共享的
  4. 关闭一个进程之后，浏览器会自动回收改进程的内存
  5. 浏览器每开一个tab就启动一个渲染进程
  6. 渲染进程有sandbox做隔离，防止渲染进程获取操作系统的内容
  7. 主进程 渲染进程 插件进程 GPU进程 网络进程

    浏览器渲染

  1. 浏览器渲染进程，也就是我们常说的浏览器内核
    1. load表示js,css，图片等都下载完成
    2. DomContentLoaded表示Html被完全记载和解析，不需要等待js,css,图片等下载完成
    3. 在构建CSSDOM树的时候会阻塞渲染，直到CSSDOM树生成。而且CSSDOM树很号是，所以应尽量保持平级，减少过度层叠
  2. 构建DOM树

DOM.jpg

  1. 构建CSS树，计算样式
  2. 构建渲染树
  3. 构建图层树
  4. 绘制到光栅化
  5. 显示器

GPU加速原因

比如利用 CSS3 的transform、opacity、filter这些属性就可以实现合成的效果，也就是大家常说的GPU加速。

  • 在合成的情况下，直接跳过布局和绘制流程，进入非主线程处理部分，即直接交给合成线程处理。
  • 充分发挥GPU优势，合成线程生成位图的过程中会调用线程池，并在其中使用GPU进行加速生成，而GPU 是擅长处理位图数据的。

  • 没有占用主线程的资源，即使主线程卡住了，效果依然流畅展示。


    实践

  • 使用createDocumentFragment进行批量的 DOM 操作

  • 对于 resize、scroll 等进行防抖/节流处理。
  • 动画使用transform或者opacity实现
  • 将元素的will-change 设置为 opacity、transform、top、left、bottom、right 。这样子渲染引擎会为其单独实现一个图层，当这些变换发生时，仅仅只是利用合成线程去处理这些变换，而不牵扯到主线程，大大提高渲染效率。
  • 对于不支持will-change 属性的浏览器，使用一个3D transform属性来强制提升为合成 transform: translateZ(0);
  • rAF优化等等


https://juejin.cn/post/6847902222349500430#heading-33
https://juejin.cn/post/6846687590540640263