视差滚动在 Safari 和 Firefox 上的断断续续的表现

Question

我正在用视差介绍构建一个onepager。对于视差效果，我正在使用以下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个库在滚动上进行了其他一些内容：ScrollMonitor和ScrollReveal。没什么特别的。

我一直在镀铬上开发它，一切似乎都足够顺利。但是，当我在野生动物园（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
});