文共3663字，預計學習時長11分鐘

表單驗證是使用HTML5時的一個內置特性，HTML5提供了各種驗證屬性。作為瀏覽器端HTML和JavaScript的一部分。在將數據發送到服務器之前，我們可以使用它來驗證表單輸入。但是，我們應該信任發送的內容，所以最終驗證應該仍然在服務器上進行。

當表單輸入有效時，要素將顯示:valid 偽類樣式表。如果它是無效的，那么則出現:invalid 偽類樣式表。

當表單輸入無效時，瀏覽器將阻止表單提交并顯示錯誤信息。

表單驗證屬性

Pattern

Pattern應用于文本、檢索、鏈接、電話、郵件和密碼形式的輸入元素。

·它將正則表達式設置為數值，然后瀏覽器對其進行驗證。

Min

該屬性適用于范圍、數字、日期、月、周、時間、本地時間等類型的輸入元素。

·當輸入范圍或數字時，它會檢驗該值是否大于或等于Min屬性的給定值。

·當輸入日期、月份或星期時，它會檢驗日期是否為該屬性給定日期或在給定日期之后。

·當輸入時間時，它會檢驗日期和時刻是否都大于或等于該屬性給定時期。

Max

Max屬性是min屬性的對立面，它檢查輸入的內容是否小于或等于該屬性的給定值。

·當應用于范圍或數字類型的輸入時，它將檢查輸入的數字是否小于或等于min屬性的給定值

·當應用于日期、月份或星期等類型的元素時，它將檢查日期是否小于或等于該屬性值中給定的日期。

·當應用于時間類型輸入時，它將檢查日期和時間是否小于或等于min屬性的給定值。

Required

該屬性驗證輸入元素是否為空。

·它可以用于文本、檢索、鏈接、電話、郵件、密碼、日期、時間、月份、星期、數字、復選框、錄音、文檔，以及被選中內容和文本框等元素。

Step

Step檢驗輸入值是否為整數。

·若輸入日期類型的元素，它會檢查天數是否為整數。

·若輸入月份類型的元素，它會檢查月份數是否為整數。

·若輸入星期類型的元素，它會檢查星期數是否為整數。

·若輸入時間類型的元素，它會檢查秒數是否為整數。

·若輸入范圍和數字類型的元素，它會檢查范圍和數值是否為整數。

Minlength

Minlength屬性可應用于文本、檢索、鏈接、電話、電子郵、密碼和文本框類型的輸入元素。

·它檢查用戶輸入文本字數是否大于或等于該屬性值。

Maxlength

Maxlength屬性同樣可應用于文本、檢索、鏈接、電話、電子郵、密碼和文本框類型的輸入元素。

·它檢查用戶輸入文本字數是否小于或等于該屬性值。

應用表單驗證屬性

我們可以通過將表單驗證屬性添加到元素中來使用它們。例如，編寫一份以電子郵件地址作為輸入的表單。

第一步，輸入以下HTML語言：

<formid='form'>

  <labelfor="email">What's  your email address?</label>

  <inputid="email" name="email" requiredpattern="[^@]+@[^\.]+\..+">

  <buttontype='submit'>Submit</button>

</form>

在上述代碼中，輸入元素帶有required屬性，根據設定進行輸入。

同時，我們還以電子郵件地址的正則表達式作為值，對其添加pattern屬性。

接著如下所示，當輸入有效或無效時，我們通過添加樣式表來改變輸入元素的邊界：

input:invalid {

  border: 1px solid red

}

input:vvalid {

  border: 1px solid black

}

來源：view rawinput.css 平臺： GitHub

此處會用到文章開頭提及的偽類樣式來完成這一步驟。

最后，通過調用preventDefault來添加JavaScript代碼以防止本例中的表單提交。

constform=document.querySelector('#form');

form.onsubmit=(e)=> {

 e.preventDefault();

}

再舉一個檢查輸入的長度和范圍的例子。比如，編寫如下 HTML代碼來獲取用戶的姓名和年齡：

<formid='form'>

  <labelfor="name">What's  your name?</label>

  <inputid="name" name="name" requiredminlength='5' maxlength='20'>

  <br>

  <spanid='name-too-short' hidden>Name is  too short</span>

  <spanid='name-too-long' hidden>Name is  too long</span>

  <br>

  <labelfor="age">What's  your age?</label>

  <inputid="age" name="age" type='number' requiredmin='0' max='150'>

  <br>

  <spanid='age-too-high' hidden>Age is too  high</span>

  <spanid='age-too-low' hidden>Age is too  low</span>

  <br>

  <buttontype='submit'>Submit</button>

</form>

