如何使用分層畫(huà)布來(lái)優(yōu)化HTML5渲染

上的用單一顏色填充的畫(huà)布元素。畫(huà)布的大小被設(shè)定為 1600 x 900 像素，并從 Chrome1 的任務(wù)管理器實(shí)用程序收集數(shù)據(jù)。表 1顯示了一個(gè)示例。

在 Google Chrome 的 Task Manager 中，您可以看到某個(gè)頁(yè)面所使用的內(nèi)存量（也稱為 RAM）。Chrome 也提供 GPU 內(nèi)存，或者是 GPU 正在使用的內(nèi)存。這是常見(jiàn)信息，如幾何形狀、紋理或計(jì)算機(jī)將您的畫(huà)布數(shù)據(jù)推送到屏幕可能需要的任何形式的緩存數(shù)據(jù)。內(nèi)存越低，放在計(jì)算機(jī)上的權(quán)重就會(huì)越少。雖然目前還沒(méi)有任何確切的數(shù)字作為依據(jù)，但應(yīng)始終對(duì)此進(jìn)行測(cè)試，確保您的程序不會(huì)超出極限，并使用了過(guò)多的內(nèi)存。如果使用了過(guò)多的內(nèi)存，瀏覽器或頁(yè)面就會(huì)因?yàn)槿狈?nèi)存資源而崩潰。GPU 處理是一個(gè)遠(yuǎn)大的編程追求，已超出本文的討論范圍。您可以從學(xué)習(xí) OpenGL 或查閱 Chrome 的文檔（請(qǐng)參閱參考資料）開(kāi)始。
表 1. 畫(huà)布層的內(nèi)存開(kāi)銷(xiāo)

在表 1中，隨著在頁(yè)面上引入和使用了更多的 HTML5 畫(huà)布元素，使用的內(nèi)存也越多。一般的內(nèi)存也存在線性相關(guān)，但每增加一層，內(nèi)存的增長(zhǎng)就會(huì)明顯減少。雖然這個(gè)測(cè)試并沒(méi)有詳細(xì)說(shuō)明這些層對(duì)性能帶來(lái)的影響，但它確實(shí)表明，畫(huà)布會(huì)嚴(yán)重影響 GPU 內(nèi)存。一定要記得在您的目標(biāo)平臺(tái)上執(zhí)行壓力測(cè)試，以確保平臺(tái)的限制不會(huì)導(dǎo)致您的應(yīng)用程序無(wú)法執(zhí)行。

當(dāng)選擇更改某個(gè)分層解決方案的單一畫(huà)布渲染周期時(shí)，需考慮有關(guān)內(nèi)存開(kāi)銷(xiāo)的性能增益。盡管存在內(nèi)存成本，但這項(xiàng)技術(shù)可以通過(guò)減小每一幀上修改的像素?cái)?shù)量來(lái)完成其工作。

下一節(jié)將說(shuō)明如何使用分層來(lái)組織一個(gè)場(chǎng)景。
對(duì)場(chǎng)景進(jìn)行分層：游戲

在本節(jié)中，我們將通過(guò)重構(gòu)一個(gè)滾動(dòng)平臺(tái)跑步風(fēng)格的游戲上的視差效果的單畫(huà)布實(shí)現(xiàn)，了解一個(gè)多層解決方案。圖 2顯示了游戲視圖的組成，其中包括云、小山、地面、背景和一些交互實(shí)體。
圖 2. 合成游戲視圖

在游戲中，云、小山、地面和背景都以不同的速度移動(dòng)。本質(zhì)上，背景中較遠(yuǎn)的元素移動(dòng)得比在前面的元素慢，因此形成了視差效果。為了讓情況變得更為復(fù)雜，背景的移動(dòng)速度會(huì)足夠慢，它每半秒鐘才重新渲染一次。

