威尼斯手机平台登陆-官方网站登录

威尼斯手机平台登陆为您带来世界三大博彩公司最新相关资讯,威尼斯官方网站登录充分考虑到不同地域网民的不同需求,威尼斯手机平台登陆良好的用户界面,人性化的操作,实用的功能设计使其广泛受到欢迎,推动实体出版、影视、动漫、游戏等相关文化产业的发展。

您的位置:威尼斯手机平台登陆 > 威尼斯登录首页 > 同时可以手动调用reCache方法更新缓存,而HTML5性能优化前与优化后有着极大的差别

同时可以手动调用reCache方法更新缓存,而HTML5性能优化前与优化后有着极大的差别

发布时间:2020-02-27 14:02编辑:威尼斯登录首页浏览(172)

    HTML5看作新生领域越来越热。不过在活动道具硬件质量弱于PC的背景下,对质量的供给显得更为首要,而HTML5质量优化前与优化后具备宏大的歧异,如何优化本领增高品质,对此熟悉的人非常少。本文以LayaAir引擎为例,通过代码示例详细解说如何利用引擎对HTML5作出质量的极度优化。

    销毁成分

    var  sp =  new  Sprite();
    sp.destroy();
    

    核心满含:

    禁绝回调垃圾回笼

    Laya.loader.load(urls, Handler.create( this , onAssetLoaded), Handler.create( this , onLoading,  null ,  false ));
    
    • 代码试行基本原理
    • 标准测量检验
    • 内部存款和储蓄器优化
    • 图形渲染质量
    • 减少CPU使用量
    • 任何优化攻略

    财富卸载

    var  assets = [];
    assets.push( "res/apes/monkey0.png" );
    assets.push( "res/apes/monkey1.png" );
    assets.push( "res/apes/monkey2.png" );
    assets.push( "res/apes/monkey3.png" );
    
    Laya.loader.load(assets, Handler.create( this , onAssetsLoaded));
    
    function  onAssetsLoaded()
    {
         for ( var  i =  0 , len = assets.length; i < len; ++i)
         {
             var  asset = assets[i];
             console.log(Laya.loader.getRes(asset));
             Laya.loader.clearRes(asset);
             console.log(Laya.loader.getRes(asset));
         }
    }
    

    ColorFiter在Canvas渲染下供给总计各样像素点,而在WebGL下的GPU消耗能够忽视不计。
    至上的做法是,尽或者选择图像创作工具创造的位图来效仿滤镜。幸免在运转时中创设动态位图,能够支持减削CPU或GPU负载。特别是一张使用了滤镜何况不会在校正的图像。

    第四节:代码施行基本原理

    LayaAir引擎扶植AS3、TypeScript、JavaScript二种语言开拓,可是无论选用哪一种开垦语言,最后试行的皆以JavaScript代码。全部见到的镜头都以透过引擎绘制出来的,更新频率决计于开荒者钦点的FPS,比方钦点帧频率为60FPS,则运营时每一个帧的实践时间为六10%秒,所以帧速越高,视觉上感到越流畅,60帧是满帧。

    由于实在运作条件是在浏览器中,因而品质还在于JavaScript解释器的频率,内定的FPS帧速在低品质解释器中恐怕不会高达,所以这一部分不是开拓者能够调控的,开荒者能作的是竭尽通过优化,在低等设备或低质量浏览器中,升高FPS帧速。

    LayaAir引擎在每帧都会重绘,在质量优化时,除了关注每帧施行逻辑代码带给的CPU消耗,还索要在意每帧调用绘图指令的数额以至GPU的纹路提交次数。

    优化Sprite

    1. 尽量收缩不须求的层系嵌套,减弱Pepsi-Cola数量。
    2. 非可知区域的对象尽量从显示列表移除只怕设置visible=false。
    3. 对此容器内有雅量静态内容还是不时常转移的剧情(比如开关),能够对全部容器设置cacheAs属性,能多量裁减Pepsi-Cola的多少,明显抓好质量。假如有动态内容,最佳和静态内容分别,以便只缓存静态内容。
    4. Panel内,会指向panel区域外的直接子对象(子对象的子对象推断不了)举办不渲染管理,超过panel区域的子对象是不爆发消耗的。

    第二节:基准测量试验

    LayaAir引擎内置的属性计算工具可用于规范测验,实时检查评定当前品质。开拓者能够行使laya.utils.Stat类,通过Stat.show(卡塔尔国呈现总计面板。具体编写代码如下例所示:

    Stat.show(0,0); //AS3的面板调用写法       
    Laya.Stat.show(0,0); //TS与JS的面板调用写法
    

    Canvas渲染的总结音讯:

    威尼斯登录首页 1

    WebGL渲染的总计新闻:

    威尼斯登录首页 2

    总计参数的含义:

    FPS:

    每秒呈现的帧数(数字越高越好State of Qatar。
    行使canvas渲染时,描述字段展现为FPS(Canvas卡塔尔,使用WebGL渲染时,描述字段显示为FPS(WebGL卡塔尔国。

    Sprite:

    渲染节点数量(数字越低越好)。
    Pepsi-Cola总括全数渲染节点(满含容器),那几个数字的大小会耳熏目染引擎节点遍历,数据组织和渲染的次数。

    DrawCall:

    DrawCall在canvas和WebGL渲染下代表分裂的意义(越少越好)。
    Canvas下代表每帧的绘图次数,包罗图形、文字、矢量图。尽量限定在100之下。
    WebGL下代表渲染提交批次,每一次策动数据并通告GPU渲染绘制的长河称为1次DrawCall,在每1次DrawCall中除了在布告GPU的渲染上比较耗费时间之外,切换材料与shader也是格外耗费时间的操作。 DrawCall的次数是决定品质的第一指标,尽量限定在100之下。

    Canvas:

    四个数值 —— 每帧重绘的画布数量 / 缓存类型为“normal”类型的画布数量 / 缓存类型为“bitmap”类型的画布数量”。
    CurMem:只限WebGL渲染,表示内部存款和储蓄器与显存占用(越低越好)。
    Shader:仅限WebGL渲染,表示每帧Shader提交次数。

    任由Canvas形式依然WebGL格局,大家都急需重视关心DrawCall,Sprite,Canvas那多少个参数,然后针对地进行优化。(参见“图形渲染质量”)

    cacheAs

    安装cacheAs可将展现对象缓存为静态图像,当cacheAs时,子对象爆发变化,会自动重新缓存,同期也能够手动调用reCache方法改革缓存。 建议把反常变化的纷纭剧情,缓存为静态图像,能大幅度加强渲染品质,cacheAs有"none","normal"和"bitmap"多个值可选。

    1. 默认为"none",不做别的缓存。
    2. 当班值日为"normal"时,Canvas下举办画布缓存,webgl格局下进行指令缓存。
    3. 当班值日为"bitmap"时,Canvas下展开依旧是画布缓存,webGL情势下选拔renderTarget缓存。这里须要注意的是,webGL下renderTarget缓存方式有2048尺寸限定,超过2048会非常增添内部存款和储蓄器花销。其余,不断重绘时支付也正如大,可是会减削drawcall,渲染质量最高。 webGL下命令缓存情势只会巨惠扣节点遍历及命令协会,不会回降drawcall,质量中等。

    安装cacheAs后,还足以设置staticCache=true以阻止自动更新缓存,同时能够手动调用reCache方法立异缓存。

    cacheAs重要通过双方面升高品质。一是压缩节点遍历和终极总计;二是减少drawCall。善用cacheAs将是引擎优化品质的利器。

    第四节:内部存款和储蓄器优化

    对象池

    对象池,涉及到不断重复使用对象。在起头化应用程序时期创制一定数量的目的并将其积存在二个池中。对四个目的实现操作后,将该对象放回到池中,在急需新目的时得以对其进展查找。
    出于实例化对象花费异常高,使用对象池重用对象可减少实例化对象的急需。还是可以减去污源回笼器运转的时机,进而巩固程序的运维速度。

    以下代码演示使用

    Laya.utils.Pool:

    ar SPRITE_SIGN = 'spriteSign';
    var sprites = [];
    function initialize()
    {
        for (var i = 0; i < 1000; i++)
        {
            var sp = Pool.getItemByClass(SPRITE_SIGN, Sprite)
            sprites.push(sp);
            Laya.stage.addChild(sp);
        }
    }
    initialize();
    

    在initialize中开创大小为1000的对象池。

    以下代码在当单击鼠标时,将去除显示列表中的全部呈现对象,并在之后的此外任务中重复使用这个指标:

    Laya.stage.on("click", this, function()
    {
        var sp;
        for(var i = 0, len = sprites.length; i < len; i++)
        {
            sp = sprites.pop();
            Pool.recover(SPRITE_SIGN, sp);
            Laya.stage.removeChild(sp);
        }
    });
    

    调用Pool.recover后,内定的靶子会被回笼至池内。

    使用Handler.create

    在支付进度中,会时时使用Handler来成功异步回调。Handler.create使用了内置对象池处理,由此在应用Handler对象时应运用Handler.create来创制回调解和处理理器。以下代码应用Handler.create创造加载的回调解和处理理器:

    Laya.loader.load(urls, Handler.create(this, onAssetLoaded));
    

    在地点的代码中,回调被实行后Handler将会被对象池收回。那个时候,思索如下代码会爆发什么事:

    Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading));
    

    在地点的代码中,使用Handler.create再次来到的Computer处理progress事件。当时的回调试行叁次之后就被对象池回笼,于是progress事件只接触了三次,那个时候急需将多个名称为once的参数设置为false:

    Laya.loader.load(urls, Handler.create(this, onAssetLoaded), Handler.create(this, onLoading, null, false));
    

    放出内部存款和储蓄器

    JavaScript运转时敬谢不敏运行垃圾回笼器。要保管三个对象能够被回笼,请删除对该指标的富有引用。Pepsi-Cola提供的destory会扶持设置内部援引为null。

    诸如,以下代码确认保障指标能够被用作垃圾回笼:

    var sp = new Sprite();
    sp.destroy();
    

    当对象设置为null,不会即时将其从内部存款和储蓄器中删除。独有系统以为内部存款和储蓄器丰硕低时,垃圾回收器才会运营。内部存款和储蓄器分配(实际不是目的删除)会触发垃圾回笼。

    垃圾堆回收时期只怕占用大批量CPU并影响属性。通过录取对象,尝试限定使用垃圾回收。别的,尽恐怕将援引设置为null,以便垃圾回笼器用少之甚少时间来查找对象。不常(譬喻五个对象互相援引),不可能同期设置七个引用为null,垃圾回笼器将围观不可能被访谈到的对象,并将其排除,那会比引用计数更成本质量。

    能源卸载

    游玩运营时总会加载大多能源,这个能源在利用产生后应马上卸载,不然一贯残余在内部存款和储蓄器中。

    下例演示加载能源后对待财富卸载前和卸载后的财富境况:

    var assets = [];
    assets.push("res/apes/monkey0.png");
    assets.push("res/apes/monkey1.png");
    assets.push("res/apes/monkey2.png");
    assets.push("res/apes/monkey3.png");
    
    Laya.loader.load(assets, Handler.create(this, onAssetsLoaded));
    
    function onAssetsLoaded()
    {
        for(var i = 0, len = assets.length; i < len; ++i)
        {
            var asset = assets[i];
            console.log(Laya.loader.getRes(asset));
            Laya.loader.clearRes(asset);
            console.log(Laya.loader.getRes(asset));
        }
    }
    

    关于滤镜、遮罩

    品味尽量缩短使用滤镜效果。将滤镜(BlurFilter和GlowFilter)应用于展现对象时,运转时就要内部存款和储蓄器中创设两张位图。个中每一个位图的分寸与显示对象相通。将第2个位图创立为浮现对象的栅格化版本,然后用于转移应用滤镜的另一个位图:

    威尼斯登录首页 3

    动用滤镜时内部存储器中的七个位图

    当校勘滤镜的某部属性也许显示对象时,内部存储器中的五个位图都将创新以创办生成的位图,这多少个位图大概会占用大量内部存款和储蓄器。其他,此进度涉及CPU总括,动态更新时将会稳中有降质量(参见“图形渲染品质– 关于cacheAs)。

    ColorFiter在Canvas渲染下需求总括每种像素点,而在WebGL下的GPU消耗能够忽略不计。

    至上的做法是,尽恐怕使用图像创作工具创立的位图来效仿滤镜。制止在运转时中创设动态位图,能够支持减弱CPU或GPU负载。特别是一张接受了滤镜况且不会在改换的图像。

    文本

    //后面只是更新文字内容,使用changeText能提高性能
    text.changeText( "text changed." );
    

    Text.changeText会直接改良绘图指令中该文件绘制的尾声一条指令,这种前边的绘图指令仍然存在的一言一行会引致changeText只行使于以下情形:
    · 文本始终独有一行。
    · 文本的样式始终不改变(颜色、粗细、斜体、对齐等等)。

    第一节:图形渲染质量

    优化Sprite

    1.尽量滑坡无需的等级次序嵌套,减弱Pepsi-Cola数量。
    2.非可知区域的指标尽量从出示列表移除恐怕安装visible=false。
    3.对于容器内有大批量静态内容还是不平时转移的剧情(比如开关),能够对整个容器设置cacheAs属性,能大批量减小百事可乐的多寡,分明拉长质量。假如有动态内容,最棒和静态内容分别,以便只缓存静态内容。
    4.Panel内,会针对panel区域外的直接子对象(子对象的子对象剖断不了)实行不渲染管理,超过panel区域的子对象是不发生消耗的。

    优化DrawCall

    1.对复杂静态内容设置cacheAs,能大量减去DrawCall,使用好cacheAs是游玩优化的主要。
    2.尽量确定保障同图册的图样渲染顺序是挨着的,即使区别图册交叉渲染,会追加DrawCall数量。
    3.尽量保证同二个面板中的全部能源用七个图册,这样能减小提交批次。

    优化Canvas

    在对Canvas优化时,大家要求小心,在以下场地不要选拔cacheAs:

    1.对象非常轻便,比方三个字依然四个图纸,设置cacheAs=bitmap不但不拉长品质,反而会损失品质。
    2.容器内有日常变化的剧情,举个例子容器内有三个动漫或然倒计时,假使再对这么些容器设置cacheAs=bitmap,会损失质量。

    能够透过查看Canvas总括音讯的率先个值,决断是还是不是一向在刷新Canvas缓存。

    关于cacheAs

    安装cacheAs可将展示对象缓存为静态图像,当cacheAs时,子对象发生变化,会自动重新缓存,同有时间也得以手动调用reCache方法改良缓存。 建议把不平时变化的纷纭剧情,缓存为静态图像,能小幅加强渲染品质,cacheAs有”none”,”normal”和”bitmap”三个值可选。

    1. 默感觉”none”,不做别的缓存。
      2.当班值日为”normal”时,canvas下开展画布缓存,webgl格局下开展指令缓存。
      3.当班值日为”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";
    
        text.x = Math.random() * 550;
        text.y = Math.random() * 400;
    
        textBox.addChild(text);
    }
    
    Laya.stage.addChild(textBox);
    

    上边是我计算机上的运作时截图,FPS稳固于52光景。

    威尼斯登录首页 4

    当大家对文字所在的容器设置为cacheAs之后,如上边包车型地铁例证所示,质量获得相当大的晋级,FPS达到到了60帧。

    // …省略其他代码… var textBox = new Laya.Sprite();
    textBox.cacheAs = "bitmap"; // …省略其他代码…
    

    威尼斯登录首页 5

    文字描边

    在运维时,设置了描边的文本比未有描边的公文多调用二遍绘图指令。当时,文本对CPU的使用量和文书的数额成正比。因而,尽量选取替代方案来达成近似的急需。

    对于差相当少不改良的公文内容,能够选择cacheAs减少质量消耗,参见“图形渲染品质– 关于cacheAs”。

    对于内容平时改进,可是采用的字符数量相当少的文本域,还行使用位图字体。

    跳过文本制版,直接渲染

    当先八分之四情形下,相当多文件都无需复杂的排版,仅仅轻易地显示一行字。为了迎合这一须求,Text提供的名叫changeText的主意能够平昔跳过制版。

    var text = new Text();
    text.text = "text";
    Laya.stage.addChild(text);
    //后面只是更新文字内容,使用changeText能提高性能
    text.changeText("text changed.");
    

    Text.changeText会直接更正绘图指令中该公文绘制的最后一条指令,这种前面包车型客车绘图指令依然存在的一坐一起会变成changeText只行使于以下景况:

    文件始终唯有一行。

    文本的体制始终不改变(颜色、粗细、斜体、对齐等等)。

    不怕那样,实际编制程序中依然会平日应用到这么的急需。

    减削动态属性查找

    JavaScript中其他对象都以动态的,你能够任性地加多属性。不过,在大气的性质里寻觅某属性只怕很耗费时间。假如必要频仍利用某些属性值,能够选择一些变量来保存它:

    function  foo(){
         var  prop = target.prop;
         // 使用prop
         process1(prop);
         process2(prop);
         process3(prop);
    }
    

    第5节:减少CPU使用量

    收缩动态属性查找

    JavaScript中任何对象都以动态的,你能够自由地加多属性。可是,在大方的习性里探寻某属性大概很耗费时间。假设急需一再利用有些属性值,能够动用部分变量来保存它:

    function foo()
    {
        var prop = target.prop;
        // 使用prop
        process1(prop);
        process2(prop);
        process3(prop);
    }
    

    计时器

    LayaAir提供三种沙漏循环来试行代码块。

    1. Laya.timer.frameLoop实践效用信赖于帧频率,可经过Stat.FPS查看当前帧频。
    2. Laya.timer.loop推行作用信任于参数指定期期。

    当叁个目的的生命周期截止时,记得消亡其内部的Timer:

    Laya.timer.frameLoop(1, this, animateFrameRateBased);
    Laya.stage.on("click", this, dispose);
    function dispose() 
    {
        Laya.timer.clear(this, animateFrameRateBased);
    }
    

    获取展现对象边界的做法

    在相对布局中,很平时须求科学地赢得呈现对象的分界。获取突显对象的界限也可以有三种做法,而当中差距很有必不可少知道。

    1.使用getBounds/ getGraphicBounds。、

    var sp = new Sprite();
    sp.graphics.drawRect(0, 0, 100, 100, "#FF0000");
    var bounds = sp.getGraphicBounds();
    Laya.stage.addChild(sp);
    

    getBounds能够知足非常多超越57%须要,但由于其须要总计边界,不合乎频仍调用。

    2.装置容器的autoSize为true。

    var sp = new Sprite();
    sp.autoSize = true;
    sp.graphics.drawRect(0, 0, 100, 100, "#FF0000");
    Laya.stage.addChild(sp);
    

    上述代码能够在运作时不易获取宽高。autoSize在得到宽高而且显示列表的情事发生转移时会重新总结(autoSize通过getBoudns计算宽高)。所以对负有大批量子对象的容器应用autoSize是不可取的。纵然设置了size,autoSize将不起效。

    应用loadImage后取得宽高:

    var sp = new Sprite();
    sp.loadImage("res/apes/monkey2.png", 0, 0, 0, 0, Handler.create(this, function()
    {
        console.log(sp.width, sp.height);
    }));
    Laya.stage.addChild(sp);
    

    loadImage在加载成功的回调函数触发之后才得以准确获取宽高。

    3.一向调用size设置:

    Laya.loader.load("res/apes/monkey2.png", Handler.create(this, function()
    {
        var texture = Laya.loader.getRes("res/apes/monkey2.png");
        var sp = new Sprite();
        sp.graphics.drawTexture(texture, 0, 0);
        sp.size(texture.width, texture.height);
        Laya.stage.addChild(sp);
    }));
    

    接收Graphics.drawTexture并不会自行安装容器的宽高,不过能够运用Texture的宽高授予容器。无可置疑,这是最高效的情势。

    注:getGraphicsBounds用于获取矢量绘图宽高。

    据说活动状态改过帧频

    帧频有两种情势,Stage.FRAME_SLOW维持FPS在30;Stage.FRAME_FAST维持FPS在60;Stage.FRAME_MOUSE则选择性维持FPS在30或60帧。

    神蹟并无需让游玩以60FPS的速率试行,因为30FPS已经能够满足非常多场地下人类视觉的响应,不过鼠标交互作用时,30FPS大概会促成画面包车型客车不连贯,于是Stage.FRAME_MOUSE应运而生。

    下例展示以Stage.FRAME_SLOW的帧率,在画布上活动鼠标,使圆球跟随鼠标移动:

    Laya.init(Browser.width, Browser.height);
    Stat.show();
    Laya.stage.frameRate = Stage.FRAME_SLOW;
    
    var sp = new Sprite();
    sp.graphics.drawCircle(0, 0, 20, "#990000");
    Laya.stage.addChild(sp);
    
    Laya.stage.on(Event.MOUSE_MOVE, this, function()
    {
        sp.pos(Laya.stage.mouseX, Laya.stage.mouseY);
    });
    

    威尼斯登录首页 6

    这会儿FPS显示30,况兼在鼠标移动时,能够以为到圆球地点的改革不连贯。设置Stage.frameRate为Stage.FRAME_MOUSE:

    Laya.stage.frameRate = Stage.FRAME_MOUSE;
    

    威尼斯登录首页 7

    那儿在鼠标移动后FPS展销会示60,而且画面流畅度提高。在鼠标静止2秒不动后,FPS又会复苏到30帧。

    使用callLater

    callLater使代码块延迟至本帧渲染前进行。假若当前的操作频仍退换某指标的状态,那时可以虚构动用callLater,以缩节食复总结。

    杜撰二个图片,对它设置任何改换外观的质量都将产生图形重绘:

    var rotation = 0,
        scale = 1,
        position = 0;
    
    function setRotation(value)
    {
        this.rotation = value;
        update();
    }
    
    function setScale(value)
    {
        this.scale = value;
        update();
    }
    
    function setPosition(value)
    {
        this.position = value;
        update();
    }
    
    function update()
    {
        console.log('rotation: ' + this.rotation + 'tscale: ' + this.scale + 'tposition: ' + position);
    }
    

    调用以下代码改进状态:

    setRotation(90); setScale(2); setPosition(30);
    

    调控台的打字与印刷结果是

    rotation: 90 scale: 1 position: 0
    rotation: 90 scale: 2 position: 0
    威尼斯登录首页,rotation: 90 scale: 2 position: 30

    update被调用了三遍,并且最终的结果是没有错的,不过前面两遍调用都以无需的。

    尝试将三处update改为:

    Laya.timer.callLater(this, update);
    

    那时,update只会调用一遍,並且是大家想要的结果。

    图表/图册加载

    在成功图片/图册的加载之后,引擎就能够起来拍卖图片能源。如若加载的是一张画集,会管理每张子图片。即使壹回性管理大批量的图形,那几个进度也许会引致长日子的卡顿。

    在娱乐的财富加载中,能够将财富依照关卡、场景等分类加载。在同一时间管理的图形越少,此时的嬉戏响应速度也会越来越快。在能源使用到位后,也得以付与卸载,释放内部存款和储蓄器。

    计时器

    LayaAir提供三种电磁打点计时器循环来执行代码块。

    1. Laya.timer.frameLoop实施功用依赖于帧频率,可经过Stat.FPS查看当前帧频。
    2. Laya.timer.loop试行功能注重于参数钦赐时期。
    Laya.timer.frameLoop( 1 ,  this , animateFrameRateBased);
    Laya.stage.on( "click" ,  this , dispose);
    function  dispose() {
         Laya.timer.clear( this , animateFrameRateBased);
    }
    

    第6节:别的优化战术

    1.调整和减弱粒子使用数据,在运动平台Canvas形式下,尽量不用粒子;

    2.在Canvas情势下,尽量减弱旋转,缩放,阿尔法等特性的采纳,那么些属性会对品质发生消耗。(在WebGL形式能够运用);

    3.不要在timeloop里面创设对象及复杂计算;

    4.尽量减少对容器的autoSize的采取,减弱getBounds(卡塔尔(قطر‎的选择,因为这一个调用会时有产生比较多划算;

    5.尽量少用try catch的接受,被try catch的函数实行会变得十二分慢;

    获取呈现对象边界

    第一种

    var  sp =  new  Sprite();
    sp.graphics.drawRect( 0 ,  0 ,  100 ,  100 ,  "#FF0000" );
    var  bounds = sp.getGraphicBounds();
    Laya.stage.addChild(sp);
    

    第三种, 自动尺寸

    var  sp =  new  Sprite();
    sp.autoSize =  true ;
    sp.graphics.drawRect( 0 ,  0 ,  100 ,  100 ,  "#FF0000" );
    Laya.stage.addChild(sp);
    

    加载图片后获取尺寸

    var  sp =  new  Sprite();
    sp.loadImage( "res/apes/monkey2.png" ,  0 ,  0 ,  0 ,  0 , Handler.create( this ,  function (){
         console.log(sp.width, sp.height);
    }));
    Laya.stage.addChild(sp);
    

    直白设置

    Laya.loader.load( "res/apes/monkey2.png" , Handler.create( this ,  function ()
    {
         var  texture = Laya.loader.getRes( "res/apes/monkey2.png" );
         var  sp =  new  Sprite();
         sp.graphics.drawTexture(texture,  0 ,  0 );
         sp.size(texture.width, texture.height);
         Laya.stage.addChild(sp);
    }));
    

    帧频 fps

    帧频有三种格局,
    Stage.FRAME_SLOW维持FPS在30;
    Stage.FRAME_FAST维持FPS在60;
    Stage.FRAME_MOUSE则选取性维持FPS在30或60帧。

    Laya.init(Browser.width, Browser.height);
    Stat.show();
    Laya.stage.frameRate = Stage.FRAME_SLOW;
    
    var  sp =  new  Sprite();
    sp.graphics.drawCircle( 0 ,  0 ,  20 ,  "#990000" );
    Laya.stage.addChild(sp);
    
    Laya.stage.on(Event.MOUSE_MOVE,  this ,  function (){
         sp.pos(Laya.stage.mouseX, Laya.stage.mouseY);
    });
    
    • 延期调用
    var rotation=0,
    scale=1,
    position=0;
    function setRotation(value)
    {
      rotation=value;
      Laya.timer.callLater(this, update);
    }
    function setScale(value)
    {
      scale = value;
      Laya.timer.callLater(this, update);
    }
    function setPosition(value)
    {
        position = value;
        Laya.timer.callLater(this, update);
    }
    function update()
    {
        console.log('rotation: ' + rotation + 'tscale: ' + scale + 'tposition: ' + position);
    }
    

    此外优化计谋

    1、收缩粒子的行使数据
    鉴于粒子归属矢量绘制,多量接受粒子对CPU压力大,在运动平台Canvas方式下,尽量不用粒子;
    WebGL格局下能够动用GPU运算,能缓和CPU压力,但也要尽量调节,降低使用量。

    2、Canvas情势尽量收缩旋转,缩放,阿尔法等属性的接收
    在Canvas格局下,尽量减弱旋转,缩放,阿尔法等质量的接受,这一个属性会对品质产生消耗。
    如要使用,提议在WebGL情势下采用;

    3、不要在Timer的循环里创立对象及复杂计算
    由于Timer的loop()frameLoop()措施里会穷追猛打的轮回推行,当创设对象及复杂总括时,会促成大批量的性能消耗出今后循环里,由此,尽恐怕不要在循环里创造对象及复杂总括。

    4、尽量少用autoSize与getBounds
    autoSize()getBounds()供给大量测算,对品质的影响非常的大,尽量少用。

    5、被try catch的函数推行会变得不得了慢
    花色中尽量减弱try catch的使用,被try catch的函数实行会变得十三分慢。

    本文由威尼斯手机平台登陆发布于威尼斯登录首页,转载请注明出处:同时可以手动调用reCache方法更新缓存,而HTML5性能优化前与优化后有着极大的差别

    关键词: