Question

我用视差介绍构建a onepager。对于视差效果，我使用以下JS：

finally

除此之外，我还使用2个库动画滚动其他一些内容：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
});

Safari＆amp; amp;上的视差滚动波形性能火狐

1 个答案: