Tuval ile yüksek CPU kullanımı ve requestAnimationFrame

Question

Yinelemeli olarak requestAnimationFrame numaralı telefonu ararken yüksek CPU kullanımıyla (% 30 - 40) karşılaşıyorum, herkesin onu indirmek için iyi stratejileri var mı?

Basit bir örnek:

var canvas = document.createElement('canvas'); 
 
canvas.width = 100; 
 
canvas.height = 20; 
 

 
var canvasContext = canvas.getContext('2d'); 
 
document.body.appendChild(canvas) 
 

 
var rafId; 
 
function drawLoop(time) { 
 
    canvasContext.clearRect(0, 0, 100, 20); 
 
    canvasContext.fillRect(0, 0, Math.random() * 100 * 1.4, 20); 
 
    rafID = window.requestAnimationFrame(drawLoop); 
 
} 
 

 
drawLoop();

Answer 1

Ben kayda değer benim CPU için her şeyi yapmaya bu örneği alınamıyor ama bu iki yöntem kullanılarak aşağı almak başarmıştı. CPU'm% 4-5 oranında snippet'inizi çalıştırıyordu,% 2 oranında traş olan içerikte kaydetme/geri yükleme işlemini çalıştırıyordu. Neden olduğunu - çünkü hiçbir dönüşüm gerçekleştirmedik. Tüm bu kanvas bağlamı mendil her zaman - - İkinci örnekte, yalnızca canvas.width sıfırlayarak bunu yapmanın eski korsan şekilde kullanır ve daha pahalı olmalı -% 1.4

var canvas = document.createElement('canvas'); 
 
canvas.width = 100; 
 
canvas.height = 20; 
 

 
var canvasContext = canvas.getContext('2d'); 
 
document.body.appendChild(canvas) 
 

 
var rafId; 
 
function drawLoop(time) { 
 
    canvasContext.save(); 
 
    canvasContext.clearRect(0, 0, 100, 20); 
 
    canvasContext.fillRect(0, 0, Math.random() * 100 * 1.4, 20); 
 
    canvasContext.restore(); 
 
    rafID = window.requestAnimationFrame(drawLoop); 
 
} 
 

 
drawLoop();

aşağı bu örneği var ancak

var canvas = document.createElement('canvas'); 
 
canvas.width = 100; 
 
canvas.height = 20; 
 

 
var canvasContext = canvas.getContext('2d'); 
 
document.body.appendChild(canvas) 
 

 
var rafId; 
 
function drawLoop(time) { 
 
    canvas.width = canvas.width; 
 
    canvasContext.fillRect(0, 0, Math.random() * 100 * 1.4, 20); 
 
    rafID = window.requestAnimationFrame(drawLoop); 
 
} 
 

 
drawLoop();

Şimdi

nedenini öğrenmek için daha fazla performans keşif gitmek gerekir, yoksa aslında bir şey yaparsa hiç olur . Bununla birlikte, bir sprite'ı veya bir maskeyi bazı bitmap verileri üzerinde ileri-geri hareket ettirmek gibi farklı bir çizim tekniğini kullanabilirsiniz; bu, işleyicinin ele alması için bunu çok daha az zorlaştıracaktır. Bu sorunun kapsamını aştığı için burada yayınlamayacağım.