Safari和Firefox上的視差滾動波濤洶涌表演

Question

我正在建造a onepager視差介紹。對於視差效果，我用下面這段JS的：ScrollMonitor和ScrollReveal：

// 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個庫滾動動畫一些其他的東西。沒什麼特別的。

我一直在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 
});