0

私の仲間のプログラマー、私は正気を失いつつあります。私は JS のパフォーマンスに関する多くの本を読みましたが、そのすべてが、将来の参照と管理のために DOM オブジェクトをキャッシュし、新しい Jquery オブジェクトを作成しない方がよいと言っています。合理的に聞こえます。しかし今、私の信仰は揺らいでいます。私の会社でコード規則を開発しようとしていますが、パフォーマンスの観点からこの問題に対処するつもりでした。次のコードがあります。

        $("#registratorType").attr("readonly", "readonly");
        $("#registratorType").attr("size", "25");
        $("#id").attr("readonly", "readonly");
        $("#id").attr("size", "25");
        $("#serial").attr("readonly", "readonly");
        $("#serial").attr("size", "25");
        $("#duration").attr("size", "25");
        $("#stoppingDuration").attr("size", "25");
        $("#speeddata").removeAttr("disabled");

それがすべてではありませんが、あなたはその考えを持っていると思います。このフォームをすべて取得して、キャッシュされた参照にラップするつもりでした。

    var $form = $('#vehicleProfile');
    $form.find("#registratorType").attr("readonly", "readonly");
    $form.find("#registratorType").attr("size", "25");
    $form.find("#id").attr("readonly", "readonly");
    $form.find("#id").attr("size", "25");
    $form.find("#serial").attr("readonly", "readonly");
    $form.find("#serial").attr("size", "25");
    $form.find("#duration").attr("size", "25");
    $form.find("#stoppingDuration").attr("size", "25");
    $form.find("#speeddata").removeAttr("disabled");

最新のクロムでパフォーマンスをテストしたところ、衝撃を受けました! 私のアプローチは3〜4回で負けていました。私の関数は 42 ミリ秒で実行されましたが、古い関数は 12 ～ 14 ミリ秒でした。私の方法には本当に価値がありますか？私のアプローチはアンチパターンですか？お願い助けて！

4

2 に答える 2

2

すべてのセレクターは id セレクターであるため、かなり高速です (document.getElementByIdはO(1)テーブル ルックアップです)。ただし、それらを特定の親要素に制限するとfind()、DOM ツリー検索が必要になり、明らかに速度が低下します。

「将来の参照のためにDOMオブジェクトをキャッシュする」は、同じセレクターを2回適用しないことを意味します。一度実行して、変数に保存します（ で行ったように$form）。だから代わりに

    $("#id").attr("readonly", "readonly");
    $("#id").attr("size", "25");

そのはず

    var $id = $("#id");
    $id.attr("readonly", "readonly");
    $id.attr("size", "25");

jQuery は 連鎖を許可するため、上記は次のようにも記述できます。

    $("#id").attr("readonly", "readonly").attr("size", "25");

prop()ところで、実際にはの代わりにattr()使用したいようで、これらの関数は値マップも受け入れます。

    $("#id").prop({readonly: true, size: 25});
于 2013-02-06T10:13:49.537 に答える
1

IDで要素を見つけているからです。すべてのブラウザには getElementById があり、要素を取得する最も効果的な方法です。

クラスで識別される要素でベンチマークを再試行してください。

于 2013-02-06T10:14:03.263 に答える