Javascript HTML5动画性能

这个问题可能有点离题，但我想知道为什么下面的代码在macbook pro 2013视网膜显示器上运行得比我的旧hp笔记本电脑多。我在两台设备上都使用chrome浏览器。我问这个问题的原因是因为我开发了一个使用html5和javaScript的游戏，并且该游戏在Mac上运行了很多solver

有什么建议吗

window.onload=function(){
var demo = document.getElementById('demo');
var ctx = demo.getContext('2d');


var animObjects = [];
animObjects.push(new anim(ctx, 0, 90, 80,80, 'yellow', 3, 3));
animObjects.push(new anim(ctx, 20, 90, 80,80, 'red', 4, 0));


loop();

var e = new MouseEvent(ctx);
demo.addEventListener('mousemove', e.clickReporter, false);
function MouseEvent(ctx){
 this.clickReporter = function(evt){
        var mousePos = getMousePos(demo, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        console.log(message);
        writeMessage(demo, message);
}
function getMousePos(demo, evt) {
        var rect = demo.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
}
function writeMessage(demo, message) {
        ctx.clearRect(0, 0, demo.width, demo.height);
        ctx.font = '18pt Italic';
        ctx.fillStyle = 'black';
        ctx.fillText(message, 10, 25);
}
}

function loop() {   
//ctx.clearRect(0, 0, demo.width, demo.height);
for(var i = 0, ao; ao = animObjects[i]; i++) {

    ao.update();
}
requestAnimationFrame(loop);
}


function anim(ctx, x, y, XSize,YSize, color, dx, dy) {
var me = this;

this.x = x;
this.y = y;
this.XSize = XSize;
this.XSize = XSize;
this.color = color;
this.dx = dx;
this.dy = dy;

var bool = 0;

this.update = function() {
    ctx.clearRect(me.x, me.y, me.XSize, me.XSize);
    if (me.x < 0 || me.x > ctx.canvas.width-80){
        me.dx = -me.dx;
    }
    if (me.y < 0 || me.y > ctx.canvas.height-80){
        me.dy = -me.dy;
    }

    me.x += me.dx;
    me.y += me.dy;        
    render();
}
function render() {
    ctx.beginPath();
    ctx.rect(me.x, me.y, me.XSize, me.XSize);
    ctx.closePath();
    ctx.fillStyle = me.color;
    ctx.fill();
}
return this;
}
}

window.onload=function（）{
var demo=document.getElementById（'demo'）；
var ctx=demo.getContext（'2d'）；
var animObjects=[]；
推送（新动画（ctx，0，90，80，80，'黄色'，3，3））；
推（新动画（ctx，20，90，80，80，'红色'，4，0））；
loop（）；
var e=新的鼠标事件（ctx）；
demo.addEventListener（'mousemove'，e.clickReporter，false）；
功能鼠标事件（ctx）{
this.clickReporter=函数（evt）{
var mousePos=getMousePos（演示，evt）；
var message='鼠标位置：'+mousePos.x+'，'+mousePos.y；
控制台日志（消息）；
写消息（演示、消息）；
}
函数getMousePos（演示，evt）{
var rect=demo.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}
函数writeMessage（演示、消息）{
ctx.clearRect（0，0，demo.width，demo.height）；
ctx.font='18pt斜体'；
ctx.fillStyle='黑色'；
ctx.fillText（消息，10,25）；
}
}
函数循环（）{
//ctx.clearRect（0，0，demo.width，demo.height）；
for（var i=0，ao；ao=animObjects[i]；i++）{
ao.update（）；
}
请求动画帧（循环）；
}
函数动画（ctx、x、y、XSize、YSize、color、dx、dy）{
var me=这个；
这个.x=x；
这个。y=y；
this.XSize=XSize；
this.XSize=XSize；
这个颜色=颜色；
this.dx=dx；
this.dy=dy；
var-bool=0；
this.update=函数（）{
clearRect（me.x，me.y，me.XSize，me.XSize）；
if（me.x<0 | | me.x>ctx.canvas.width-80）{
me.dx=-me.dx；
}
if（me.y<0 | | me.y>ctx.canvas.height-80）{
me.dy=-me.dy；
}
me.x+=me.dx；
me.y+=me.dy；
render（）；
}
函数render（）{
ctx.beginPath（）；
ctx.rect（me.x，me.y，me.XSize，me.XSize）；
ctx.closePath（）；
ctx.fillStyle=me.color；
ctx.fill（）；
}
归还这个；
}
}

由于分辨率太高（我假设是3840x2400，因为视网膜显示），可能会减慢动画、游戏等的速度

你不是唯一一个有这个问题的人：

作为apple.com链接中的提示，有人建议查看以下内容：

---

它允许您在本机高DPI和更常见的1920x1200之间切换。你可以试试看会发生什么！希望这有帮助

很简单。较慢的计算机/浏览器，较慢的动画。反过来看。@Dude我不会说它的解算器然后是我5岁的hpcomputer\uu/浏览器\uu可能Chrome for Mac存在一些硬件优化问题。我不知道。谢谢你，我做了一些研究后，降低了分辨率，效果很好