Safari 和 Firefox 上的视差滚动性能不稳定

Question

我正在构建 a 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。没什么特别的。

我一直在 Chrome 上开发这个，一切似乎都很顺利。然而，当我在 Safari，尤其是 Firefox 上进行测试时，事情变得非常缓慢，以至于我的浏览器实际上崩溃了。

我真的想不通我做错了什么以及为什么浏览器之间的性能差异如此之大。

希望你能帮帮我，谢谢！

Answer 1

我不确定是什么具体导致了 lag/choppiness 问题，我似乎记得在过去的项目中有类似的事情。我会研究任何进一步的图像优化以降低正在渲染的内容的重量，这会产生巨大的差异。否则，我提出了一些效率调整建议，可能会帮助它运行快一点：

// 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
});

Safari 和 Firefox 上的视差滚动性能不稳定

Parallax scroll choppy performance on Safari & Firefox

javascript

firefox

scroll

safari

parallax