Canvas文字绘制性能测试

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

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

结果:

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

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

原始代码如下:





如文中无特殊说明,本站均使用以下协议:知识共享许可协议
知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

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