通常情況下，好的解決方案會(huì)將所有幀都清除并重新渲染屏幕，因?yàn)楸尘笆且粋€(gè)圖像并且在不斷變化。在本例中，由于背景每秒只需變化兩次，所以您不需要重新渲染每一幀。

目前，您已經(jīng)定義了工作區(qū)，所以可以決定場(chǎng)景的哪些部分應(yīng)該在同一個(gè)層上。組織好各個(gè)層之后，我們將探討用于分層的各種渲染策略。首先，需要考慮如何使用單個(gè)畫(huà)布來(lái)實(shí)現(xiàn)該解決方案，如清單 3所示。
清單 3. 單畫(huà)布渲染循環(huán)的偽代碼
 

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. /**   

2.  * Render call   

3.  *   

4.  * @param {CanvasRenderingContext2D} context Canvas context   

5.  */   

6. function renderLoop(context)   

7. {   

8.     context.clearRect(0, 0, width, height);   

9.     background.render(context);   

10.     ground.render(context);   

11.     hills.render(context);   

12.     cloud.render(context);   

13.     player.render(context);   

14. }  

像清單 3中的代碼一樣，該解決方案會(huì)有一個(gè)render函數(shù)，每個(gè)游戲循環(huán)調(diào)用或每個(gè)更新間隔都會(huì)調(diào)用它。在本例中，渲染是從主循環(huán)調(diào)用和更新每個(gè)元素的位置的更新調(diào)用中抽象出來(lái)。

遵循 “清除到渲染” 解決方案，render會(huì)調(diào)用清除上下文，并通過(guò)調(diào)用屏幕上的實(shí)體各自的render函數(shù)來(lái)跟蹤它。清單 3遵循一個(gè)程序化的路徑，將元素放置到畫(huà)布上。雖然該解決方案對(duì)于渲染屏幕上的實(shí)體是有效的，但它既沒(méi)有描述所使用的所有渲染方法，也不支持任何形式的渲染優(yōu)化。

為了更好地詳細(xì)說(shuō)明實(shí)體的渲染方法，需要使用兩種類型的實(shí)體對(duì)象。清單 4顯示了您將使用和細(xì)化的兩個(gè)實(shí)體。
清單 4. 可渲染的Entity偽代碼
 

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. var Entity = function() {   

2.     /**   

3.      Initialization and other methods   

4.      **/   

5.     

6.     /**   

7.       * Render call to draw the entity   

8.       *   

9.       * @param {CanvasRenderingContext2D} context   

10.       */   

11.     this.render = function(context) {   

12.         context.drawImage(this.image, this.x, this.y);   

13.     }   

14. };  

 

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. var PanningEntity = function() {   

2.     /**   

3.      Initialization and other methods   

4.      **/   

5.     

6.     /**   

7.       * Render call to draw the panned entity   

8.       *   

9.       * @param {CanvasRenderingContext2D} context   

10.      */   

11.     this.render = function(context) {   

12.         context.drawImage(   

13.             this.image,   

14.             this.x - this.width,   

15.             this.y - this.height);   

16.         context.drawImage(   

17.             this.image,   

18.             this.x,   

19.             this.y);   

20.         context.drawImage(   

21.             this.image,   

22.             this.x + this.width,   

23.             this.y + this.height);   

24.     }   

25. };  

清單 4中的對(duì)象存儲(chǔ)實(shí)體的圖像、x、y、寬度和高度的實(shí)例變量。這些對(duì)象遵循 JavaScript 語(yǔ)法，但為了簡(jiǎn)潔起見(jiàn)，僅提供了目標(biāo)對(duì)象的不完整的偽代碼。目前，渲染算法非常貪婪地在畫(huà)布上渲染出它們的圖像，完全不考慮游戲循環(huán)的其他任何要求。

為了提高性能，需要重點(diǎn)注意的是，panning渲染調(diào)用輸出了一個(gè)比所需圖像更大的圖像。本文忽略這個(gè)特定的優(yōu)化，但是，如果使用的空間比您的圖像提供的空間小，那么請(qǐng)確保只渲染必要的補(bǔ)丁。
確定分層

