canvas在浏览器里的渲染原理?
程序员文章站
2022-06-02 08:00:42
...
为什么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其实就是给各机型内置了一套统一的运行环境再对引擎有针对性的做一些优化来保障运行的。
语言表达有点弱,不当之处请谅解。
为什么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其实就是给各机型内置了一套统一的运行环境再对引擎有针对性的做一些优化来保障运行的。
语言表达有点弱,不当之处请谅解。
推荐阅读
-
canvas 画布在主流浏览器中的尺寸限制详细介绍
-
在canvas初始化的时候设置渲染模式为ScreenSpaceCamera,并指定摄像机
-
施用curl获取地址的时候,显示Bad Request.但是这个地址在浏览器里有可以打开
-
在浏览器里查看Nginx和PHP-FPM的运行状态
-
canvas 画布在主流浏览器中的尺寸限制详细介绍
-
canvas在浏览器里的渲染原理?
-
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路_javascript技巧
-
施用curl获取地址的时候,显示Bad Request.但是这个地址在浏览器里有可以打开
-
浏览器的渲染原理简介_html/css_WEB-ITnose
-
高手请进,为什么我的Php脚本在浏览器里能执行,用php命令执行却报错