乐趣区

关于javascript:聊聊Canvas渲染相关-非API层偏框架设计方面

  1. 渲染机制
  2. 渲染性能剖析
  3. 非即时渲染 (即时渲染)
  4. 分片渲染
  5. 分画布图元拆分渲染

渲染机制

  • Canvas 绘制机制:整个画布是一个画板, 在下面进行绘制各种各样的图形, 一旦绘制谬误须要改过, 就须要从新绘制。
    ...
    ctx.fillRect(0,0,10,10);
    ctx.clearRect(100, 100, 100, 100);
    ctx.fillRect(0,0,100,100);

渲染性能剖析

留神对于图形计算, 例如简单图形推导 不算在渲染性能进行剖析。

渲染性能次要剖析以下几点:

  • 渲染图元数量 (视锥体内容[以后视口内容])
  • 渲染图元的频率 (例如交互式剖析, 就须要实时刷新)

对应优化伎俩

  • 管制可视区域数据。
  • 缩小刷新频率 或者将操作行为进行切片。
  • 即时渲染和异步渲染。
  • 分片 / 离屏渲染 / 全局渲染部分渲染。

非即时渲染

即时渲染 指用户交互行为一旦触发立即执行 callback。比方上面的场景:

一个用户管制实体色彩 16ms 内触发了 N 次。咱们有俩种解决办法:

  1. 每次触发都进行 draw()的操作从新绘制须要绘制 N 次。
  2. 每隔 16ms 执行 draw()的操作绘制最终出现的后果。

分片渲染

分片渲染 实质上是将一个列表分片,将一次渲染宰割成屡次渲染。缩小绘制图元, 可能进步帧率。

通过下面的图咱们能够看到分片渲染会导致整体的渲染工夫变长,所以这种计划并非用于渲染的性能优化计划,而是作为晋升帧率和响应成果的优化计划。

分画布拆分图元渲染 (也算是分片)

试想一个场景 画布内有十分多的图元 图元分为很多类别,比方文字, 根底几何图形 … 而文字内容很多 更新频率非常低 简直不更新 怎么设计正当?
我提供一个思路, 我将用俩个画布别离绘制这俩部份内容别离是 text 还有 shape。进而缩小更新的内容 进步帧率(如下图)。

最初

可视化相干的架构设计, 源码学习,日常开发。我会逐渐进行深刻分享。如果对你有帮忙请关注我后续的内容。有须要的同学能够加一下我的联系方式(在我的主页, 拉你进群聊)。

退出移动版