Home  >  Article  >  Web Front-end  >  如何提升html5的效率?

如何提升html5的效率?

WBOY
WBOYOriginal
2016-06-07 08:45:021732browse

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
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn