canvas效能優化 離屏渲染

為了使使用者達到更好的體驗，做動畫的時候都知道用requestanimationframe了，但是他也是有極限的，當繪製的東西足夠多或者複雜的時候，頻繁的刪除與重繪降低了很多效能。

在canvas中粒子系統應該算是比較常見的一種了，現在建立乙個canvas畫布，並繪製100個粒子在整個畫布上由上至下做勻速往返直線運動。

class scene 

}

/*

繪製乙個粒子
* ctx —— canvas上下文
* x —— 圓心x座標
* y —— 圓心y座標
* r —— 圓半徑 */
drawparticle(ctx, x, y, r) 

init() );

this.drawparticle(this.ctx, rx, ry, this
.radius);
}//動畫
this
.animate();
}

animate() 

} else
}//重繪
this.drawparticle(this.ctx, particle.x, particle.y, this
.radius);
}let self = this
; requestanimationframe(() =>);
}

1000個粒子

接著增加數量到4000，發現fps已經開始變化了，穩定在50左右，數量越多越明顯，如下圖。

4000個粒子

正如上文所說，當粒子量級達到一定數量的時候，效能開始降低，幀率開始下降，這是我們不想看到的，因為這很影響使用者體驗。

離屏渲染到底是什麼？在mozilla文件上有簡單介紹，大概意思就是說再建立乙個新的canvas，然後將要繪製的圖形，先在新的canvas中繪製，然後使用drawimage()將新的canvas畫到當前的canvas上。網上看了一些也沒有講的特別清楚，也動手實踐了一下。

class particle 

//建立粒子
create() 
//移動粒子
move(ctx, x, y) 
}

//

init方法中的for迴圈
for (let i = 0; i < this.amount; i++) );
}

//

this.drawparticle(this.ctx, particle.x, particle.y, this.radius);
//↓↓
particle.instance.move(this.ctx, particle.x, particle.y);

//

只建立乙個例項
let particle = new particle(this
.radius);
for (let i = 0; i < this.amount; i++) );
}

當然，canvas的一些api也是消耗效能的，所以最後發現，要做好效能優化，首先**肯定是要優化，另外就是使用像離屏渲染之類的方法。

**：

iOS效能優化中的離屏渲染

gpu螢幕渲染有以下兩種方式 特殊的離屏渲染 如果將不在gpu的當前螢幕緩衝區中進行的渲染都稱為離屏渲染，那麼就還有另一種特殊的 離屏渲染 方式 cpu渲染。完成，渲染得到的bitmap最後再交由gpu用於顯示。cpu渲染 gpu顯示 什麼時候會喚起離屏渲染 當使用圓角，陰影，遮罩的時候，圖層屬性的...

iOS離屏渲染之優化分析

在進行ios的應用開發過程中，有時候會出現卡頓的問題，雖然ios裝置的效能越來越高，但是卡頓的問題還是有可能會出現，而離屏渲染是造成卡頓的原因之一。因此，本文主要分析一下離屏渲染產生的原因及避免的方法，最後介紹一下xcode自帶的分析離屏渲染的工具instruments的使用。calayer繼承自n...

離屏渲染學習筆記

opengl中，gpu螢幕渲染有以下兩種方式 意為當前螢幕渲染，指的是gpu的渲染操作是在當前用於顯示的螢幕緩衝區中進行。意為離屏渲染，指的是gpu在當前螢幕緩衝區以外新開闢乙個緩衝區進行渲染操作。相比於當前螢幕渲染，離屏渲染的代價是很高的，主要體現在兩個方面 要想進行離屏渲染，首先要建立乙個新的緩...