Canvas文字绘制性能测试

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

//代码内容:一张写了5个蓝色喵的图片和5个无任何样式的喵字各绘制十万次
123.8950000006298	//图片
153.4990000000107	//文字
91.63100000114355	//图片
150.8400000002439	//文字
88.55799999946612	//图片
150.93399999932444	//文字
88.62000000044645	//图片
150.16500000092492	//文字
87.77499999996508	//图片
149.93399999912072	//文字
87.90600000065751	//图片
149.8909999991156	//文字
87.98000000024331 	//图片
65.1319999997213 	//文字

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

结果:

//内容,绘制同上的图片和样式和图片里文字一样的5个喵各十万次
122.4900000015623	//图片
444.2899999994552	//文字
92.87199999744189	//图片
433.98700000034296	//文字
89.11799999987124	//图片
434.4539999983681	//文字
89.41499999855296	//图片
436.07799999881536	//文字
88.66099999795551	//图片
435.41299999924377	//文字
89.72800000265124	//图片
433.81500000032247	//文字
88.95900000061374	//图片
311.4950000017416 	//文字

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

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

原始代码如下:





本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

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