DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 淺談利用緩存來優化HTML5 Canvas程序的性能
淺談利用緩存來優化HTML5 Canvas程序的性能
編輯：HTML5詳解     
這篇文章主要介紹了淺談利用緩存來優化Html5 Canvas程序的性能,並且作者給出了使用緩存以及離屏Canvas後性能較原程序的提升對比,需要的朋友可以參考下

canvas玩多了後，就會自動的要開始考慮性能問題了。怎麼優化canvas的動畫呢？

　　【使用緩存】

　　使用緩存也就是用離屏canvas進行預渲染了，原理很簡單，就是先繪制到一個離屏canvas中，然後再通過drawImage把離屏canvas畫到主canvas中。可能看到這很多人就會誤解，這不是寫游戲裡面用的很多的雙緩沖機制麼？

　　其實不然，雙緩沖機制是游戲編程中為了防止畫面閃爍，因此會有一個顯示在用戶面前的畫布以及一個後台畫布，進行繪制時會先將畫面內容繪制到後台畫布中，再將後台畫布裡的數據繪制到前台畫布中。這就是雙緩沖，但是canvas中是沒有雙緩沖的，因為現代浏覽器基本上都是內置了雙緩沖機制。所以，使用離屏canvas並不是雙緩沖，而是把離屏canvas當成一個緩存區。把需要重復繪制的畫面數據進行緩存起來，減少調用canvas的API的消耗。

　　眾所周知，調用canvas的API很消耗性能，所以，當我們要繪制一些重復的畫面數據時，妥善利用離屏canvas對性能方面有很大的提升，可以看下下面的DEMO

　　1 、 沒使用緩存   

　　2、  使用了緩存但是沒有設置離屏canvas的寬高  

      3 、 使用了緩存但是沒有設置離屏canvas的寬高  

　　4 、 使用了緩存且設置了離屏canvas的寬高

　　可以看到上面的DEMO的性能不一樣，下面分析一下原因：為了實現每個圈的樣式，所以繪制圈圈時我用了循環繪制，如果沒用啟用緩存，當頁面的圈圈數量達到一定時，動畫每一幀就要大量調用canvas的API，要進行大量的計算，這樣再好的浏覽器也會被拖垮啦。
XML/Html Code復制內容到剪貼板

  1. ctx.save();   
  2.                         var j=0;   
  3.                         ctx.lineWidth = borderWidth;   
  4.                         for(var i=1;i<this.r;i+=borderWidth){   
  5.                             ctx.beginPath();   
  6.                             ctx.strokeStyle = this.color[j];   
  7.                             ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
  8.                             ctx.stroke();   
  9.                             j++;   
  10.                         }   
  11.                         ctx.restore();  

　　所以，我的方法很簡單，每個圈圈對象裡面給他一個離屏canvas作緩存區。

　　除了創建離屏canvas作為緩存之外，下面的代碼中有一點很關鍵，就是要設置離屏canvas的寬度和高度，canvas生成後的默認大小是300X150；對於我的代碼中每個緩存起來圈圈對象半徑最大也就不超過80，所以300X150的大小明顯會造成很多空白區域，會造成資源浪費，所以就要設置一下離屏canvas的寬度和高度，讓它跟緩存起來的元素大小一致，這樣也有利於提高動畫性能。上面的四個demo很明顯的顯示出了性能差距，如果沒有設置寬高，當頁面超過400個圈圈對象時就會卡的不行了，而設置了寬高1000個圈圈對象也不覺得卡。

XML/Html Code復制內容到剪貼板
  1. var ball = function(x , y , vx , vy , useCache){   
  2.                 this.x = x;   
  3.                 this.y = y;   
  4.                 this.vx = vx;   
  5.                 this.vy = vy;   
  6.                 this.r = getZ(getRandom(20,40));   
  7.                 this.color = [];   
  8.                 this.cacheCanvas = document.createElement("canvas");   
  9.                 thisthis.cacheCtx = this.cacheCanvas.getContext("2d");   
  10.                 this.cacheCanvas.width = 2*this.r;   
  11.                 this.cacheCanvas.height = 2*this.r;   
  12.                 var num = getZ(this.r/borderWidth);   
  13.                 for(var j=0;j<num;j++){   
  14.                     this.color.push("rgba("+getZ(getRandom(0,255))+","+getZ(getRandom(0,255))+","+getZ(getRandom(0,255))+",1)");   
  15.                 }   
  16.                 this.useCache = useCache;   
  17.                 if(useCache){   
  18.                     this.cache();   
  19.                 }   
  20.             }  

 

當我實例化圈圈對象時，直接調用緩存方法，把復雜的圈圈直接畫到圈圈對象的離屏canvas中保存起來。

XML/Html Code復制內容到剪貼板
  1. cache:function(){   
  2.                     this.cacheCtx.save();   
  3.                     var j=0;   
  4.                     this.cacheCtx.lineWidth = borderWidth;   
  5.                     for(var i=1;i<this.r;i+=borderWidth){   
  6.                         this.cacheCtx.beginPath();   
  7.                         thisthis.cacheCtx.strokeStyle = this.color[j];   
  8.                         this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);   
  9.                         this.cacheCtx.stroke();   
  10.                         j++;   
  11.                     }   
  12.                     this.cacheCtx.restore();   
  13.                 }  

然後在接下來的動畫中，我只需要把圈圈對象的離屏canvas畫到主canvas中，這樣，每一幀調用的canvasAPI就只有這麼一句話：

XML/Html Code復制內容到剪貼板
  1. ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);  

跟之前的for循環繪制比起來，實在是快太多了。所以當需要重復繪制矢量圖的時候或者繪制多個圖片的時候，我們都可以合理利用離屏canvas來預先把畫面數據緩存起來，在接下來的每一幀中就能減少很多沒必要的消耗性能的操作。

下面貼出1000個圈圈對象流暢版代碼：
　　

XML/Html Code復制內容到剪貼板
  1. <!doctype Html>  
  2. <Html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <style>  
  6.         body{   
  7.             padding:0;   
  8.             margin:0;   
  9.             overflow: hidden;   
  10.         }   
  11.         #cas{   
  12.             display: block;   
  13.             background-color:rgba(0,0,0,0);   
  14.             margin:auto;   
  15.             border:1px solid;   
  16.         }   
  17.     </style>  
  18.     <title>測試</title>  
  19. </head>  
  20. <body>  
  21.     <div >  
  22.         <canvas id='cas' width="800" height="600">浏覽器不支持canvas</canvas>  
  23.         <div style="text-align:center">1000個圈圈對象也不卡</div>  
  24.     </div>  
  25.   
  26.     <script>  
  27.         var testBox = function(){   
  28.             var canvas = document.getElementById("cas"),   
  29.                 ctx = canvas.getContext('2d'),   
  30.                 borderWidth = 2,   
  31.                 Balls = [];   
  32.             var ball = function(x , y , vx , vy , useCache){   
  33.                 this.x = x;   
  34.                 this.y = y;   
  35.                 this.vx = vx;   
  36.                 this.vy = vy;   
  37.                 this.r = getZ(getRandom(20,40));   
  38.                 this.color = [];   
  39.                 this.cacheCanvas = document.createElement("canvas");   
  40.                 thisthis.cacheCtx = this.cacheCanvas.getContext("2d");   
  41.                 this.cacheCanvas.width = 2*this.r;   
  42.                 this.cacheCanvas.height = 2*this.r;   
  43.                 var num = getZ(this.r/borderWidth);   
  44.                 for(var j=0;j<num;j++){   
  45.                     this.color.push("rgba("+getZ(getRandom(0,255))+","+getZ(getRandom(0,255))+","+getZ(getRandom(0,255))+",1)");   
  46.                 }   
  47.                 this.useCache = useCache;   
  48.                 if(useCache){   
  49.                     this.cache();   
  50.                 }   
  51.             }   
  52.   
  53.             function getZ(num){   
  54.                 var rounded;   
  55.                 rounded = (0.5 + num) | 0;   
  56.                 // A double bitwise not.   
  57.                 rounded = ~~ (0.5 + num);   
  58.                 // Finally, a left bitwise shift.   
  59.                 rounded = (0.5 + num) << 0;   
  60.   
  61.                 return rounded;   
  62.             }   
  63.   
  64.             ball.prototype = {   
  65.                 paint:function(ctx){   
  66.                     if(!this.useCache){   
  67.                         ctx.save();   
  68.                         var j=0;   
  69.                         ctx.lineWidth = borderWidth;   
  70.                         for(var i=1;i<this.r;i+=borderWidth){   
  71.                             ctx.beginPath();   
  72.                             ctx.strokeStyle = this.color[j];   
  73.                             ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);   
  74.                             ctx.stroke();   
  75.                             j++;   
  76.                         }   
  77.                         ctx.restore();   
  78.                     } else{   
  79.                         ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);   
  80.                     }   
  81.                 },   
  82.   
  83.                 cache:function(){   
  84.                     this.cacheCtx.save();   
  85.                     var j=0;   
  86.                     this.cacheCtx.lineWidth = borderWidth;   
  87.                     for(var i=1;i<this.r;i+=borderWidth){   
  88.                         this.cacheCtx.beginPath();   
  89.                         thisthis.cacheCtx.strokeStyle = this.color[j];   
  90.                         this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);   
  91.                         this.cacheCtx.stroke();   
  92.                         j++;   
  93.                     }   
  94.                     this.cacheCtx.restore();   
  95.                 },   
  96.   
  97.                 move:function(){   
  98.                     this.x += this.vx;   
  99.                     this.y += this.vy;   
  100.                     if(this.x>(canvas.width-this.r)||this.x<this.r){   
  101.                         thisthis.x=this.x<this.r?this.r:(canvas.width-this.r);   
  102.                         this.vx = -this.vx;   
  103.                     }   
  104.                     if(this.y>(canvas.height-this.r)||this.y<this.r){   
  105.                         thisthis.y=this.y<this.r?this.r:(canvas.height-this.r);   
  106.                         this.vy = -this.vy;   
  107.                     }   
  108.   
  109.                     this.paint(ctx);   
  110.                 }   
  111.             }   
  112.   
  113.             var Game = {   
  114.                 init:function(){   
  115.                     for(var i=0;i<1000;i++){   
  116.                         var b = new ball(getRandom(0,canvas.width) , getRandom(0,canvas.height) , getRandom(-10 , 10) ,  getRandom(-10 , 10) , true)   
  117.                         Balls.push(b);   
  118.                     }   
  119.                 },   
  120.   
  121.                 update:function(){   
  122.                     ctx.clearRect(0,0,canvas.width,canvas.height);   
  123.                     for(var i=0;i<Balls.length;i++){   
  124.                         Balls[i].move();   
  125.                     }   
  126.                 },   
  127.   
  128.                 loop:function(){   
  129.                     var _this = this;   
  130.                     this.update();   
  131.                     RAF(function(){   
  132.                         _this.loop();   
  133.                     })   
  134.                 },   
  135.   
  136.                 start:function(){   
  137.                     this.init();   
  138.                     this.loop();   
  139.                 }   
  140.             }   
  141.   
  142.             window.RAF = (function(){   
  143.                 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };   
  144.             })();   
  145.   
  146.             return Game;   
  147.         }();   
  148.   
  149.         function getRandom(a , b){   
  150.             return Math.random()*(b-a)+a;   
  151.         }   
  152.   
  153.         window.onload = function(){   
  154.             testBox.start();   
  155.         }   
  156.     </script>  
  157. </body>  
  158. </Html>  

　　離屏canvas還有一個注意事項，如果你做的效果是會將對象不停地創建和銷毀，請慎重使用離屏canvas，至少不要像我上面寫的那樣給每個對象的屬性綁定離屏canvas。

　　因為如果這樣綁定，當對象被銷毀時，離屏canvas也會被銷毀，而大量的離屏canvas不停地被創建和銷毀，會導致canvas buffer耗費大量GPU資源，容易造成浏覽器崩潰或者嚴重卡幀現象。解決辦法就是弄一個離屏canvas數組，預先裝進足夠數量的離屏canvas，僅將仍然存活的對象緩存起來，當對象被銷毀時，再解除緩存。這樣就不會導致離屏canvas被銷毀了。

 

　【使用requestAnimationFrame】

　　這個就不具體解釋了，估計很多人都知道，這個才是做動畫的最佳循環，而不是setTimeout或者setInterval。直接貼出兼容性寫法：

XML/Html Code復制內容到剪貼板
  1. window.RAF = (function(){   
  2.        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };   
  3.             })();   

　　

　　【避免浮點運算】

　　雖然Javascript提供了很方便的一些取整方法，像Math.floor，Math.ceil，parseInt，但是，國外友人做過測試，parseInt這個方法做了一些額外的工作（比如檢測數據是不是有效的數值，parseInt 甚至先將參數轉換成了字符串!），所以，直接用parseInt的話相對來說比較消耗性能，那怎樣取整呢，可以直接用老外寫的很巧妙的方法了：

    JavaScript Code復制內容到剪貼板

    1.rounded = (0.5 + somenum) | 0;      

    2.rounded = ~~ (0.5 + somenum);   3.rounded = (0.5 + somenum) << 0;      

    運算符不懂的可以直接戳：http://www.w3school.com.cn/js/pro_JS_Operators_bitwise.ASP  裡面有詳細解釋

　　

　　【盡量減少canvasAPI的調用】

　　作粒子效果時，盡量少使用圓，最好使用方形，因為粒子太小，所以方形看上去也跟圓差不多。至於原因，很容易理解，我們畫一個圓需要三個步驟：先beginPath，然後用arc畫弧，再用fill進行填充才能產生一個圓。但是畫方形，只需要一個fillRect就可以了。雖然只是差了兩個調用，當粒子對象數量達到一定時，這性能差距就會顯示出來了。

　　還有一些其他注意事項，我就不一一列舉了，因為谷歌上一搜也挺多的。我這也算是一個給自己做下記錄，主要是記錄緩存的用法。想要提升canvas的性能最主要的還是得注意代碼的結構，減少不必要的API調用，在每一幀中減少復雜的運算或者把復雜運算由每一幀算一次改成數幀算一次。同時，上面所述的緩存用法，我因為貪圖方便，所以是每個對象一個離屏canvas，其實離屏canvas也不能用的太泛濫，如果用太多離屏canvas也會有性能問題，請盡量合理利用離屏canvas。

 　　源碼地址：https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Other-demo/cache

HTML5詳解
HTML5技術教程之如何支持拖動功能
1、在舞台上輸入“自由拖動”文字，如下圖所示：2、選中文字，在屬性面板上展開拖動，選擇【自由拖動】
深入解析HTML5中的Blob對象的使用
這篇文章主要介紹了深入解析Html5中的Blob對象的使用,是Html5入門學習中的基礎知識,需要
詳解HTML5中div和section以及article的區別
這篇文章主要介紹了詳解Html5中div和section以及article的區別,引自W3C的說明

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
CSS3+HTML5特效3 - 縱向無縫滾動 解析HTML5中的新功能本地存儲localStorage html5中valid、invalid、required的定義 詳解HTML5中的<template>標簽 html5的canvas實現3d雪花飄舞效果 html5 application cache遇到的嚴重問題 HTML5之SVG 2D入門5—顏色的表示及定義方式 你可能不知道的5個功能強大的 HTML5 API HTML5取代不了Flash 用HTML5制作數字時鐘的教程
熱門推薦
html5拍照功能實現代碼(htm5上傳文件) HTML5本地存儲之Database Storage應用介紹 html5 Canvas畫圖教程(10)—把面拆成線條模擬出圓角矩形 SSH Permission denied (publickey)解決辦法 純CSS3實現自定義塗鴉風格的邊框 HTML5中實現拖放效果無須借助javascript 跟KingDZ學HTML5之二：再見Audio和Video HTML 5媒體框架Popcorn.js 1.0發布 Html5游戲開發之乒乓Ping Pong游戲示例(一)
大家都在看
javascript中new關鍵字詳解 jquery圖片上下tab切換效果 2.10 JavaScript注釋 簡潔短小的 JavaScript IE 浏覽器判定代碼 html5鏈接的添加方式 Div+CSS布局入門教程(四) in.js 一個輕量級的JavaScript顆粒化模塊加載和依賴關系管理解決方案 JavaScript模擬流體效果
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved