跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

canvas在浏览器里的渲染原理?

为什么canvas在浏览器里表现和原生差得太远呢?

为什么cocos2d和egret等html5游戏引擎商家在浏览器里加上runtime就可以让html5游戏性能提升那么高呢?

为什么原生浏览器和PC浏览器不提供类似的功能呢?

基于PhoneGap的HTML5的移动应用 中文WORD版本文档主要讲述的是基于PhoneGap的HTML5的移动应用;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看下载

回复内容:

泻药

问题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其实就是给各机型内置了一套统一的运行环境再对引擎有针对性的做一些优化来保障运行的。

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

相关文章