登录  /  注册
首页 > web前端 > H5教程 > 正文

如何提升html5的效率?

php中文网
发布: 2016-06-07 08:45:02
原创
1540人浏览过

rt,我知道html5其中一个的瓶颈是在的js运行效率,但是请问Canvas的绘制效率高不高,html5的3D性能又如何呢,他与flash、unity web、 SilverLight效率相比怎么样呢?

回复内容:

补充一个视频,Qunee性能测试,给人更直观的印象,基于Canvas的拓扑图,上万图元流畅操作,导出两亿像素的大图,图形渲染能力已经将flex, silverlight抛到脑后了
下面是六千多图元时的弹簧布局效果,背后界面是十万图元拓扑图渲染
优酷视频:

如何提升html5的效率? 基于HTML5的拓扑图 - 十万图元流畅展示 http://v.youku.com/v_show/id_XNzI1NDc2NzQ0.html
如何提升html5的效率?
————————————————————————————
前面两位说的都很好,我这里汇总一下,附上些图,大家看起来方便
js运行效率在提升
编程语言的效率是前提,js自然比不上native的C语言效率,所以Canvas效率无疑比不上原生的2D图形绘制,但是js效率的提升是有目共睹的,以js与as为例,基本操作(运算操作,集合操作,Map操作)已经超越ActionScript,尤其是Google Chrome浏览器与as拉开了不小的距离,甚至某些方面超过java
如何提升html5的效率?

Canvas绘制效率不低
Canvas没有dom操作,只是简单的2D绘制,所以效率不低,Chrome浏览器下,每秒可绘制五万个基本图形元素(圆形,矩形或者线条),如果有阴影效果会慢很多,总的来说上万元素的绘制还是很轻松的

适合简单应用
因为简单,做一些像素处理,2D绘制,小游戏啥的还是很方便的,国际上有javascript 1k作品大赛(js1k.com/),用1024字节的js代码,实现丰富的效果,基本上都用到canvas,所以在轻量小巧方面很有优势
附上SVG与Canvas的适用范围
如何提升html5的效率?
复杂应用可借助第三方开发包
对于复杂应用,需要自己来解决无效区域,局部刷新,交互选中等功能,自己实现有些难度,这时候我建议借助第三方开发包 Appcan自称对Canvas特别做了优化,但是它怎么做的我看不懂。自己去了解一下吧。
DEV文档_AppCan移动应用开发平台 哈哈,蟹妖。
Canvas 的运行效率无疑比原生的C++要慢。不过采取一定手段是能加速不少的。
1、Canvas 的一个被人最大诟病的,以及我认为是最大问题的地方是,绘制流程不是基于属性的全自动绘制,而是回到史前的完全自己管理所有重绘流程的保留式绘制。也就是说,有一个地方变化,需要重绘,你需要知道得重绘(无效矩形)多大,然后一层层的往上绘制。其实纵观HTML,为什么大家觉得比原生win32界面开发要方便,就是因为html基于属性,设置一个地方,就能发生变化,完全不需要管那些繁琐的绘制逻辑。所以找个现成的html5框架能省事不少。让框架管理最麻烦的重绘流程。这方面楼上有几个好例子了。
2、网上有很多关于优化js运行效率的文字,可以搜索来看下,比如 google.com.hk/search?
3、另外想说下,一定要减少对大块图案做像素处理。js做这种事情,肯定是相当的慢……
4、……未完待续 提高html5效率 不如说提高 js性能 还有 稳定快速的浏览器也是很重要的哦!
楼主说的canvas 为什么许多人推荐使用canvas而不是svg 一个重要原因canvas对dom操作相对svg要少很多,这致使canvas执行效率 大大提升。 如果是一般需求 可以说完全没问题!
其实个人关于js所谓优化观点:
1:注意for循环
2:注意dom操作
3:js库的选择(如果需要)
4:闭包的使用 GC
智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号