2

多くのDOM操作を行う私のJQueryスクリプトは、Chromeでスムーズに動作し（予想）、Safariで非常にうまく動作し、Firefoxではそれほど悪くはありません。

InternetExplorerについて話しましょう...

DOM操作を少し行うメソッドを実行すると、次のコードにより、処理中にページが約1秒間白くなります。速度にかなり影響を与えている行はコメントされています：

function AutoAssignImage(sourceImageDiv, destinationHolder) {
    // Check nothing is assigned
    if (!$(destinationHolder).has('.upload-pane-item').length) {
        sourceImageDiv.find('.quickAssign').hide();
        sourceImageDiv.find('.unassign').show();
        sourceImageDiv.css({ border: "0px" });

        $(destinationHolder).html(sourceImageDiv); // Causes blank screen while moves dom element

        // Update Quick Assign buttons
        updateQuickAssignButtons();
    }
}

function updateQuickAssignButtons() {
    quickAssign = "string gets generated here but is very quick";

    $('#' + uploadPaneId + ' .quickAssignLinks').html(quickAssign); // Very slow

}

最大500個の要素で使用されるHTMLを更新する必要があります。最初のいくつかの要素をほぼ瞬時に更新し、ユーザーがわずかな遅延に気付かないうちに他の要素を処理できると考えて、ループを使用してみました。JQueryループを使用してみたところ.each()、違いは見られず、約1秒間白い画面が表示されました。

編集： 一般的に設定されるHTMLは次のようなものです：

<a class="assignLink" href="#">1</a>
<a class="assignLink" href="#">2</a>
<a class="assignLink" href="#">3</a>
<a class="assignLink" href="#">4</a>
<a class="assignLink" href="#">5</a>
<a class="assignLink" href="#">6</a><br />
<a class="assignLink" href="#">7</a>
<a class="assignLink" href="#">8</a>
<a class="assignLink" href="#">9</a>
<a class="assignLink" href="#">10</a>
<a class="assignLink" href="#">11</a>
<a class="assignLink" href="#">12</a>

キャッシング

何らかの形式のキャッシュを有効にするために、要素を変数に格納しようとしました

var quickAssignElements; // top of js file
quickAssignElements = $('#' + uploadPaneId + ' .quickAssignLinks'); // called when DOM updates

$(quickAssignElements).html(quickAssign); // Calls this when it needs to update html on elements

これも違いはないようです。

遅延を最小限に抑える/ウィンドウが空白になるのを防ぐための代替アプローチを知っている人はいますか？

4

1 に答える 1

1

ページでどの呼び出しが遅いかを確認する必要があります。である$('#MyDiv .myClass')場合もあれば.html('...')、 である場合もあるし、その両方である場合もあります。それが最初のものだけである場合、簡単な解決策は、それらの要素を一度だけ選択し、次にそれらを呼び出す必要があるときにアクセスできる変数に格納することです.html()。jQuery-talk では、これを通常「キャッシング」と呼びます。

セレクタ自体をより効率的にする方法もいくつかあります。

編集

マークアップがどのように見えるかを示していただいたので、このセレクター メソッドの方が高速であることはほぼ保証できます。

$('#MyDiv').find('a.myClass');
于 2011-04-06T12:46:39.900 に答える