渲染机制渲染性能分析非即时渲染（即时渲染）切片渲染子canvas图元分割渲染渲染机制Canvas渲染机制：整个canvas是一个绘图板是用来在上面绘制各种图形的。一旦绘图错误需要更正，就需要重新绘制。...ctx.fillRect(0,0,10,10);ctx.clearRect(100,100,100,100);ctx.fillRect(0,0,100,100);渲染性能分析关注图形计算，比如复杂的图形推导不包含在渲染性能分析中。渲染性能主要分析以下几点：渲染图元的数量（视锥体内容[当前视口内容]）渲染图元的频率（比如交互式分析，需要实时刷新）相应的优化手段控制数据可见区域。降低刷新频率或切片操作行为。即时渲染和异步渲染。分片/离屏渲染/全局渲染局部渲染。...非立即渲染立即渲染是指一旦触发用户交互，立即执行回调。例如以下场景：用户控制实体颜色，16ms内触发N次。我们有两种解决方案：每次触发trigger时都执行draw()，重绘需要重绘N次。每16ms执行一次draw()操作，绘制最终的渲染结果。FragmentedRendering分片渲染本质上是对一个列表进行切片，将一个渲染分成多个渲染。减少绘图图元可以提高帧速率。从上图我们可以看出片段渲染会导致整体渲染时间变长，所以这个方案不是渲染的性能优化方案，而是提高帧率和响应效果的优化方案。Sub-canvasSplitprimitiverendering（也被认为是碎片化）想象一个场景，画布中有很多图元。图元分为很多类别，比如文字、基本几何图形……而且文字内容很多，更新频率很低，几乎没有更新，如何设计得当？我提供一个思路，我会用两张画布分别画出这两个部分，文字和形状。然后减少更新的内容，提高帧率（如下图）。最后可视化相关的架构设计、源码学习、日常开发。我将逐步深入分享。如果对你有帮助，请关注我的后续内容。有需要的同学可以加我的联系方式（在我的主页，拉你进群聊）。
