canvas在浏览器里的渲染原理？-H5教程

为什么canvas在浏览器里表现和原生差得太远呢？
为什么cocos2d和egret等html5游戏引擎商家在浏览器里加上runtime就可以让html5游戏性能提升那么高呢？
为什么原生浏览器和PC浏览器不提供类似的功能呢？

回复内容：

泻药

问题1：
原生调用绘图API只跟自己系统的相关API打交道
浏览器的Canvas要保持跨平台兼容性
起码要适配（编译适配）到一个或几个通用图形（字体）封装库上
并不一定能直接跟当前系统的绘制（字体）API打交道
这就一层封装消耗了
再为了把这层封装暴露成JS API
又要包一层
而 JS 运行效率大部分情况赶不上native
导致第三层消耗
所以
相对的 canvas 要慢些

问题2：
cocos2d和egret等并不是在浏览器上加runtime
而是直接使用对应系统的API进行封装以及调用优化
肯定比 canvas 要快
而 cocos2d-html5 这种
在浏览器环境内使用js封装的库来说
它最终用的还是canvas
所谓效率高
只是你写的东西
在使用canvas时
没有做到比他们更优化
（全局重绘还是局部重绘，绘制数据cache diff 等）

问题3：
浏览器只是平台性质的
不面向其下特定细分环境
如同操作系统一样承载软件运行
所以他们都只会提供基础（低级）API
不会提供用户级的高级API
因为用户级API与实际应用场景相关性太强
canvas 就是基础
touchxxx 事件等也是基础
想要用好得自己根据业务情况再次封装
如果提供了游戏引擎这种细分领域封装
那就成了游戏机系统 其实主要不是因为canvas性能低，手机设备碎片化严重，早期的手机硬件配置低内置的浏览器对html5的支持不好，导致一个应用开发出来在各个设备上表现不一致。


比如iPhone4只支持elementAudio，而iPhone6就可以用webAudio。

有时候在原生浏览器能流畅运行但是到微信中就卡，是因为微信本身占用了大量系统资源，分配给浏览器的资源不够用了。

runtime其实就是给各机型内置了一套统一的运行环境再对引擎有针对性的做一些优化来保障运行的。

语言表达有点弱，不当之处请谅解。