Canvas文字绘制性能测试

做了个canvas文字测试,看看效果如何。
由于代码中包含了图片的base64码所以放在最后了,测试结果如下:

为了尽量准确一点,避免浏览器热身等原因我把测试放在循环里进行多次测试。
可见文字渲染确实是效率比较低的,不过这里还不是太明显。
这里的文字渲染还是无任何样式的,平常应用的时候不可能就这么用没样式的字,所以我还要再来一个有样式文字渲染测试。

结果:

给字加了样式以后差距就更明显了,主要还是消耗在了样式字符串的解析上,不过这里还是只设置了字体和大小还有颜色,设置更多的样式的话还会更慢(尤其是阴影,描边似乎第二慢)

总结:一段文字不怎么会变的话还是先渲染到一个小canvas然后就可以轻松的复用了,效率比每一帧都渲染一遍要高很多

原始代码如下:




2018年7月起本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。