搜索
首页web前端H5教程如何提升html5的效率?
如何提升html5的效率?Jun 07, 2016 am 08:45 AM
canvasflashhtml5silverlightunity

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
html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html5是什么意思html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言(HTML)的第五次重大修改,即第5代HTML。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)