javascript/html 画布性能缓慢答案

【问题标题】：Slow performance with javascript/html canvasjavascript/html 画布性能缓慢
【发布时间】：2015-12-14 09:38:24
【问题描述】：

所以，我在游戏循环的上下文中为自己创建了一个带有 javascript/html 画布的小演示。您可以通过按 w、a、s、d 键移动一个小方块。但是，当按住 3 或 4 秒以上时，画布会变得断断续续，方块几乎停止移动。

这里是javascript；

// --------------------------------------------------------------------
// -- MAIN GAME LOOP
// --------------------------------------------------------------------
function gameLoop(){
    update();
    render();
    requestAnimationFrame(gameLoop);
}

function update(){
    processInput();
};
function render(){
    var canvas = document.getElementById('viewport');
    var ctx = canvas.getContext('2d');

    if(upDown){
        rect.top -= rect.speed;
    }else if(downDown){
        rect.top += rect.speed;
    }else if(leftDown){
        rect.left -= rect.speed;
    }else if(rightDown) {
        rect.left += rect.speed;
    }

    ctx.clearRect(0, 0, 1024, 768);
    ctx.beginPath();
    ctx.rect(rect.left, rect.top, 50, 50, true);
    ctx.closePath();
    ctx.fill();
};

var rect = {
    top: 0,
    left: 0,
    speed: 5
};

// --------------------------------------------------------------------
// -- OTHER FUNCTIONS
// --------------------------------------------------------------------
var rightDown = false;
var leftDown = false;
var upDown = false;
var downDown = false;

function processInput(){
    $(document).keydown(function(e){
        console.log(e.keyCode);
        if(e.keyCode == 87){upDown = true;}
        if(e.keyCode == 83){downDown = true;}
        if(e.keyCode == 68){rightDown = true;}
        if(e.keyCode == 65){leftDown = true;}
    }).keyup(function(){
        upDown = false;
        downDown = false;
        rightDown = false;
        leftDown = false;
    })
}

$(document).ready(function(){
    requestAnimationFrame(gameLoop);
});

有人有什么想法吗？

这是我的代码笔；

http://codepen.io/anon/pen/wKGJOr

【问题讨论】：

标签： javascript jquery html performance canvas

【解决方案1】：

问题是因为您在游戏循环中调用了processInput（通过update）。此函数每次调用时都会附加新的keydown 和keyup 事件处理程序。只需要调用一次。从update 中删除调用，并（例如）在ready 函数中调用它：

$(document).ready(function(){
    processInput();
    requestAnimationFrame(gameLoop);
});

通过注册越来越多的事件处理程序，您会导致运行的代码比必要的多得多，因此会出现卡顿。

Updated codepen.

【讨论】：

修复了它，你这个传奇！谢谢！