Thyiad's notes

# 前言

陆陆续续看过很多浏览器的进程线程资料，此处仅为翻看资料的随手笔记，不做具体描述

# 浏览器是多进程的

  • 主进程

    管理协调各个页面，创建/销毁各个页面进程，网络资源的管理、下载等

  • 插件进程
  • GPU进程
  • 渲染进程

    每个tab都有自己独立的进程

# 渲染进程

  • GUI渲染线程
  • JS引擎线程
  • 事件触发线程

    即 event loop 线程

  • 定时触发器线程

    setTimeout, setInterval 规范中规定延时小于4ms，也会当成4ms处理

  • http请求线程

    常规的都是单域名限制最大6个，所有域名最大数量暂未了解到 可以分散到多个域名，http2.0的多路复用也能变相解决该问题

# JS线程与GUI线程互斥

防止渲染前后DOM数据不一致，耗时的作需要使用web worker

通过postMessage 通信

# 浏览器渲染基本过程

  • 解析html生成dom树
  • 解析css构建render树（csss树结合dom树合并成render树）
  • 布局render树（layout/reflow），计算尺寸、位置
  • 绘制render树，绘制页面像素
  • 发送到GPU，交由GPU显示

# 硬件加速

渲染图层分为两种：普通图层、复合图层

Chrome源码调试 -> More Tools -> Rendering -> Layer borders，黄色的边框为复合图层

硬件加速即指复合图层

translate3d、translateZ、opacity、will-chang、<video />、<iframe />、<canvas />、<webgl />

复合图层独立于普通文档流中，修改后不会影响普通文档流

尽可能使复合图层层级高，浏览器默认会将高于复合图层的文档变为复合图层 大量使用导致资源消耗过度，页面反而会更卡

# event loop

  • JS引擎线程
  • 事件触发线程
  • 定时触发器线程

事件触发器维护着一个任务队列，当JS引擎空闲时就会来取任务执行 定时器触发后就会往事件触发器中推入任务

# macrotask与microtask

优先级：microtask>macrotask

microtask: Promise、process.nextTick macrotask: 主代码、setTimeout、setInterval

参考资料： https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ https://segmentfault.com/a/1190000012925872