canvas核心与原理

1. canvas 渲染引擎 skia
2. flutter 是 dart + ski
3. 页面是 js + skia + 解析
4. canvas是面向于CPU编程 webgl面向GPU编程（片云、定点着色器等，GPU可以并行）
5. beginPath会创建一个集合。moveTo 向集合追加路径，stroke, 根据集合绘制
6. canvas基于状态和路径绘图，调用scale和translate api是在下次绘制时，新的图形会变成两倍，原图形不变
7. save和restore就是保存状态到堆栈，然后重新创建一个状态。撤销的是堆栈的存储

canvas 渲染引擎

1. 拾取，选中，拖动，改变颜色，绘制两层，上下层图形一致，下层用颜色用来当做唯一标识，用点击的点获取颜色就可以饿到图像的id
2. 局部绘制
3. 分层
4. 事件封装
5. 坐标点计算，怎么进行优化，可以使用webgl，从而使用GPU运算
6. 多线程数据传递 postMessage使用结构化克隆算法，所有数据会进行一次拷贝复制，使用shareBuffer，会共享，不会进行复制 wa也存在数据传递问题
7. 然后分层，解决全量绘制的问题，选中的时候，将选中的这层进行绘制，移出的时候，擦除
8. 拾取的鄫可以在内存中使用createElement创建
9. gc会阻塞渲染和js执行
10. quickjs + libuv
11. wa（中间字节码）
    • 中间字节码，可以根据不同的硬件和机器运行，不同的语言调用机器接口，要转换成一个统一规范的东西
    • 浏览器可以直接加载中间字节码
    • 例如视频的解码，编码，在浏览器端，使用字节码
    • 运行之前，编译成适配各个机器的代码
    • js等式运行时编译

进程

1. 浏览器进程
   • 请求，如果请求的是css，html会交给渲染进程
   • 定时器
   • 读写io
   • ui线程，刷新，前进后退等浏览器上的操作
2. 渲染进程
   • 合成线程 启动主线程 判断时间数据是否还需要传递到主线程 这是最先被告知垂直同步事件（vsync event，操作系统告知浏览器刷新一帧图像的信号）的线程。它接收所有的输入事件。如果可能，合成线程会避免进入主线程，自己尝试将输入的事件（比如滚动）转换为屏幕的移动。它会更新图层的位置，并经由 GPU 线程直接向 GPU 提交帧来完成这个操作。如果输入事件需要进行处理，或者有其他的显示工作，它将无法直接完成该过程，这就需要主线程了。
   • main 主线程 parseHtml webkit进行解析，遇到script就启动v8 => 编译js => 执行 然后形成domTree 和cssTree。合成layoutTree（计算节点的大小和位置） => update layer tree （有层级概念） 层叠上下文，计算哪些元素在哪层 => paint 绘制记录表（描述了具体怎么绘制） => composite 将绘制记录表交给合成线程，合成线程将页面切分，切成一个个图块（原来浏览器会边滚动边绘制，哪里重绘就只执行哪一块） => 栅格化
   • tile work 栅格化， 将cpu存储的数据，point line color 转换成一个个像素点 => 绘制四边形 draw => 如果某个图块上有事件，就把这个图块定义成非快速滚动区，根据事件点击的像素点。判断是否是在非快速滚动区
3. GPU 渲染
4. 层叠上下文绘制过程
   • 绘制背景和边框
   • 绘制z-index 为负数的
   • 绘制流式布局（无position 无flow 非inline-block元素）
   • 无position的flow元素
   • 内联元素
   • z-index 为0 transform opacity的元素
   • z-index为正的