Question

我的网站有一个简单的JS动画。它会激活#frame1中包含的一堆照片，然后无限期地循环播放屏幕。 #frame1实际上是一个1920x1080的区域，它始终是一个旋转的照片显示器。

Chrome中的内存占用量不断增长。它以这个速度（50）快速增长，并且在100处变慢。这似乎是因为大量像素被移动。有没有什么方法可以提高这个应用程序的内存性能，而不会降低间隔的速度？

function start_scroll() {
  var elem1 = document.getElementById("frame1");
  var pos1 = 0;                    // Starting position of box1.
  var id = setInterval(frame, 50); // Set speed here.
  function frame() {
    if (pos1 == frameheight * -1) { // If it just disappeared, move it to the bottom and populate it with the next series of pics.
      pos1 = frameheight;
      populate(1);                  // Populate the first frame with the next set of pics.
    } else {                        // Otherwise, keep on moving up.
      pos1--;
      elem1.style.top = pos1 + 'px';
    }
  }
}

Answer 1

将setInterval()替换为requestAnimationFrame()。这将使动画与监视器更新同步，效率很高。

function start_scroll() {
    var elem1 = document.getElementById("frame1");

    var pos1 = 0;
    //var id = setInterval(frame, 50); // don't use setInterval
    requestAnimationFrame(frame);      // start once, using rAF
    function frame() {
        if (pos1 == frameheight * -1) {
            pos1 = frameheight;
            populate(1);the next set of pics.
        } else {
            pos1--;
            elem1.style.top = pos1 + 'px';
        }
        requestAnimationFrame(frame);   // loop using rAF

    }
}

可以使用cancelAnimationFrame(timeRef)或旗帜停止动画。

var timeRef;

循环内部：

timeRef = requestAnimationFrame(frame);   // loop using rAF

典型的帧速率为每秒60帧。在一些高端显示器上或许更多。您可以使用提供的时间戳来规范这一点。

function loop(timestamp) {
  // compare time here
  requestAnimationFrame(loop); // loop
}
requestAnimationFrame(loop);   // start

Answer 2

您或多或少地冷使用requestAnimationFrame：

function start_scroll() {
    var elem1 = document.getElementById("frame1");

    var pos1 = 0; // Starting position of box1.
    var id = setTimeout(frame, 50); // Set speed here.
    function frame() {
        requestAnimationFrame(frame);
        if (pos1 == frameheight * -1) { // If it just disappeared, move it to the bottom and populate it with the next series of pics.
            pos1 = frameheight;
            populate(1); // Populate the first frame with the next set of pics.
        } else { // Otherwise, keep on moving up.
            pos1--;
            elem1.style.top = pos1 + 'px';
        }

    }
}

当然我无法测试，但你可以在这里阅读全面的啧啧：http://creativejs.com/resources/requestanimationframe/

使用Javascript更有效地动画图像

2 个答案: