Safari和Firefox上视差滚动不稳定

Question

我正在建立一个带视差介绍的单页程序。 为了实现视差效果，我使用了以下JS：

// Parallax
var layerBg = document.querySelector('.js-layer-bg');
var layerText = document.querySelector('.js-layer-text');
var sectionIntro = document.getElementById('section-intro');
var scrollPos = window.pageYOffset;
var layers = document.querySelectorAll('[data-type=\'parallax\']');

var parallax = function() {
  for (var i = 0, len = layers.length; i < len; i++) {
    var layer = layers[i];
    var depth = layer.getAttribute('data-depth');
    var movement = (scrollPos * depth) * -1;
    var translate3d = 'translate3d(0, ' + movement + 'px, 0)';

    layer.style['-webkit-transform'] = translate3d;
    layer.style.transform = translate3d;
  }
};

window.requestAnimationFrame(parallax);

window.addEventListener('scroll', function() {

  // Parallax layers
  scrollPos = window.pageYOffset;
  window.requestAnimationFrame(parallax);

  // Animate text layers
  var vhScrolled = Math.round(window.pageYOffset / window.innerHeight * 100);
  if (vhScrolled > 100 && layerText.classList.contains('is-hidden')) {
    layerText.classList.remove('is-hidden');
  } else if (vhScrolled <= 100 && !layerText.classList.contains('is-hidden')) {
    layerText.classList.add('is-hidden');
  }
});

除此之外，我还使用2个库在Scroll上为其他动画制作了动画：ScrollMonitor和ScrollReveal。 没什么特别的。

我一直在Chrome上进行开发，而且一切似乎都可以顺利进行。 但是，当我在Safari（尤其是Firefox）上进行测试时，事情变得如此缓慢，以至于实际上导致浏览器崩溃。

我真的不知道我在做什么错，为什么浏览器之间的性能如此不同。

希望你能帮助我，谢谢！

Answer 1

我不能完全确定到底是什么引起了滞后性/波动性问题，我似乎还记得过去的项目中有类似的情况。 我会研究进一步的图像优化来降低渲染内容的权重，这可能会带来很大的不同。 否则，我对效率调整提出了一些建议，这些建议可能会帮助它更快地运行：

// Parallax
var layerBg = document.querySelector('.js-layer-bg');
var layerText = document.querySelector('.js-layer-text');
var sectionIntro = document.getElementById('section-intro');
var layers = document.querySelectorAll('[data-type=\'parallax\']');
var len = layers.length; // cache length
var layerarray = []; //create cache for depth attributes

var i = -1;
while(++i < len){
  layerarray.push([layers[i], parseInt(layers[i].getAttribute('data-depth'))]); //create an array that stores each element alongside its depth attribute instead of requesting that attribute every time
}

var parallax = function() {
  var scrollPos = window.pageYOffset; //define inside function instead of globally
  var i = -1;

  while(++i < len) { //while loop with cached length for minor speed gains
    var layer = layerarray[i][0];
    var depth = layerarray[i][1];
    var movement = (scrollPos * depth) * -1;
    var translate3d = ['translate3d(0, ', movement, 'px, 0)'].join(""); //join statement is much faster than string concatenation

    layer.style['-webkit-transform'] = translate3d;
    layer.style.transform = translate3d;
  }


  // Animate text layers
  var vhScrolled = Math.round(scrollPos / window.innerHeight * 100);
  if (vhScrolled > 100 && layerText.classList.contains('is-hidden')) {
    layerText.classList.remove('is-hidden');
  } else if (vhScrolled <= 100 && !layerText.classList.contains('is-hidden')) {
    layerText.classList.add('is-hidden');
  }
};

window.requestAnimationFrame(parallax);

window.addEventListener('scroll', function() {

  // Parallax layers
  window.requestAnimationFrame(parallax);

  //moved text animation into the animationframe request
});