浏览器笔记

浏览器打开页面

1. 输入url，浏览器进程
   1. beforeUnload -》 navigation start
2. 请求url，网络进程
   1. 浏览器进程提交URL到网络进程
   2. 缓存
      1. 网络进程查缓存（memory cache(quick refresh，不同浏览器实现不一样，没有规范)、serviceWorker缓存、disk/http cache（强、协商缓存）、CDN缓存、服务器缓存）
      2. 
      3. 
      4. 关闭标签页之前，刷新默认先从memory cache，关闭标签后下次打开会查找disk/http cache，都没有再执行网络请求
      5. 强缓存是否过期通过缓存头cache-control > expires、max-age 判断，如果没有设置缓存策略，则走浏览器默认缓存策略，浏览器清理缓存前不会更新
   3. 等待tcp队列，
   4. 建立tcp链接
   5. 发送http请求
   6. 响应数据类型
   7. 断开连接
3. 准备渲染进程
   1. 同一站点（根域名、端口、协议相同）、有opener关联的浏览器上下文组 复用同一个渲染进程（使用noopener,noreferrer可以隔离 ）
   2. iframe默认独立渲染进程，和主页面是同一站点会复用主页面渲染进程
4. 提交文档
   1. 浏览器进程接收网络进程数据，提交给渲染进程
   2. 渲染进程收到消息后，和网络进程建立管道通信
   3. 渲染进程返回确认提交给浏览器进程，浏览器更新页面状态
5. 渲染阶段
   1. 主线程
      1. 开始解析DOM
      2. 计算computed style =》CSSOM
         1. 单位标准化
         2. 层叠性（优先级）计算样式
      3. layout过程生成 render tree
         1. 对可见元素布局计算
      4. 分层生成layer tree
         1. 层叠上下文，transform、filter、opacity不是1、z-index、fixed https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
         2. 需要裁剪，比如文字超长裁剪
      5. 生成每个layer的绘制队列paint list
         1. 计算绘制顺序，一部分一部分绘制，绘制指令形成列表
   2. 合成线程
      1. 分块tile，优先处理视口的tile
         1. 块大小256x256或512x512
   3. 光栅化raster线程池，生成位图
      1. 如果有硬件加速可能会用gpu进程光栅化，对于transfrom 3d变换或者will-change等会强制调用GPU进行处理
         1. 调用GPU进程，提交分块给GPU，生成的位图保存在gpu内存
      2. 视口光栅化完成后，生成的位图bitmap存放在内存中，发送drawQuad指令给浏览器进程display
   4. 浏览器进程display，从内存获取bitmap绘制
6. 重排 - 重绘 - 合成
   1. 主线程：DOM - CSSOM - Layout - layer - paint List || 合成线程：tile - raster - draw || 浏览器现场：display
   2. 修改几何属性，导致重排
   3. 修改绘制属性，导致重绘，会跳过 layout 和 layer
   4. transform合成动画，跳过主线程，合成线程处理

参考 #

1. https://juejin.cn/post/7088741970696208414