輸入的姓名和年齡都具有長度和范圍屬性，當輸入無效時，可以看到以文中所示形式出現的輸入信息。

與例一相同，當輸入元素有效或無效時，輸入樣式表來更改輸入框邊界：

input:invalid {

  border: 1px solid red

}

input:vvalid {

 border: 1px solid black

}

最后，當輸入無效時可以通過JavaScript看到驗證信息：

const form = document.querySelector('#form');

const name = document.querySelector('#name');

const age = document.querySelector('#age');

const nameTooShort = document.querySelector('#name-too-short');

const nameTooLong = document.querySelector('#name-too-long');

const ageTooLow = document.querySelector('#age-too-low');

const ageTooHigh = document.querySelector('#age-too-high');

form.onsubmit= (e) => {

  e.preventDefault();

}

name.oninput= (e) => {

  nameTooShort.hidden=true;

  nameTooLong.hidden=true;

  if (e.srcElement.validity.tooShort) {

    nameTooShort.hidden=false;

  }

if (e.srcElement.validity.tooLong) {

    nameTooLong.hidden=false;

  }

}

age.oninput= (e) => {

  ageTooLow.hidden=true;

  ageTooHigh.hidden=true;

  if (e.srcElement.validity.rangeOverflow) {

    ageTooHigh.hidden=false;

  }

if (e.srcElement.validity.rangeUnderflow) {

    ageTooLow.hidden=false;

  }

}

在上述代碼中，將oninput事件處理程序設置為事件處理程序函數，以便檢查后續輸入的有效性。

在每個函數中，我先隱藏所有信息，這樣就不會看到過時的消息了。然后，根據設置的最小和最大長度來檢查名稱輸入是否太短或太長。

若出現任何錯誤，會在HTML中取消隱藏相應的信息。

同樣，我們根據長度的最大最小設定值來檢驗年齡輸入值是否在所屬區間內。若出現錯誤，我們會在HTML中取消隱藏相應的信息。

通過HTML5和JavaScript，不需要任何函數庫就可以檢驗各種類型輸入值的有效性。

我們可以檢驗長度、范圍、任何帶有正則表達式的模式等輸入元素，但在保存之前應當檢查服務器端，因為部分用戶仍可以破解瀏覽器端應用程序來跳過驗證。

留言點贊關注

我們一起分享AI學習與發展的干貨

如轉載，請后臺留言，遵守轉載規范

TML5作為新興領域越來越熱。然而在移動設備硬件性能弱于PC的背景下，對性能的需求顯得更為重要，而HTML5性能優化前與優化后有著極大的差別，如何優化才能提高性能，對此熟知的人很少。本文以LayaAir引擎為例，通過代碼示例詳細闡述如何利用引擎對HTML5作出性能的極致優化。

主題包括：

代碼執行基本原理

基準測試

內存優化

圖形渲染性能

減少CPU使用量

其他優化策略

第1節：代碼執行基本原理

LayaAir引擎支持AS3、TypeScript、JavaScript三種語言開發，然而無論是采用哪種開發語言，最終執行的都是JavaScript代碼。所有看到的畫面都是通過引擎繪制出來的，更新頻率取決于開發者指定的FPS，例如指定幀頻率為60FPS，則運行時每個幀的執行時間為六十分之一秒，所以幀速越高，視覺上感覺越流暢，60幀是滿幀。

由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通過優化，在低端設備或低性能瀏覽器中，提升FPS幀速。

LayaAir引擎在每幀都會重繪，在性能優化時，除了關注每幀執行邏輯代碼帶來的CPU消耗，還需要注意每幀調用繪圖指令的數量以及GPU的紋理提交次數。

第2節：基準測試

LayaAir引擎內置的性能統計工具可用于基準測試，實時檢測當前性能。開發者可以使用laya.utils.Stat類，通過Stat.show 顯示統計面板。具體編寫代碼如下例所示：

Stat.show(0,0);     //AS3的面板調用寫法       
Laya.Stat.show(0,0);     //TS與JS的面板調用寫法

Canvas渲染的統計信息：

WebGL渲染的統計信息：

統計參數的意義：

FPS：

每秒呈現的幀數(數字越高越好)。

使用canvas渲染時，描述字段顯示為FPS(Canvas)，使用WebGL渲染時，描述字段顯示為FPS(WebGL)。

Sprite：

渲染節點數量（數字越低越好）。

Sprite統計所有渲染節點（包括容器），這個數字的大小會影響引擎節點遍歷，數據組織和渲染的次數。

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這三個參數，然后針對性地進行優化。（參見“圖形渲染性能”）

第3節：內存優化

對象池

