jQueryで動的CSSを追加する際にパフォーマンス上の問題はありません

Question

私はリスティングページを作成しています。ここでは、20ページのレコードがページの読み込みにロードされ、残りはスクロールダウンに動的に追加されます。私のアプリケーションでは、ブートストラップスタイルを含む共通のレイアウトを使用しています。しかし、この特定のページでは、私はいくつかのCSSをオーバーライドする必要があります。たとえば、td要素のパディングを4pxに減らす必要があります。これはデフォルトで8pxです。私はこれを行うには2つの方法があります。新しいCSSファイルを追加し、条件付きでヘッダーに追加するか（ヘッダーはすべてのページに共通です）、このページのスクリプトを追加します。そこでjqueryスクリプトを追加してコードを変更せずに簡単に解決できるようにしました。

これを行うと、既存のテーブル行に追加されている各tdにインラインCSSが追加されていることがわかりました。私はちょうどそこにパフォーマンスの問題があるか知っていたかったか、または私がこれを好きな場合、それはローディング時間に影響します。

Answer 1

JavaScriptを使用していますが、スタイルを追加するとコストがかかります。費用には、スクリプト作成の時間とスタイルの再計算が含まれます。少数のレコード（たとえば20）に対してのみjsを介してスタイルを追加する場合、このコストはごくわずかですが、大量のレコード（1000）に同じスタイルを追加しようとするとコストがかかります。

あなたのユースケースはより多くのタイプのビューであるため、最悪の場合に備える必要があります。

だから、CSSでスタイルを追加する方が良いです。

制限があるため、CSSファイルにルールを追加できない場合。あなたは、動的なスタイルシートを作成し、体にそれを追加し、まだあなたが代わりにjQueryのを読み込むこと

.padd-fix { 
padding:8px 2px; 
} 

$('td').addClass('padd-fix');