如何将HTML5性能发挥到极致

Laya.loader.clearRes(asset);

console.log(Laya.loader.getRes(asset));

}

关于滤镜、遮罩

测验测验尽量削减应用滤镜效不雅。将滤镜(BlurFilter和GlowFilter)应用于显示对象时，运行时将在内存中创建两张位图。个中每个位图的大年夜小与显示对象雷同。将第一个位图创建为显示对象的┞筏格化版本，然后用于生成应用滤镜的另一个位图：

若何将 HTML5 机能发挥到极致

因为实际运行情况是在浏览器中，是以机能还取决于JavaScript说冥器的效力，指定的FPS帧地点低机能说冥器中可能不会达到，所以这部分不是开辟者可以或许决定的，开辟者能作的是尽可能经由过程优化，在低端设备或低机能浏览器中，晋升FPS帧速。

应用滤镜时内存中的两个位图

当修改滤镜的某个属性或者显示对象时，内存中的两个位图都将更新以创建生成的位图，这两个位图可能会占用大年夜量内存。此外，此过程涉及CPU计算，动态更新时将会降低机能(拜见“图形衬着机能 – 关于cacheAs)。

若何将 HTML5 机能发挥到极致

ColorFiter在Canvas衬着下须要计算每个像素点，而在WebGL下的GPU消费可以忽视不计。

最佳的做法是，尽可能应用图像创尴尬刁难象创建的位图来模仿滤镜。避免在运行时中创建动态位图，可以赞助削减CPU或GPU负载。特别是一张应用了滤镜并且不会在修改的图像。

第4节：图形衬着机能

优化Sprite

尽量削减不须要的层次嵌套，削减Sprite数量。
非可见区域的对象尽量大年夜显示列表移除或者设置visible=false。
对于容器内有大年夜量静态内容或者不经常变更的内容(比如按钮)，可以半数个容器设置cacheAs属性，能大年夜量削减Sprite的数量，明显进步机能。如不雅有动态内容，最好和静态内容分开，以便只缓存静态内容。
Panel内，会针对panel区域外的直接子对象(子对象的子对象断定不了)进行不衬着处理，超出panel区域的子对象是不产生消费的。

优化DrawCall

对复杂静态内容设置cacheAs，能大年夜量削减DrawCall，应用好cacheAs是游戏优化的关键。
尽量包管同图集的图片衬着次序是挨着的，如不雅不合图集交叉衬着，会增长DrawCall数量。
尽量包管同一个面板中的所有资本竽暌姑一个图集，如许能削减提交批次。

优化Canvas

在对Canvas优化时，我们须要留意，在以下场合不要应用cacheAs：

对象异常简单，比如一个字或者一个图片，设置cacheAs=bitmap不只不进步机能，反而会损掉机能。
容器内有经常变更的内容，比如容器内有一个动画或者倒计时，如不雅再对这个容器设置cacheAs=bitmap，会损掉机能。

关于cacheAs

设置cacheAs可将显示对象缓存为静态图像，当cacheAs时，子对象产生变更，会主动从新缓存，同时也可以手动调用reCache办法更新缓存。建议把不经常变更的复杂内容，缓存为静态图像，能极大年夜进步衬着机能，cacheAs有”none”，”normal”和”bitmap”三个值可选。

默认为”none”，不做任何缓存。
当值为”normal”时，canvas下进行画布缓存，webgl模式下进行敕令缓存。
当值为”bitmap”时，canvas下进行依然是画布缓存，webGL模式下应用renderTarget缓存。这里须要留意的是，webGL下renderTarget缓存模式有2048大年夜小限制，超出2048会额外增长内存开销。别的，赓续重绘时开销也比较大年夜，然则会削减drawcall，衬着机能最高。 webGL下敕令缓存模式只会削减节点遍历及敕令组织，不会削减drawcall，机能中等。

设置cacheAs后，还可以设置staticCache=true以阻拦主动更新缓存，同时可以手动调用reCache办法更新缓存。

cacheAs重要经由过程两方面晋升机能。一是削减节点遍历和顶点计算;二是削减drawCall。善用cacheAs将是引擎优化机能的利器。

下例绘制10000个文本：

Laya.init(550, 400, Laya.WebGL); 
Laya.Stat.show(); 
 
var textBox = new Laya.Sprite(); 
 
var text; 
for (var i = 0; i < 10000; i++) 
{ 
    text = new Laya.Text(); 
    text.text = (Math.random() * 100).toFixed(0); 
    text.color = "#CCCCCC"; 	
			 3/6   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　Android注解快速入门和实用解析
            
            起首什么是注解?@Override就是注解，它的感化是：    检查是否精确的重写了父类中的办法。    标明代码，这是一个重写的办法。1、表如今于：检查子类重写的办法名与参数类型是否精确;检查>>>详细阅读


本文标题：如何将HTML5性能发挥到极致
地址：http://www.17bianji.com/lsqh/37701.html
 1/2    1