首頁 >web前端 >H5教程 >如何提升html5的效率?

如何提升html5的效率?

WBOY
WBOY原創
2016-06-07 08:45:021746瀏覽

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
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn