淺談利用緩存來(lái)優(yōu)化HTML5Canvas程序的性能_html5教程技巧

　　【使用緩存】

　　使用緩存也就是用離屏canvas進(jìn)行預(yù)渲染了，原理很簡(jiǎn)單，就是先繪制到一個(gè)離屏canvas中，然后再通過(guò)drawImage把離屏canvas畫到主canvas中。可能看到這很多人就會(huì)誤解，這不是寫游戲里面用的很多的雙緩沖機(jī)制么？

　　其實(shí)不然，雙緩沖機(jī)制是游戲編程中為了防止畫面閃爍，因此會(huì)有一個(gè)顯示在用戶面前的畫布以及一個(gè)后臺(tái)畫布，進(jìn)行繪制時(shí)會(huì)先將畫面內(nèi)容繪制到后臺(tái)畫布中，再將后臺(tái)畫布里的數(shù)據(jù)繪制到前臺(tái)畫布中。這就是雙緩沖，但是canvas中是沒(méi)有雙緩沖的，因?yàn)楝F(xiàn)代瀏覽器基本上都是內(nèi)置了雙緩沖機(jī)制。所以，使用離屏canvas并不是雙緩沖，而是把離屏canvas當(dāng)成一個(gè)緩存區(qū)。把需要重復(fù)繪制的畫面數(shù)據(jù)進(jìn)行緩存起來(lái)，減少調(diào)用canvas的API的消耗。

　　眾所周知，調(diào)用canvas的API很消耗性能，所以，當(dāng)我們要繪制一些重復(fù)的畫面數(shù)據(jù)時(shí)，妥善利用離屏canvas對(duì)性能方面有很大的提升，可以看下下面的DEMO

　　1 、 沒(méi)使用緩存

　　2、 使用了緩存但是沒(méi)有設(shè)置離屏canvas的寬高

3 、 使用了緩存但是沒(méi)有設(shè)置離屏canvas的寬高

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

　　可以看到上面的DEMO的性能不一樣，下面分析一下原因：為了實(shí)現(xiàn)每個(gè)圈的樣式，所以繪制圈圈時(shí)我用了循環(huán)繪制，如果沒(méi)用啟用緩存，當(dāng)頁(yè)面的圈圈數(shù)量達(dá)到一定時(shí)，動(dòng)畫每一幀就要大量調(diào)用canvas的API，要進(jìn)行大量的計(jì)算，這樣再好的瀏覽器也會(huì)被拖垮啦。
XML/HTML Code復(fù)制內(nèi)容到剪貼板

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com