7

ページを最適化していますが、これらの結果の違いがわかりません（最初のページの方が明らかに高速ですが、ページのレンダリングが少し遅くなるかどうかはわかりません）。

これにより、リクエストができるだけ早く開始され、ドキュメントのDOMが変更されます。

<script>
$.ajax({
    url: '/some-url',
    success: function() {
        $(document).ready(function() {
            // do something
        });
    }
});
</script>
</body>

これは、ドキュメントの準備ができたときにリクエストを開始します。

<script>
$(document).ready(function() {
    $.ajax({
        url: '/some-url',
        success: function() {
            // do something
        }
    });
});
</script>
</body>

どちらがお勧めですか？

4

3 に答える 3

10

ここでのベストプラクティスは、できるだけ早くAjaxリクエストを開始することですが、ドキュメントの準備ができたときにのみDOMの変更を開始します（ DOMContentLoaded）。これを行うには、jQuerys拡張jXHRオブジェクトと接続されているjQuerysDeferredオブジェクトを使用できます。

<script>
    var req      = $.ajax({}),
        docReady = jQuery.Deferred();

    $(function() {
        docReady.resolve();
    });

    $.when( req, docReady ).done(function( data ) {
        // read the returned data and modify the DOM
    });
</script>

DOMの準備ができるまで、要求の開始を待つのは時間の無駄です。XHRリクエストには、DOMで何が起こっているかについてのビジネスや関心はありません。

これら2つのことを完全に切り離す方が理にかなっています。何らかの理由でDOMの準備が整うまでに非常に長い時間が必要な場合でも、HTTPリクエストを実行してデータを収集するために時間を無駄にすることはありません。逆に、リクエストが非常に遅い場合は、時間も無駄になります。つまり、現在のスニペットは次のようになります

DOM ready    
           -> XHR request    
                          -> Do something useful

私の例は

DOM ready    
XHR request
            -> Do something useful as soon as the DOM and request are ready
于 2012-11-29T22:01:56.667 に答える
1

DOMにまったく依存しないため$.ajax、できるだけ早く呼び出すことができない理由はありません。その場合、私はそれを<head>セクションに入れ、依存するスクリプト/スクリプトファイル（少なくともjQueryライブラリを意味する）が完了するとすぐにそれを呼び出します。AJAXリクエストをより早く実行するということは、応答がより早く返される可能性があることを意味します。実際に発生するわけではないかもしれませんが、それは重要ではありません。

内部でDOMの準備ができていることを確認するsuccess必要があります。これは、コードを実行するための最も速い方法です。を使用$.when( req ).done(function () {})すると、さらに2つのjQueryメソッド呼び出しが作成され、successコードの実行が大幅に遅延する場合と遅延しない場合があります。遅延は発生しますが、おそらく重要ではありません。

また、メソッドで使用document.readyする例では、DOMの準備ができてすぐに実行できる可能性があります（DOMが完全に読み込まれる前にAJAXリクエストが完了する場合、これは予想外です）。の直後に実行されるjAndyの例では、準備ができているドキュメントのイベントハンドラーをバインドすることが保証されています...つまり、ドキュメントを保存し（DOMを後で準備できるようにする）、イベントが発生したときに後で検索する必要があります、および実行されます。繰り返しますが、違いは可能性と保証です...そしてすべてはおそらく重要ではありません（2番目の例を使用しない限り）。successdocument.ready$.ajax

于 2012-11-29T22:46:36.293 に答える
-2

この簡単な例では、両方のバージョンで実行できます。どちらが良いかは、ページや他のスクリプトによって異なります。スクリプトがもう少し複雑で、ページからフェッチする必要があるajax-requestにデータを渡す必要があり、その時点でページの準備ができていない場合は、エラーが発生します。

もう1つのことは、ページ上のスクリプトは処理中にブラウザをブロックするため、ドキュメントの準備ができていないより複雑なコードは、ページレンダリングプロセスの一時停止につながる可能性があるということです。ほとんどの場合、私はブラウザにすべてのHTML、CSS、およびJSをロードさせ、その後、プログレッシブエンハンスメントと追加コンテンツのロードを開始することを好みます。

しかし、繰り返しになりますが、この単純なケースでは、大きな違いは見られません。

于 2012-11-29T22:08:34.987 に答える