- 撤销重做
- 协同
- 如何和安卓书写笔迹圆滑算法保持一致
- 如何和安卓笔锋算法保持一致
- 图形拖拽时如何保证能跟得上手速
- 绘制文本的开销是比较昂贵的
- 离屏渲染时，离屏 canvas 的尺寸要尽可能和正在绘制的图形尺寸一致。否则调用 drawImage 将离屏 canvas 绘制到目标 canvas 时，离屏 canvas 尺寸太大也会导致性能变差
- 尽可能少的改变 canvas 的状态，比如颜色。由于 canvas 元素是用状态机实现的，改变 canvas 状态开销昂贵
- 尽可能少的使用 shadowBlur
- 离屏 canvas + 缓存 + drawImage。每个元素都保存一份离屏的 canvas 缓存，下次绘制时将离屏 canvas 使用 drawImage 绘制到可见的 canvas 上
- offscreenCanvas
- 只绘制可视区域内的元素。
- 尝试使用 css 实现平移、缩放
- 缩放时可以使用当前缓存的 canvas 绘制，缩放动作完成后，再重新绘制元素
- 其他的可以看参考资料收集的手段
- 在使用 img 进行平移缩放时，需要提前绘制全量的元素并生成图片。在绘制元素时，以 1 倍图为基准绘制。因为如果绘制的图片太大，那么在平移缩放时还是会卡顿的
- 自由书写-平移。目前还没完善，有 bug，同时需要考虑结合无限画布实现
- 平移缩放性能
- 如果采用 offscreencanvas 在 worker 线程绘制，会比较卡顿，目前大概的原因是：
- 由于主线程 static canvas 和 worker 线程的 OffscreenCanvas 保持频繁的传输导致每一帧都耗时较长
canvasWorker = staticCanvas.transferControlToOffscreen();
worker.postMessage(
{
canvasWorker: canvasWorker,
type: "init",
...params,
},
[canvasWorker]
);- 主线程频繁给 worker 发送消息重绘也会导致卡顿，因此不能在平移拖拽时给 worker 线程发送消息
- chrome://gpu/。硬件加速报告，可以查看所有有硬件加速的元素。比如 canvas
- https://echarts.apache.org/handbook/zh/best-practices/canvas-vs-svg/
- ecomfe/zrender#836
- SVG 优化方案
- SVG 渲染性能优化方案
- SVG 性能相关的
- SVG 中浏览器性能的一些考虑因素的比较分析。
- https://www.crmarsh.com/svg-performance/
- 高性能 svg
- 加载慢是 SVG 的一个缺点