如何提升html5的效率？
程序员文章站
2022-05-31 12:22:11
...
rt，我知道html5其中一个的瓶颈是在的js运行效率，但是请问Canvas的绘制效率高不高，html5的3D性能又如何呢，他与flash、unity web、 SilverLight效率相比怎么样呢？
下面是六千多图元时的弹簧布局效果，背后界面是十万图元拓扑图渲染
优酷视频：
基于HTML5的拓扑图 - 十万图元流畅展示 http://v.youku.com/v_show/id_XNzI1NDc2NzQ0.html
————————————————————————————
前面两位说的都很好，我这里汇总一下，附上些图，大家看起来方便
js运行效率在提升
编程语言的效率是前提，js自然比不上native的C语言效率，所以Canvas效率无疑比不上原生的2D图形绘制，但是js效率的提升是有目共睹的，以js与as为例，基本操作（运算操作，集合操作，Map操作）已经超越ActionScript，尤其是Google Chrome浏览器与as拉开了不小的距离，甚至某些方面超过java
Canvas绘制效率不低
Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆形，矩形或者线条），如果有阴影效果会慢很多，总的来说上万元素的绘制还是很轻松的
适合简单应用
因为简单，做一些像素处理，2D绘制，小游戏啥的还是很方便的，国际上有javascript 1k作品大赛（http://js1k.com/），用1024字节的js代码，实现丰富的效果，基本上都用到canvas，所以在轻量小巧方面很有优势
附上SVG与Canvas的适用范围
复杂应用可借助第三方开发包
对于复杂应用，需要自己来解决无效区域，局部刷新，交互选中等功能，自己实现有些难度，这时候我建议借助第三方开发包 Appcan自称对Canvas特别做了优化，但是它怎么做的我看不懂。自己去了解一下吧。
DEV文档_AppCan移动应用开发平台 哈哈，蟹妖。
Canvas 的运行效率无疑比原生的C++要慢。不过采取一定手段是能加速不少的。
1、Canvas 的一个被人最大诟病的，以及我认为是最大问题的地方是，绘制流程不是基于属性的全自动绘制，而是回到史前的完全自己管理所有重绘流程的保留式绘制。也就是说，有一个地方变化，需要重绘，你需要知道得重绘（无效矩形）多大，然后一层层的往上绘制。其实纵观HTML，为什么大家觉得比原生win32界面开发要方便，就是因为html基于属性，设置一个地方，就能发生变化，完全不需要管那些繁琐的绘制逻辑。所以找个现成的html5框架能省事不少。让框架管理最麻烦的重绘流程。这方面楼上有几个好例子了。
2、网上有很多关于优化js运行效率的文字，可以搜索来看下，比如 http://www.google.com.hk/search?q=js+%E8%BF%90%E8%A1%8C%E6%95%88%E7%8E%87+%E6%8F%90%E5%8D%87&sugexp=chrome,mod=0&sourceid=chrome&ie=UTF-8
3、另外想说下，一定要减少对大块图案做像素处理。js做这种事情，肯定是相当的慢……
4、……未完待续 提高html5效率 不如说提高 js性能 还有 稳定快速的浏览器也是很重要的哦！
楼主说的canvas 为什么许多人推荐使用canvas而不是svg 一个重要原因canvas对dom操作相对svg要少很多，这致使canvas执行效率 大大提升。 如果是一般需求 可以说完全没问题！
其实个人关于js所谓优化观点：
1：注意for循环
2：注意dom操作
3：js库的选择（如果需要）
4：闭包的使用 GC
回复内容：
补充一个视频，Qunee性能测试，给人更直观的印象，基于Canvas的拓扑图，上万图元流畅操作，导出两亿像素的大图，图形渲染能力已经将flex, silverlight抛到脑后了下面是六千多图元时的弹簧布局效果，背后界面是十万图元拓扑图渲染
优酷视频：
————————————————————————————
前面两位说的都很好，我这里汇总一下，附上些图，大家看起来方便
js运行效率在提升
编程语言的效率是前提，js自然比不上native的C语言效率，所以Canvas效率无疑比不上原生的2D图形绘制，但是js效率的提升是有目共睹的，以js与as为例，基本操作（运算操作，集合操作，Map操作）已经超越ActionScript，尤其是Google Chrome浏览器与as拉开了不小的距离，甚至某些方面超过java
Canvas绘制效率不低
Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆形，矩形或者线条），如果有阴影效果会慢很多，总的来说上万元素的绘制还是很轻松的
适合简单应用
因为简单，做一些像素处理，2D绘制，小游戏啥的还是很方便的，国际上有javascript 1k作品大赛（http://js1k.com/），用1024字节的js代码，实现丰富的效果，基本上都用到canvas，所以在轻量小巧方面很有优势
附上SVG与Canvas的适用范围
复杂应用可借助第三方开发包
对于复杂应用，需要自己来解决无效区域，局部刷新，交互选中等功能，自己实现有些难度，这时候我建议借助第三方开发包 Appcan自称对Canvas特别做了优化，但是它怎么做的我看不懂。自己去了解一下吧。
DEV文档_AppCan移动应用开发平台 哈哈，蟹妖。
Canvas 的运行效率无疑比原生的C++要慢。不过采取一定手段是能加速不少的。
1、Canvas 的一个被人最大诟病的，以及我认为是最大问题的地方是，绘制流程不是基于属性的全自动绘制，而是回到史前的完全自己管理所有重绘流程的保留式绘制。也就是说，有一个地方变化，需要重绘，你需要知道得重绘（无效矩形）多大，然后一层层的往上绘制。其实纵观HTML，为什么大家觉得比原生win32界面开发要方便，就是因为html基于属性，设置一个地方，就能发生变化，完全不需要管那些繁琐的绘制逻辑。所以找个现成的html5框架能省事不少。让框架管理最麻烦的重绘流程。这方面楼上有几个好例子了。
2、网上有很多关于优化js运行效率的文字，可以搜索来看下，比如 http://www.google.com.hk/search?q=js+%E8%BF%90%E8%A1%8C%E6%95%88%E7%8E%87+%E6%8F%90%E5%8D%87&sugexp=chrome,mod=0&sourceid=chrome&ie=UTF-8
3、另外想说下，一定要减少对大块图案做像素处理。js做这种事情，肯定是相当的慢……
4、……未完待续 提高html5效率 不如说提高 js性能 还有 稳定快速的浏览器也是很重要的哦！
楼主说的canvas 为什么许多人推荐使用canvas而不是svg 一个重要原因canvas对dom操作相对svg要少很多，这致使canvas执行效率 大大提升。 如果是一般需求 可以说完全没问题！
其实个人关于js所谓优化观点：
1：注意for循环
2：注意dom操作
3：js库的选择（如果需要）
4：闭包的使用 GC