4

Jquery では、$.css() メソッドを直接使用して、生の DOM 要素を最初のパラメーターとして渡すことができます。たとえば、'a' を myDiv の幅に設定したい場合、jQuery では次の構文を使用できます。

（オプション1）：

var elem = document.getElementById('myDiv');
var a = $.css(elem, 'width');

これの代わりに (オプション 2):

var a = $('#myDiv').css('width');

オプション 1 はセレクターを必要とせず、新しいオブジェクトを作成するのではなく、グローバル jQuery オブジェクトに依存しているように見えます。jQuery API またはオンラインで、このメソッドに関するドキュメントが見つかりません。特にアニメーションで jQuery オブジェクトが必要な場合は、これによりパフォーマンスが向上すると思います。この方法を使用してはいけない理由はありますか?

ありがとう！

編集: パフォーマンス テストは、オプション 1 が少し高速であることを示しています。$.css() を直接使用しない理由はないようです。答えてくれてありがとう！

4

3 に答える 3

1

ええ、最初のものはわずかに高速です。ただし、css 値しか取得できません。

ここでパフォーマンス テストを行いました: http://jsperf.com/jquery-css-signature修正して、他のオプションをテストすることができます。

事実が設定されたので、これらのレベルのパフォーマンス最適化では、オーバーヘッドに値するものではないと思います. 同じ結果を得るには、より明確で保守しやすい方法を使用してください。ほとんどの場合、パフォーマンス上の利点は実際に問題になるほど大きくはありません。

于 2013-05-05T02:08:50.923 に答える
1

方程式から jQuery を取り除くものはすべて、高速化します。getElementById処理する文字列を渡す代わりにネイティブを使用することで、速度が向上します。

native を使用すると、さらに高速になりますgetComputedStyle。

var elem = document.getElementById('myDiv');
var a = window.getComputedStyle(elem).width;

古いバージョンの IE はcurrentStyle代わりに使用することに注意してください。したがって、次のように正規化できます。

window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle;};

プレーンな JavaScript の使用に関する詳細については、Vanilla JSを確認してください。

于 2013-05-05T02:55:27.323 に答える
0

オプション 2 は、いくつかの型チェックと解析の後、オプション 1 とほぼ同じことを行います。パフォーマンスの違いが (あるとしても) 大きいとは思えません。

要素を繰り返し参照するときのパフォーマンスが心配な場合は、すべての検索を一度実行して、それを再利用するのが最善の策です。

var elem = $('#myDiv');

var a = elem.css('width');
elem.css('height', '100px');
// etc.
于 2013-05-05T02:09:29.290 に答える