CocosCreator ScrollView優化系列之分幀加載
一、 前言
JS是單線程的,也就意味著所有任務需要排隊,隻有當前一個任務結束瞭,後一個任務才會執行。如果前一個任務耗時很長,後一個任務就不得不一直等著。
Cocos Creator 是采用 Java Script/Type Script語言開發,本質上是JS,同樣會擁有以上特征。特別地,如果使用不當,極有可能導致界面卡頓。
比如:在為一個ScrollView的Content創建500個節點的的時候,可能就會出現下面界面卡死的問題
PS:本來加載過程中有一個loading對話框,因為卡死瞭,就感覺從來沒出現
通過閱讀本文,你將瞭解到如何利用「分幀加載」技術解決上述問題,最終效果對比如下:
二、卡死問題分析
在正常情況下,我們為ScrollView創建一定數量的子節點的時候,代碼可能是這樣子的
public directLoad(length: number) { for (let i = 0; i < length; i++) { this._initItem(i); } } private _initItem(itemIndex: number) { let itemNode = cc.instantiate(this.itemPrefab); itemNode.width = this.scrollView.content.width / 10; itemNode.height = itemNode.width; itemNode.parent = this.scrollView.content; itemNode.setPosition(0, 0); }
一般而言,當length的值很小,比如10個的時候,程序跑起來的時候,看上去可能會沒什麼問題,但其實如果仔細一點觀察,就發現其實也是會卡死一會,隻是很快就結束瞭。
特別地,如果length的值到一點量級,比如50+個,那麼這段代碼就會出現上面截圖那樣子—— 卡死
歸根到底,問題在於通過 cc.instantiate
創建節點以及為這個節點 setParent
時,所需要的時間並沒有想象中那麼小,當然,也沒有想象中那麼大。但是當連續創建一定數量的時候,問題就會被放大,也就是說,這個創建節點的時間可能需要一段時間。
可視化一點去理解這個問題的話,恩,大概就是下圖這樣子
Direct Load
很明顯,按照上圖,第1到4幀都被完成占用瞭,導致這期間所有的其他邏輯都會不能執行(Loading對話框出不來,旋轉動畫卡死等等)。
那麼怎麼解決呢?
三、解決方案(理論篇)
可能有同學第一時間想到用Promise異步解決,但是在這個問題上,Promise隻是把紅色的這段連續創建節點的代碼放到後面一點的時間去執行,但是當紅色的代碼執行的時候,它依舊會卡死那段時間,所以Promise是不能應對這種場合的。
那麼應該怎麼解決呢?
其中,一種解決方案,就是我們今天要講的 「分幀加載」 ,怎麼理解「分幀加載」呢?
慣例,先上圖:
Framing Load
配合上圖,就比較好理解「分幀加載」瞭,具體執行過程為
- 先將耗時卡死的代碼拆分為很多小段
- 然後每一幀,分配一點時間去執行這些小段
- 這樣子一來,每一幀,我們就留瞭時間給其他邏輯去跑(那麼Loading對話框也可以出來瞭,旋轉動畫也可以繼續瞭)
OK,理論說清楚瞭,那麼實際怎麼弄呢?
比如:
- 怎麼拆分代碼為很多小段?
- 怎麼分配每一幀的一些時間去執行這些小段呢?
這個時候,我們需要用到 ES6(ES2015)的協程——Generator
,去幫助我們實現。
四、解決方案(代碼篇)
以我們第二節舉例用到的代碼(為ScrollView創建一定數量的子節點)為例子,我們將 實現代碼為多個小段 以及 分配每一幀的一些時間去執行這些小段 。
4.1 利用 Generator 將代碼拆分為多個小段
拆分前:
public directLoad(length: number) { for (let i = 0; i < length; i++) { this._initItem(i); } } private _initItem(itemIndex: number) { let itemNode = cc.instantiate(this.itemPrefab); itemNode.width = this.scrollView.content.width / 10; itemNode.height = itemNode.width; itemNode.parent = this.scrollView.content; itemNode.setPosition(0, 0); }
拆分後:
/** * (新增代碼)獲取生成子節點的Generator */ private *_getItemGenerator(length: number) { for (let i = 0; i < length; i++) { yield this._initItem(i); } } /** * (和拆分前的代碼一致) */ private _initItem(itemIndex: number) { let itemNode = cc.instantiate(this.itemPrefab); itemNode.width = this.scrollView.content.width / 10; itemNode.height = itemNode.width; itemNode.parent = this.scrollView.content; itemNode.setPosition(0, 0); }
這裡的原理就是 利用 Generator 將一次 for 循環裡創建所有節點,改為拆分 for 循環的每一步為一個小段
當然,這份「拆分後」的代碼並不能跑起來,因為它隻是實現瞭拆分步驟,要讓它跑起來,我們要上下面的第二段代碼
4.2 分配每一幀的一些時間去執行
在看一次我們剛才的圖
Framing Load
配合圖,得出的代碼
/** * 實現分幀加載 */ async framingLoad(length: number) { await this.executePreFrame(this._getItemGenerator(length), 1); } /** * 分幀執行 Generator 邏輯 * * @param generator 生成器 * @param duration 持續時間(ms) * 每次執行 Generator 的操作時,最長可持續執行時長。 * 假設值為8ms,那麼表示1幀(總共16ms)下,分出8ms時間給此邏輯執行 */ private executePreFrame(generator: Generator, duration: number) { return new Promise((resolve, reject) => { let gen = generator; // 創建執行函數 let execute = () => { // 執行之前,先記錄開始時間戳 let startTime = new Date().getTime(); // 然後一直從 Generator 中獲取已經拆分好的代碼段出來執行 for (let iter = gen.next(); ; iter = gen.next()) { // 判斷是否已經執行完所有 Generator 的小代碼段 // 如果是的話,那麼就表示任務完成 if (iter == null || iter.done) { resolve(); return; } // 每執行完一段小代碼段,都檢查一下是否 // 已經超過我們分配給本幀,這些小代碼端的最大可執行時間 if (new Date().getTime() - startTime > duration) { // 如果超過瞭,那麼本幀就不在執行,開定時器,讓下一幀再執行 this.scheduleOnce(() => { execute(); }); return; } } }; // 運行執行函數 execute(); }); }
代碼中已經附有大量註釋,但還是有幾個點需要說明一下:
- 為瞭方便知道這些小任務是否已經都執行完瞭,我采用瞭Promise,當都完成瞭的時候,
resolve
一下 - 每一個小代碼段的執行時間可能不固定的,可能會超出占用我們的一些期望時間。比如我們期望每一幀分配1ms 去執行這些小代碼段,假設前3段小代碼段,每一段的執行時間假設為 0.2ms,0.5ms, 0.4ms,那麼在我給出的這段代碼中,是會執行完這3段小代碼段,然後就終止本幀繼續執行這些小代碼段,因為這裡的耗時已經是 1.1ms,比我設定的 1ms 已經多出瞭 0.1ms 。當然你可以自行改動代碼,讓這些執行嚴格按照最大1ms去執行,以實現不超時執行(即不再執行第3個小段)
至此,我們一定程度上已經實現瞭「分幀加載」瞭~
本項目中所有圖示、代碼都在Github倉庫中,如果需要運行驗證,可直接拉下項目即可,不用自己手擼代碼驗證
👉👉https://github.com/zhitaocai/CocosCreator-ScrollVIewPlus👈👈
五、總結
- 盡管我們標題是 「ScrollView 優化系列」,但我更加傾向於,「利用分幀加載去優化ScrollView」。在這篇文章上,我們舉的例子是創建節點,但是我刻意不說「分幀創建」,這是因為我認為
「分幀加載」
是一種性能優化方案 ,可以「分幀創建」、「分幀運行」、「分幀計算」、「分幀渲染」等。 - 在實現分幀上,我們用到瞭
this.scheduleOnce
函數,但是其實可以嘗試在update(dt:number)
上執行,不妨嘗試修改我的 「測試項目」去驗證呢~ - TypeScript 要用上 Generator 還需要需改一下Cocos項目中的
tsconfig.json
:compilerOptions.lib
數組中添加es2015
以上就是CocosCreator ScrollView優化系列之分幀加載的詳細內容,更多關於CocosCreator ScrollView優化分幀加載的資料,請關註WalkonNet其它相關文章!
推薦閱讀:
- None Found