JavaScriptの割り当て値でアニメーションを最適化

Question

私は、ウェブサイトに多くのエフェクトとアニメーションを持つアニメーションを構築しています。私はこれらのアニメーションの効率を最適化しようとしています。それらのいくつかは、低CPU/RAMデバイスにとっては少し複雑です。

var x = 38; //this value changes every 50ms 
document.getElementById("a").style.left = document.getElementById("b").style.left = document.getElementById("c").style.left = document.getElementById("d").style.left = document.getElementById("e").style.left = x + "px"; 

実際には上記の簡素化だ、私は上記のコードを実行します。私が好きなアニメーションはあなたがここにhttps://www.empresasite.com.br

見ることができるように私はこれを行うに私のコードの多くの部分で実現する滑らかでありません少なくとも13個の要素a = b = c = d .... m = x;と、少なくとも4つのプロパティ（左、高さ、ボックスシャドウ、背景色）で。

だから私は、一度に複数の要素/オブジェクトに同じ値を割り当てるためのよりよい代替があるのだろうかと思いましたか？

おそらく以下のコードは高速でしょうか？私はそれを使用しましたが、アニメーションの大幅な改善は見られませんでした。

var x = 38; 
x = x + "px"; 
document.getElementById("a").style.left = x; 
document.getElementById("b").style.left = x; 
document.getElementById("c").style.left = x; 
document.getElementById("d").style.left = x; 
document.getElementById("e").style.left = x; 

私は上記のコードがより速くなければならないと思いますか？私はすべての要素が "x"から値を取得する独自のプロパティ（left）を更新するため、これを言う。最初の例では、私はMAYBEにjavascriptに "="記号のチェーン内の前の要素の値を割り当てているので、最初の要素に "x"を割り当て、次に最初の要素の値を2番目に割り当てなければなりません...続ける。

あなたは、私がこれを使用するときにjQueryのない正確に何を知っています：

$(".elements").css({left:x}); 

それはいくつかの最適化を使用していますか？

Answer 1

オンラインはJavaScriptベンチマークツールのほとんどで遊んで後、私はこの結論に来た：

1）jqueryのは、私が使用するすべてのネイティブのJSソリューションのより高速な方法です。たぶん、Jqueryは一度にたくさんの要素に同じプロパティを適用するときに、ある種の最適化を使用します。だから、$(".class").css("left",x)に依存して、数百の要素の左のプロパティにxの値を適用すると、より高速な解決策になります。

2）2番目の解決策は、xを各要素に個別に適用することです。例：

var x = 38; 
document.getElementById("a").style.left = x; 
document.getElementById("b").style.left = x; 

3）最悪の解決策は、実際に私がウェブサイトで使用していたもので、滑らかなアニメーションではないことでした。したがって、これを避けてください：

document.getElementById("a").style.left = document.getElementById("b").style.left = ... = ... = x; 

第3の解決方法との違いは本当に目立つものです。あなたは以下のリンクでそれを確認します（上部のアニメーションに特別な注意を払う）することができます

1）https://www.empresasite.com.br/?q=principal&before - >これは第三ソリューション

2）https://www.empresasite.com.br/?q=principal使用している - >これは第一溶液を使用しているが

多くのリソースを持つコンピュータでは違いは見られないかもしれませんが、4GB以上のRAMを搭載したコンピュータでこれを実行すると大きな影響があります。

これはスムーズなアニメーションを持たない人に役立ちます。

Answer 2

positionの代わりにtranslateを使用すると、パフォーマンスの向上を図ることができます。

あなたが依頼したjQueryバリエーションを使用しても、位置leftを変更しているので、違いはありません。