5

やりたいこと: ページ上の (特定の種類の) 類似要素をすべてグループ化して、後で繰り返し処理できるオブジェクトにするか、その中のすべての要素に大幅な変更を適用します。

私のコードは与えられたタスクを達成することに成功していますが、要素の数が 200 ～ 300 以上になると、パフォーマンスが大幅に低下し、ユーザーが気付きました。問題のあるコード行を分離しました。同じ問題を達成する別の方法があるかどうかを知りたいです。

add() 関数は、私がそれらの周りに配置したタイマーに基づいて、問題のある操作のようです。最初は操作の実行に必要な時間は 0.001 ですが、要素の数が 300 に達するまで増加し、追加の要素ごとに約 0.1 秒かかり、速度が低下し続けます。

jQuery のパフォーマンス向上機能について調査(およびその他) し、そのうちのいくつか (つまり 3 つ) を実装しましたが、意味のあるパフォーマンスの向上は得られませんでした。驚くべきことに、このコードは Firefox (add() への 300 回以上の呼び出し) では 1 秒 (!) 以内に実行されますが、Chrome と IE では約 10 ～ 20 倍以上かかります...

これが私のコードです：

rowsToChange = $([]);
// Grab all the ids greater than whichever one I'm currently looking at:
var arr = $.makeArray($("[id^=stackLocatorLinkFillUp]:gt("+(uniqueID-1)+")"));
for (var i=0; i<arr.length; i++) {
    $this = arr[i];
    // <<< VARIOUS CONDITIONALS that make this as selective as possible REMOVED >>>
    startTimer = new Date().getTime();
    // **************************
    // PROBLEMATIC LINE FOLLOWS when 200+ records:
    rowsToChange = rowsToChange.add($this);
    // Grows from .001 to .1xx after 300 iterations
    console.log("innertiming:"+(new Date().getTime() - startTimer)/1000);
    // **************************
}

最終結果は次のようになります (Chrome インスペクター経由):

[<div style=​"display:​none" id=​"stackLocatorLinkFillUp1">​itemType=BOUND&ccLocale=PERIODICAL​&lt;/div>​, 
<div style=​"display:​none" id=​"stackLocatorLinkFillUp2">​itemType=BOUND&amp;ccLocale=PERIODICAL​&lt;/div>​,
...
]

最終的には、これらすべてを次のように処理します (シンプルさが気に入っています!)。

var superlink = "...new <a> goodness to display for all elements...";
rowsToChange.html(superlink).css("display","block");

これは有効な解決策のように見えましたが (別の追加方法ですか? )、オブジェクトのリストをまとめて収集し続けて、最後の行が魔法のように機能するようにしたいと思います。

(私は、以下が真実ではないことを指摘されています -- 連結に関して; ありがとう '私はそうではありません')

add() 操作は文字列を連結する必要があるようです。これは、他の人が直面する主な問題の 1 つであるように思われるからです。しかし、私の add() ステートメントを += に変換してもうまくいかないようです。

これをチェックしていただきありがとうございます。

Chrome: 18.0.1025.142 m Firefox: 11.0 IE: 8.0.7600.16385

4

2 に答える 2

0

forDCoder は、ループを使用している場合に情報を適切にマージする方法を示しています。ただし、ここに来て.each()ループを使用している場合は、次のものを使用してください。

主な違いは、 の構造によって括弧が不要/必要になることです'this'。また、ネイティブの JavaScriptループよりも少なくともわずかに遅いこと.each()が一般的に認められているようです。( 2009 年からの証拠) (上記の質問からのタイミング test_copied )for

var $this, rowsToChange = $([]);
// slower than a for loop
$("[id^=stackLocatorLinkFillUp]:gt("+(uniqueID-1)+")").each( function() {
    // If statements <removed> that decide whether or not to include in the new container
    $this = $(this); // probably unnecessary under most situations
    rowsToChange = jQuery.merge(rowsToChange, $this);
});

削除された if ステートメントによって決定された新しいサブグループのすべての部分を操作します。

rowsToChange.html("...");

質問を閲覧したり、時間を割いて回答したり、投票したりしたすべての人に感謝します!

于 2012-04-06T18:14:22.957 に答える