現(xiàn)在您知道如何使用單一畫(huà)布實(shí)現(xiàn)該示例，讓我們看看有什么辦法可以完善這種類型的場(chǎng)景，并加快渲染循環(huán)。要使用分層技術(shù)，則必須通過(guò)找出實(shí)體的渲染重疊，識(shí)別分層所需的 HTML5 畫(huà)布元素。
重繪區(qū)域

為了確定是否存在重疊，要考慮一些被稱為重繪區(qū)域的不可見(jiàn)區(qū)域。重繪區(qū)域是在繪制實(shí)體的圖像時(shí)需要畫(huà)布清除的區(qū)域。重繪區(qū)域?qū)τ阡秩痉治龊苤匾?，因?yàn)樗鼈兪鼓軌蛘业酵晟其秩緢?chǎng)景的優(yōu)化技術(shù)，如圖 3所示。
圖 3. 合成游戲視圖與重繪區(qū)域

為了可視化圖 3中的效果，在場(chǎng)景中的每個(gè)實(shí)體都有一個(gè)表示重繪區(qū)域的重疊，它跨越了視區(qū)寬度和實(shí)體的圖像高度。場(chǎng)景可分為三組：背景、前景和交互。場(chǎng)景中的重繪區(qū)域有一個(gè)彩色的重疊，以區(qū)分不同的區(qū)域：

•     背景 – 黑色
      云 – 紅色
      小山 – 綠色
      地面 – 藍(lán)色
      紅球 – 藍(lán)色
      黃色障礙物 – 藍(lán)色

對(duì)于除了球和障礙物以外的所有重疊，重繪區(qū)域都會(huì)橫跨視區(qū)寬度。這些實(shí)體的圖像幾乎填滿整個(gè)屏幕。由于它們的平移要求，它們將渲染整個(gè)視區(qū)寬度，如圖 4所示。預(yù)計(jì)球和障礙物會(huì)穿過(guò)該視區(qū)，并且可能擁有通過(guò)實(shí)體位置定義的各自的區(qū)域。如果您刪除渲染到場(chǎng)景的圖像，只留下重繪區(qū)域，就可以很容易地看到單獨(dú)的圖層。
圖 4. 重繪區(qū)域

初始層是顯而易見(jiàn)的，因?yàn)槟梢宰⒁獾交ハ嘀丿B的各個(gè)區(qū)域。由于球和障礙物區(qū)域覆蓋了小山和地面，所以可將這些實(shí)體分組為一層，該層被稱為交互層。根據(jù)游戲?qū)嶓w的渲染順序，交互層是頂層。

找到附加層的另一種方法是收集沒(méi)有重疊的所有區(qū)域。占據(jù)視區(qū)的紅色、綠色和藍(lán)色區(qū)域并沒(méi)有重疊，并且它們組成了第二層——前景。云和交互實(shí)體的區(qū)域沒(méi)有重疊，但因?yàn)榍蛴锌赡芴S到紅色區(qū)域，所以您應(yīng)該考慮將該實(shí)體作為一個(gè)單獨(dú)的層。

對(duì)于黑色區(qū)域，可以很容易地推斷出，背景實(shí)體將會(huì)組成最后一層。填充整個(gè)視區(qū)的任何區(qū)域（如背景實(shí)體）都應(yīng)視為填充整個(gè)層中的該區(qū)域，雖然這對(duì)本場(chǎng)景并不適用。在定義了我們的三個(gè)層次之后，我們就可以開(kāi)始將這層分配給畫(huà)布，如圖 5所示。
圖 5. 分層的游戲視圖

