CocosCreator客戶端優化系列(一):加載優化(下)


原文連接:https://blog.csdn.net/zzx023/article/details/85318028

 

-Prefab加載優化


Prefab這塊的加載優化主要集中在兩個地方:一個是load加載耗時優化,另一個是實例化耗時優化

首先先說一下prefab在使用時的步驟:

 

 

 

了解了Prefab使用時做了哪些事情,我們也才好針對性的做優化。

 

來說一下常用的優化手段:

 

-合理拆分Prefab


越大的prefab文件在加載過程中的耗時是越長的,而且通常不是等比,而是以類似平方曲線這樣的去增加時長的。

例如讀取一個100kb的文件,可能耗時也就10毫秒,但對於一個1M或者是2M的文件,我們在加載時就不是100毫秒,可能就是幾百毫秒。

 

 

 

類似這樣七八百kb的prefab文件,我們就要去思考一下,是不是里面的節點都必須做成一個prefab?

是否可以拆分成2個以上的prefab,通過拼接的方式組合?

一個prefab我們可以將它看作為一個功能模塊,而功能模塊並不是越大越好,而是功能職責越單一越好,遵循這個原則,我們可以對prefab做更好的拆分。

 

-延遲加載資源

 

 

 


在creator的資源管理器中點擊編輯好的prefab資源,在屬性檢查器中我們可以看到延遲加載資源的選項。勾選這個選項可以減少prefab的加載耗時,但首次顯示的耗時會增加。

這時由於勾選后,prefab所引用的資源,像圖片、音效這些,不會在load時加載,而是會在prefab第一次顯示的時候再進行資源的加載。

因此需要根據具體的使用環境進行選擇。

 

-選擇優化策略

 

 


在prefab的屬性檢查器中,我們可以看到優化策略這個選項。這個也需要我們根據實際的使用情況進行選擇。

當我們選擇“優化多次創建性能”這個選項時,Prefab加載后會進行一個預處理的操作,這個預處理其實就是動態生成一些prefab的實例化代碼,並把這些代碼交給jit去進行優化。

這樣在實例化時的耗時將會大大減少,相應的,在load時的耗時會有所增加。

當我們選擇“優化單詞創建性能”這個選項時,prefab加載后會跳過預處理的步驟,這樣在加載時的耗時會減少很多,但實例化時的耗時會增加。例如一些固定UI界面,由於方便加載場景或者時進行功能划分,通常會做成prefab,這種prefab只會加載一次的,就可以選擇這個選項,提升加載的性能。

 

需要注意的有一點:由於微信小游戲平台禁用了動態加載代碼,類似eval這些不能使用,因此優化策略這個選項在微信小游戲平台是無效的。

 

 

-場景加載優化


場景加載的常用優化方案:

 

合理使用預置體構成場景,分批異步進行加載
使用prefab來組成場景,這時最常用並且有效的手段。比如一些場景中的一些二級界面,沒必要提前放置在場景中,可以通過動態加載的方式,等使用時再加載進來。

整個場景可以保留一些重要節點,比如背景圖+主界面按鈕。其他的一些資源都可以通過進入場景后再進行異步加載。

可以有效的減少用戶等待的時間,同時避免一次性加載一些不必要的資源進來。

 

使用加載界面優化用戶體驗
通常對於一個復雜場景,加載需要一定耗時的,一定要通過一個加載界面去優化用戶的體驗,這個也是常用做法了。這里就不細說了

 

使用延遲加載資源

 

 


場景資源可以勾選延遲加載資源選項,該選項會在需要顯示資源的時候,才會去加載這個資源。大部分情況下可以勾選上,減少加載時間,避免加載時加載大量暫時用不到的資源。

 

 

資源批量加載優化


在實際項目中我們經常會遇到一些需要大量生成節點或者prefab的情況,例如子彈、怪物等等。

在生成時,如果不進行優化,很容易造成瞬間的內存飆升,從而帶來游戲感受上的卡頓。

通常我們可能會使用這樣的代碼:
 

  for (let i = 0; i < 200; i++) {

            var node = new cc.instantiate(this.prefab);

            node.parent = this.layout;

        }

 


當需要批量生成的數量不多時,不會對我們的效果有太大的影響,但當數量到一定程度,例如批量生成200個時,卡頓帶給用戶的體驗會很糟糕。

參考demo工程中的loadScene場景。我們可以看到卡頓時,一幀的耗時達到了180+ms。

demo下載地址:https://pan.baidu.com/s/1L1x3MRZ9q3b0l_m2lWN5ng 提取碼: qafm 

 

 

 

 

對於這種情況我的建議是,不要在同一幀中做大量的實例化操作,避免內存的突然飆升。

實際的解決辦法有很多,比如使用schedule,setTimeOut等等。這里給大家推薦一個比較好的方法:

借用第三方庫async。

        

async.eachLimit(array,  5,  (index,cb)  =>  {

    var node = new cc.instantiate(this.prefab);

    node.parent = this.layout;

    setTimeout(cb,  0);

});

 


使用的代碼很簡單,async的eachLimit方法可以幫助我們限制每一幀實例化的數量,同時在表現效果上面與其他方法相同,同時表現更流暢,無卡頓,代碼也相對比較干凈。

 

在項目中使用async很簡單。

在項目目錄下打開命令行工具

執行npm init,生成package.json

npm init

 

 


然后執行npm install async --save

npm install async --save

 

 


這樣就安裝好async模塊了。

 

接下來在項目中通過require,即可使用async庫

var async = require("async");

  




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM