jQuery MatchHeightの性能

Question

私はjQuery matchHeightを使用します。行のすべての要素を同じ高さにするために使用されます。

多くの要素を持つページがあり、ロードが非常に遅く、ブラウザのサイズを変更して（matchHeightアップデートを起動すると）機能の終了を待たなければなりません。

Here例を見つけることができます（フルスクリーンで開きます）。あなたが見ることができるように

は、私はブートストラップ（CSSにとJScriptページの端にある）、jQueryのプラグインMatchHeightを含め、私のscript.jsに私はこのコードを使用して初期化：

jQuery(document).ready(function($) { 

    // matchHeight 
    $(function() { 
     $('.col-eq-height').matchHeight({ 
      property: 'min-height' 
     }); 
    }); 

}); 

ページmatchHeight機能を適用するクラス「col-eq-​​height」を持つ多くの要素が含まれています。

このプラグインのパフォーマンスを向上させるにはどうすればよいですか？

たとえば、（ブラウザのスクロール位置に基づいて）表示要素にのみmatchHeightを適用し、ブラウザウィンドウのすべての要素に対してサイズを変更しないでください。あなたは、私はほとんどが非質問を検討したいものを求めてきましたので、これは、かなり多くの非答えです：私の英語

Answer 1

免責ため

おかげで、申し訳ありません。誰もあなたのためにこのような広範なコードを書こうとはしません。特に、このような恣意的な質問はありません。また、何をしようとしているのか試したことはありません。

正直なところ、基本的には何かのパフォーマンスが向上する可能性があります。特定のユースケースで速いものをテストして開発するように誰かに依頼しているのであれば、銀行残高を確認して自分自身を専門に雇うことをお勧めします。 「速い」とは何を意味するのかに応じて、それは非常に難しい作業です。 Here's JavaScriptを最適化するための非常に基本的なリストです。

また、神の愛のためにあなたは私がmatchHeight機能を適用

よりご質問で、より具体的な可能性があり下さい。

これは、達成しようとしていることを人々が理解するのに役立ちません。コンテキストとは何ですか、つまり、ここではどのようなページを設計していますか？たぶんその質問は「プラグインのパフォーマンスを改善する」というのではなく、「他のどのようなデザインや方法を使っても、そのような大量のパフォーマンス上のペナルティはないのですか？

何百ものが表示されるようにするには、Googleのように改ページしてみませんか？または無限のスクロール？

また、エレメント配置の場合は、まずレイアウトのタイプを正確に計算してからCSSを使用してみてください。私はアニメ化されていないHTMLデザインにjQueryを使用する必要はありませんでした。私はますますアニメーションにもCSSを使用しています。おそらく、後でどのタイプのレイアウトを再考し、CSSを最初に使ってみるべきでしょうか。何千もの要素のスタイリングをしているなら、JavaScriptはCPUの高価になるでしょう。

EDIT：質問が「どのように私は、行の子要素の行と同じ高さを作ることができる」に言い換えている場合は、コメントを1として、私たちは次のことを行うことができます：

.container { 
 
    display: table; 
 
} 
 
.child { 
 
    width: 30px; 
 
    background-color: red; 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 

 
.content { 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="child"> 
 
     a<br />a<br />a 
 
    </div> 
 
    <div class="child"> 
 
     a<br />a<br />a<br />a<br />a<br />a<br />a 
 
    </div> 
 
    <div class="child"> 
 
     <div class="content"> 
 
      a<br />a<br />a 
 
     </div> 
 
    </div> 
 
</div>

ここで

、あなたは（時折、まだサポートされていないです）flexboxを必要とせず、要素はすべて同じ高さであることを確認することができます。希望が役立ちます。