Open AlexZ33 opened 3 years ago
渲染的元素数量、元素大小，均为它们的瓶颈； 相比于 svg，canvas 在渲染数量上更有优势 —— 由于 svg 本质上仍旧是浏览器的 DOM，因此一旦渲染数量上升时，fps 的下降速度会明显大于 canvas
常见的 canvas 优化手段 减少 canvas 指令的调用次数
利用缓存 使用离屏缓存技术，将需要复杂渲染的图像缓存起来，以后直接 drawImage，免得重新计算。缺点：1. 需要占用额外内存，当需要缓存的图形较多时开销较大；2. 适合内容不变的元素；3. 由于是 drawImage，渲染的是位图非矢量图，可能存在清晰度问题
分层渲染 如果更新的只是局部的元素，而背景不变，则可以将背景单独放在一个底层 canvas 渲染，而将频繁变化的单独拎到另一个 canvas 渲染即可
局部渲染 控制每次更新的擦除范围，计算需重新渲染的元素的包围盒（能包裹住所有需要动态渲染的元素的最小矩形），具体可参考AntV Canvas 局部渲染总结 本质上是：1. 计算需刷新的包围盒；2. clip 之; 3.clearRect 之; 4. 重新绘制
多线程渲染 现在浏览器支持将 canvas 的渲染迁移到 worker 上，借助 canvas.transferControlToOffscreen 转成离屏 canvas 对象，由 worker 代理渲染，这样就不会阻塞主进程的响应（如事件响应）
渲染的元素数量、元素大小，均为它们的瓶颈； 相比于 svg，canvas 在渲染数量上更有优势 —— 由于 svg 本质上仍旧是浏览器的 DOM，因此一旦渲染数量上升时，fps 的下降速度会明显大于 canvas
常见的 canvas 优化手段 减少 canvas 指令的调用次数
利用缓存 使用离屏缓存技术，将需要复杂渲染的图像缓存起来，以后直接 drawImage，免得重新计算。缺点：1. 需要占用额外内存，当需要缓存的图形较多时开销较大；2. 适合内容不变的元素；3. 由于是 drawImage，渲染的是位图非矢量图，可能存在清晰度问题
分层渲染 如果更新的只是局部的元素，而背景不变，则可以将背景单独放在一个底层 canvas 渲染，而将频繁变化的单独拎到另一个 canvas 渲染即可
局部渲染 控制每次更新的擦除范围，计算需重新渲染的元素的包围盒（能包裹住所有需要动态渲染的元素的最小矩形），具体可参考AntV Canvas 局部渲染总结 本质上是：1. 计算需刷新的包围盒；2. clip 之; 3.clearRect 之; 4. 重新绘制
多线程渲染 现在浏览器支持将 canvas 的渲染迁移到 worker 上，借助 canvas.transferControlToOffscreen 转成离屏 canvas 对象，由 worker 代理渲染，这样就不会阻塞主进程的响应（如事件响应）