對象池，涉及到不斷重復使用對象。在初始化應用程序期間創建一定數量的對象并將其存儲在一個池中。對一個對象完成操作后，將該對象放回到池中，在需要新對象時可以對其進行檢索。

由于實例化對象成本很高，使用對象池重用對象可減少實例化對象的需求。還可以減少垃圾回收器運行的機會，從而提高程序的運行速度。

以下代碼演示使用

Laya.utils.Pool：

var 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返回的處理器處理progress事件。此時的回調執行一次之后就被對象池回收，于是progress事件只觸發了一次，此時需要將四個名為once的參數設置為false：

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

釋放內存

JavaScript運行時無法啟動垃圾回收器。要確保一個對象能夠被回收，請刪除對該對象的所有引用。Sprite提供的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）應用于顯示對象時，運行時將在內存中創建兩張位圖。其中每個位圖的大小與顯示對象相同。將第一個位圖創建為顯示對象的柵格化版本，然后用于生成應用濾鏡的另一個位圖：

應用濾鏡時內存中的兩個位圖

當修改濾鏡的某個屬性或者顯示對象時，內存中的兩個位圖都將更新以創建生成的位圖，這兩個位圖可能會占用大量內存。此外，此過程涉及CPU計算，動態更新時將會降低性能（參見“圖形渲染性能 – 關于cacheAs）。

ColorFiter在Canvas渲染下需要計算每個像素點，而在WebGL下的GPU消耗可以忽略不計。

最佳的做法是，盡可能使用圖像創作工具創建的位圖來模擬濾鏡。避免在運行時中創建動態位圖，可以幫助減少CPU或GPU負載。特別是一張應用了濾鏡并且不會在修改的圖像。

第4節：圖形渲染性能

優化Sprite

1.盡量減少不必要的層次嵌套，減少Sprite數量。

2.非可見區域的對象盡量從顯示列表移除或者設置visible=false。

3.對于容器內有大量靜態內容或者不經常變化的內容（比如按鈕），可以對整個容器設置cacheAs屬性，能大量減少Sprite的數量，顯著提高性能。如果有動態內容，最好和靜態內容分開，以便只緩存靜態內容。

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上下。

當我們對文字所在的容器設置為cacheAs之后，如下面的例子所示，性能獲得較大的提升，FPS達到到了60幀。

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

文字描邊

在運行時，設置了描邊的文本比沒有描邊的文本多調用一次繪圖指令。此時，文本對CPU的使用量和文本的數量成正比。因此，盡量使用替代方案來完成同樣的需求。

對于幾乎不變動的文本內容，可以使用cacheAs降低性能消耗，參見“圖形渲染性能 - 關于cacheAs”。

對于內容經常變動，但是使用的字符數量較少的文本域，可以選擇使用位圖字體。

跳過文本排版，直接渲染

大多數情況下，很多文本都不需要復雜的排版，僅僅簡單地顯示一行字。為了迎合這一需求，Text提供的名為changeText的方法可以直接跳過排版。

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

Text.changeText會直接修改繪圖指令中該文本繪制的最后一條指令，這種前面的繪圖指令依舊存在的行為會導致changeText只使用于以下情況：

文本始終只有一行。 文本的樣式始終不變（顏色、粗細、斜體、對齊等等）。

即使如此，實際編程中依舊會經常使用到這樣的需要。

第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可以滿足多數多數需求，但由于其需要計算邊界，不適合頻繁調用。

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);
});

此時FPS顯示30，并且在鼠標移動時，可以感覺到圓球位置的更新不連貫。設置Stage.frameRate為Stage.FRAME_MOUSE：

Laya.stage.frameRate=Stage.FRAME_MOUSE;

此時在鼠標移動后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只會調用一次，并且是我們想要的結果。

圖片/圖集加載

在完成圖片/圖集的加載之后，引擎就會開始處理圖片資源。如果加載的是一張圖集，會處理每張子圖片。如果一次性處理大量的圖片，這個過程可能會造成長時間的卡頓。

在游戲的資源加載中，可以將資源按照關卡、場景等分類加載。在同一時間處理的圖片越好，當時的游戲響應速度也會更快。在資源使用完成后，也可以予以卸載，釋放內存。

第6節：其他優化策略

1.減少粒子使用數量，在移動平臺Canvas模式下，盡量不用粒子；

2.在Canvas模式下，盡量減少旋轉，縮放，alpha等屬性的使用，這些屬性會對性能產生消耗。（在WebGL模式可以使用）；

3.不要在timeloop里面創建對象及復雜計算；

4.盡量減少對容器的autoSize的使用，減少getBounds的使用，因為這些調用會產生較多計算；

5.盡量少用try catch的使用，被try catch的函數執行會變得非常慢；