0

私は、多額の JavaScript UI アプリケーションで深刻な遅延を削減しようとしています。私はコードを最適化する方法を読んでいて、学んだいくつかのことから、次のことを理解しています。

  1. $(element).each() は物事を遅くします
  2. 変数 (および HTML オブジェクト) はキャッシュする必要があります

これは、私のアプリケーションで頻繁に実行される関数内の既存のコードの一部です。

if($('.textbox').length > 0)
{   $(".textbox").each(function(){
             var parts = $(this).attr('id').split('_');
             // do some linear-time operations here with $this
            });
     });

$this = $(this)これまでのところ、の先頭に入れ.each()、 のみを使用する必要があることはわかっています$(this)。しかし、他に何ができますか？.each() を使用するより迅速な代替方法はありますか? クラスごと divにチェックアウトする必要があります。.textbox

4

2 に答える 2

1

背後で多くのコードを実行する jQuery を使用しています。最速の方法は、ネイティブ Javascript です。

本当の小さな最適化は get idfromthisです。これを使用することもできます（ネイティブJS）jQueryは多くの機能を実行します）：

var parts = this.id.split('_');

たとえば、
すべての要素をできるだけ速く取得します。この関数を使用して、クラス名で要素を取得できます。

if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);
        }

        return results;
    }
}

そしてループするコード：

var elements = getElementsByClassName(".textbox");
for(var i=0;i<elements.length;i++)
{
    var splitid = elements[i].id.split("_");
}
于 2013-02-16T12:50:26.097 に答える
1

しかし、他に何ができますか？

いくつかのこと：

  1. 空の jQuery オブジェクトの呼び出しは何もしないため、(表示されていない句がifない限り) ステートメントにはまったく意味がありません。それを除く。else.each

  2. $('.textbox')削除したくない場合は、 jQueryを呼び出すたびに DOM を照会する必要があるため、少なくとも DOM ルックアップの結果をキャッシュしてください。

  3. idは DOM 要素インスタンスに反映されたプロパティであるため$(this).attr("id").split('_')、複数の関数呼び出しとメモリ割り当てを使用することで回避できますthis.id.split('_')。

したがって、次のようになります。

$('.textbox').each(function() {
    var parts = this.id.split('_');
    // Do something with `parts`
});

または、else表示されていないものがあった場合:

var boxes = $('.textbox');
if (boxes.length) {
    boxes.each(function() {
        var part s= this.id.split('_');
        // ...
    });
}
else {
    // ...
}
于 2013-02-16T12:50:33.737 に答える