How to constantly move SVG paths without losing performance

Question

I am trying to do a mobile game where I draw 6 SVG paths and I move then through the screen (from top to bottom) constantly. I am manipulating the paths with a simple javascript that updates some variables value and use them to set the attribute "d" of the paths. Like the example below:

setInterval(scrollPaths, 17); // ~ 60 fps

function scrollPaths() {

  // leftYPoints is an array of points defined earlier and scrollSpeed is an integer value (e.g. 2)
  for (var i = 0; i < leftYPoints.length; i++) leftYPoints[i] += scrollSpeed;

  // then I change the paths attribute
  var pathAttribute = "M"+ leftXPoints[0] + leftYPoints[0]
      + " L" + leftXPoints[1] + leftYPoints[1];

  document.getElementById("leftpath").setAttribute("d", pathAttribute);
  document.getElementById("righpath").setAttribute("d", pathAttribute);
  ... // continue to do that with the other paths, changing some variables only

}

The javascript itself runs very fast (scrollPaths takes about 5ms every time) and runs perfectly on the browser. But when I test the script in the mobile browser it seems that theres is a lot of lag on the paths. You can see that the paths are not scrolling smoothly. So I tried to decrease the value of scrollSpeed to a very small value but that did not solve it. So I thought the problem was related to the rendering method of the mobile browser or something like that. I tried to find some answers but nothing solved my problem. Then I found AmeliaBR`s answer here How do you move an SVG around a webpage without triggering slow redraws? where she says that it is better to use the transform attribute because the browser will understand it as it should just move some content that was already rendered instead of re-calculating the whole layout. So I tried to do that like this:

var newYPos = 1;

setInterval(scrollPaths, 17); // ~ 60 fps

function scrollPaths() {

  // increased the position of the paths
  newYPos += 1;

  // then I did the transform of the paths with a group <g>
  document.getElementById("pathsgroup").setAttribute("transform", "translate(0," + value + ")");

}

But unfortunately the result was not very effective. The javascript ran a little faster but the lag effect of the paths is still happening. So I am here, asking:

1. Does anyone knows what is happening?
2. Is there a better way to do that?
3. Or the problem is that mobile browsers are not ready for that yet (they still lack performance)?

Not sure if it helps but I tested it on a Nexus 5 with Chrome (supposed to have a very good performance).

Thanks.

Answer 1

Maybe try storing the "pathsgroup" element as a variable so you don't have to keep using getElement every iteration?

var newYPos = 1;
var pathsGroup = document.getElementById("pathsgroup");

setInterval(scrollPaths, 17); // ~ 60 fps

function scrollPaths() {

  // increased the position of the paths
  newYPos += 1;

  // then I did the transform of the paths with a group <g>
  pathsGroup.setAttribute("transform", "translate(0," + value + ")");

}