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