現(xiàn)在已經(jīng)為每個(gè)分組的實(shí)體定義了層，現(xiàn)在就可以開(kāi)始優(yōu)化畫(huà)布清除。此優(yōu)化的目標(biāo)是為了節(jié)省處理時(shí)間，可以通過(guò)減少每一步渲染的屏幕上的固定物數(shù)量來(lái)實(shí)現(xiàn)。需要重點(diǎn)注意的是，使用不同的策略可能會(huì)使圖像獲得更好的優(yōu)化。下一節(jié)將探討各種實(shí)體或?qū)拥膬?yōu)化方法。
渲染優(yōu)化

優(yōu)化實(shí)體是分層策略的核心。對(duì)實(shí)體進(jìn)行分層，使得渲染策略可以被采用。通常，優(yōu)化技術(shù)會(huì)試圖消除開(kāi)銷(xiāo)。正如表 1所述，由于引入了層，您已經(jīng)增加了內(nèi)存開(kāi)銷(xiāo)。這里討論的優(yōu)化技術(shù)將減少處理器為了加快游戲而必須執(zhí)行的大量工作。我們的目標(biāo)是尋找一種減少要渲染的空間量的方法，并盡可能多地刪除每一步中出現(xiàn)的渲染和清除調(diào)用。
單一實(shí)體清除

第一個(gè)優(yōu)化方法針對(duì)的是清除空間，通過(guò)只清除組成該實(shí)體的屏幕子集來(lái)加快處理。首先減少與區(qū)域的各實(shí)體周?chē)耐该飨袼刂丿B的重繪區(qū)域量。使用此技術(shù)的包括相對(duì)較小的實(shí)體，它們填充了視區(qū)的小區(qū)域。

第一個(gè)目標(biāo)是球和障礙物實(shí)體。單一實(shí)體清除技術(shù)涉及到在將實(shí)體渲染到新位置之前清除前一幀渲染該實(shí)體的位置。我們會(huì)引入一個(gè)清除步驟到每個(gè)實(shí)體的渲染，并存儲(chǔ)實(shí)體的圖像的邊界框。添加該步驟會(huì)修改實(shí)體對(duì)象，以包括清除步驟，如清單 5所示。
清單 5. 包含單框清除的實(shí)體
 

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. var Entity = function() {   

2.     /**   

3.      Initialization and other methods   

4.      **/   

5.     

6.     /**   

7.      * Render call to draw the entity   

8.      *   

9.      * @param {CanvasRenderingContext2D} context   

10.      */   

11.     this.render = function(context) {   

12.         context.clearRect(   

13.             this.prevX,   

14.             this.prevY,   

15.             this.width,   

16.             this.height);   

17.         context.drawImage(this.image, this.x, this.y);   

18.         thisthis.prevX = this.x;   

19.         thisthis.prevY = this.y;   

20.     }   

21. };     

render函數(shù)的更新引入了一個(gè)常規(guī)drawImage之前發(fā)生的clearRect調(diào)用。對(duì)于該步驟，對(duì)象需要存儲(chǔ)前一個(gè)位置。圖 6顯示了對(duì)象針對(duì)前一個(gè)位置所采取的步驟。
圖 6. 清除矩形

您可以為每個(gè)實(shí)體創(chuàng)建一個(gè)在更新步驟前被調(diào)用的clear方法，實(shí)現(xiàn)此渲染解決方案（但本文將不會(huì)使用clear方法）。您還可以將這個(gè)清除策略引入到PanningEntity，在地面和云實(shí)體上添加清除，如清單 6所示。
清單 6. 包含單框清除的PanningEntity
 

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. var PanningEntity = function() {   

2.     /**   

3.      Initialization and other methods   

4.      **/   

5.     

6.     /**   

7.      * Render call to draw the panned entity   

8.      *   

9.      * @param {CanvasRenderingContext2D} context   

10.      */   

11.     this.render = function(context) {   

12.         context.clearRect(   

13.             this.x,   

14.             this.y,   

15.             context.canvas.width,   

16.             this.height);   

17.         context.drawImage(   

18.             this.image,   

19.             this.x - this.width,   

20.             this.y - this.height);   

21.         context.drawImage(   

22.             this.image,   

23.             this.x,   

24.             this.y);   

25.         context.drawImage(   

26.             this.image,   

27.             this.x + this.width,   

28.             this.y + this.height);   

29.     }   

30. };  

因?yàn)镻anningEntity橫跨了整個(gè)視區(qū)，所以您可以使用畫(huà)布寬度作為清除矩形的大小。如果使用此清除策略，則會(huì)為您提供已為云、小山和地面實(shí)體定義的重繪區(qū)域。

為了進(jìn)一步優(yōu)化云實(shí)體，可以將云分離為單獨(dú)的實(shí)體，使用它們自己的重繪區(qū)域。這樣做會(huì)大幅減少在云重繪區(qū)域內(nèi)要清除的屏幕空間量。圖 7顯示了新的重繪區(qū)域。
圖 7. 具有單獨(dú)重繪區(qū)域的云

單一實(shí)體清除策略產(chǎn)生的解決方案可以解決像本例這樣的分層畫(huà)布游戲上的大多數(shù)問(wèn)題，但仍然可以對(duì)它進(jìn)行優(yōu)化。為了尋找針對(duì)該渲染策略的極端情況，我們假設(shè)球會(huì)與三角形碰撞。如果兩個(gè)實(shí)體碰撞，實(shí)體的重繪區(qū)域就有可能發(fā)生重疊，并創(chuàng)建一個(gè)不想要的渲染構(gòu)件。另一個(gè)清除優(yōu)化，更適合于可能會(huì)碰撞的實(shí)體，它也將有益于分層。
臟矩形清除

若沒(méi)有單一清除策略，臟矩形清除策略可以是一個(gè)功能強(qiáng)大的替代品。您可以對(duì)有重繪區(qū)域的大量實(shí)體使用這種清除策略，這種實(shí)體包括密集的粒子系統(tǒng)，或有小行星的空間游戲。

從概念上講，該算法會(huì)收集由算法管理的所有實(shí)體的重繪區(qū)域，并在一個(gè)清除調(diào)用中清除整個(gè)區(qū)域。為了增加優(yōu)化，此清除策略還會(huì)刪除每個(gè)獨(dú)立實(shí)體產(chǎn)生的重復(fù)清除調(diào)用，如清單 7所示。
清單 7.DirtyRectManager
 

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. var DirtyRectManager = function() {   

2.     // Set the left and top edge to the max possible   

3.     // (the canvas width) amd right and bottom to least-most   

4.     

5.     // Left and top will shrink as more entities are added   

6.     this.left   = canvas.width;   

7.     this.top    = canvas.height;   

8.     

9.     // Right and bottom will grow as more entities are added   

10.     this.right  = 0;   

11.     this.bottom = 0;   

12.     

13.     // Dirty check to avoid clearing if no entities were added   

14.     this.isDirty = false;   

15.     

16.     // Other Initialization Code   

17.     

18.     /**   

19.      * Other utility methods   

20.      */   

21.     

22.     /**   

23.      * Adds the dirty rect parameters and marks the area as dirty   

24.      *    

25.      * @param {number} x   

26.      * @param {number} y   

27.      * @param {number} width   

28.      * @param {number} height   

29.      */   

30.     this.addDirtyRect = function(x, y, width, height) {   

31.         // Calculate out the rectangle edges   

32.         var left   = x;   

33.         var right  = x + width;   

34.         var top    = y;   

35.         var bottom = y + height;   

36.     

37.         // Min of left and entity left   

38.         this.left   = left < this.left      left   : this.left;   

39.         // Max of right and entity right   

40.         this.right  = right > this.right    right  : this.right;   

41.         // Min of top and entity top   

42.         this.top    = top < this.top        top    : this.top;   

43.         // Max of bottom and entity bottom   

44.         this.bottom = bottom > this.bottom  bottom : this.bottom;   

45.     

46.         this.isDirty = true;   

47.     };   

48.     

49.     /**   

50.      * Clears the rectangle area if the manager is dirty   

51.      *   

52.      * @param {CanvasRenderingContext2D} context   

53.      */   

54.     this.clearRect = function(context) {   

55.         if (!this.isDirty) {   

56.             return;   

57.         }   

58.     

59.         // Clear the calculated rectangle   

60.         context.clearRect(   

61.             this.left,   

62.             this.top,   

63.             this.right - this.left,   

64.             this.bottom - this.top);   

65.     

66.         // Reset base values   

67.         this.left   = canvas.width;   

68.         this.top    = canvas.height;   

69.         this.right  = 0;   

70.         this.bottom = 0;   

71.         this.isDirty = false;   

72.     }   

73. };  

