前端性能优化之Canvas优化
元素是众多广泛使用的网络 2D 图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而,随着网站和应用将 canvas 画布推至极限,性能开始成为问题。
Canvas 上下文切换
Canvas 绘制 API 都是在上下文context
上进行调用,context
不是一个普通的对象,当我们对其赋值的时候,性能开销远大于普通对象。我们可以尝试将每个赋值操作执行一百万次,来看看其耗时。
可见,频繁对 Canvas 上下文属性修改赋值是有一定的性能开销的。这是因为当我们调用context.lineWidth = 2
时,浏览器会需要立刻地做一些事情,这样在下一次绘制的时候才能以最新的状态绘制。这意味着,在绘制两段不同字体大小的文本的时候,需要设置两次不同的字体,也就是需要进行两次context
上下文状态的切换。
在大多数情况下,我们的 Canvas 绘制内容的样式不会太多。但是在绘制内容数量大、样式多的场景下,我们应该考虑如何减少上下文context
的切换。可以考虑使用先将相同样式的绘制内容收集起来,结合享元的方式