將臟矩形算法集成到渲染循環(huán)，這要求在進(jìn)行渲染調(diào)用之前調(diào)用清單 7中的管理器。將實(shí)體添加到管理器，使管理器可以在清除時(shí)計(jì)算清除矩形的維度。雖然管理器會(huì)產(chǎn)生預(yù)期的優(yōu)化，但根據(jù)游戲循環(huán)，管理器能夠針對(duì)游戲循環(huán)進(jìn)行優(yōu)化，如圖 8所示。
圖 8. 交互層的重繪區(qū)域

1.     幀 1 – 實(shí)體在碰撞，幾乎重疊。
       幀 2 – 實(shí)體重繪區(qū)域是重疊的。
       幀 3 – 重繪區(qū)域重疊，并被收集到一個(gè)臟矩形中。
       幀 4 – 臟矩形被清除。

圖 8顯示了由針對(duì)在交互層的實(shí)體的算法計(jì)算出的重繪區(qū)域。因?yàn)橛螒蛟谶@一層上包含交互，所以臟矩形策略足以解決交互和重疊的重繪區(qū)域問(wèn)題。
作為清除的重寫(xiě)

對(duì)于在恒定重繪區(qū)域中動(dòng)畫(huà)的完全不透明實(shí)體，可以使用重寫(xiě)作為一項(xiàng)優(yōu)化技術(shù)。將不透明的位圖渲染為一個(gè)區(qū)域（默認(rèn)的合成操作），這會(huì)將像素放在該區(qū)域中，不需要考慮該區(qū)域中的原始渲染。這個(gè)優(yōu)化消除了渲染調(diào)用之前所需的清除調(diào)用，因?yàn)殇秩緯?huì)覆蓋原來(lái)的區(qū)域。

通過(guò)在之前的渲染的上方重新渲染圖像，重寫(xiě)可以加快地面實(shí)體。也可以通過(guò)相同的方式加快最大的層，比如背景。

通過(guò)減少每一層的重繪區(qū)域，您已經(jīng)有效地為層和它們所包含的實(shí)體找到優(yōu)化策略。
結(jié)束語(yǔ)

對(duì)畫(huà)布進(jìn)行分層是一個(gè)可以應(yīng)用于所有交互式實(shí)時(shí)場(chǎng)景的優(yōu)化策略。如果想利用分層實(shí)現(xiàn)優(yōu)化，您需要通過(guò)分析場(chǎng)景的重繪區(qū)域來(lái)考慮場(chǎng)景如何重疊這些區(qū)域。一些場(chǎng)景是具有重疊的重繪區(qū)域的集合，可以定義層，因此它們是渲染分層畫(huà)布的良好候選。如果您需要粒子系統(tǒng)或大量物理對(duì)象碰撞在一起，對(duì)畫(huà)布進(jìn)行分層可能是一個(gè)很好的優(yōu)化選擇。

到此，相信大家對(duì)“如何使用分層畫(huà)布來(lái)優(yōu)化HTML5渲染”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文題目：如何使用分層畫(huà)布來(lái)優(yōu)化HTML5渲染
本文地址：http://m.jiaotiyi.com/article/jehoos.html