document.ready内のajax呼び出しブラウザをブロックする

私はdocument.ready内でjqueryを使ってajax.getを実行しようとしています。しかし、取得は、ブラウザをブロックするようだ。

a dummy example : http://jsfiddle.net/gauravshah/HpfXL/

私はdocument.readyを取得しようとしていますが、結果はサーバー上で生成されるのに約15-17秒かかるでしょう。だから、ブラウザはブロックされているようだ。例えば、背景画像はアニメーション化されません。

第2に、IE8では、要求が受信されるまでブラウザがハングします。

同様の質問:単純なAJAX呼び出しがブロックされているようです コールの遅延を使用することを提案しますが、なぜ遅延を使用するのですか?私は解決策が見つからない。

私の実際のコード:(もしそれが助けになるかどうかわからない)

$(document).ready(function(){
feat_id = "feat-2222"
$.post('/features/creator/get_existing/'+feat_id, {
        "url":url,
        'path':path,
        'parentURL':parentURL,
        'index':index
    },function(data){
        var new_id = $(data).attr('id')
        $(data).find('.featureLocation').html($(data).find('.featureLocation').html());
        $(obj).replaceWith(data)
    })
});
1
デフォルトではajaxの呼び出しは非同期です...私はgetに時間を要するデータの読み込みをシミュレートします。 getはドメイン外のリクエストを実行できないため、私は約40のajaxリクエストfom jsfiddleを呼び出しています。サーバー上の私の実際のスクリプトは計算されるために約15秒かかります。だから、要求を40回して少なくとも2〜3秒をシミュレートしたい
追加された 著者 Gaurav Shah,
私は自分のコードを追加しました。それは役に立ちますか?
追加された 著者 Gaurav Shah,
downvoteの説明?
追加された 著者 Gaurav Shah,
私は似たような質問と同じ解決策に着きました。
追加された 著者 Gaurav Shah,
あなたのajaxコールは同期か非同期ですか?あなたのjsFiddleは40の同時Ajaxコールを持っています - それは何ですか?
追加された 著者 jfriend00,
私の考えでは、さまざまな問題が出現するため、これは非常に有用なシミュレーションではありません(一度に開くことができる接続の最大数など)。あなたのAjax呼び出しが本当に非同期で、応答の処理に時間がかからず、応答を待っている間にループしていなければ、ブラウザは完全にライブ状態になるはずですが、アイデアを提供するためには実際のコードを見る必要があります。私はあなたの本当のコードをあなたの本当のコードと共通して何もないものではないことを私たちに示すことをお勧めします。
追加された 著者 jfriend00,

2 答え

同様の質問に投稿されたのと同じ解決策になった

jQuery(document).ready(function() {
  setTimeout(function() {
   $.getJSON("veryLongRequest", function(json) {
   alert("JSON Result: " + json[0].id);});
  }, 500);//You may need to adjust this to a longer delay.
});

単純なAJAX呼び出しがブロックされているようです

1
追加された

私はちょうど "重い"クエリよりもここで少し起こっていると思う。 JavaScriptのパフォーマンスを向上させるには、この記事をご覧ください。 Javascript自体は、特にjQueryのようなライブラリをロードするときに、ブラウザにとって「大量に」なる可能性があります。あなたが提案しているようなクエリを追加すると、アプリやウェブサイトの応答時間が知覚され、ユーザにとって損なわれる可能性があります。

効果がないとjavascriptファイルがHTTP負荷を詰まらせる可能性があることは間違いありません。javascriptファイルが広く使われています。必要なものだけをロードしてください。縮小されたファイルのみを読み込みます。可能であれば組み合わせる。可能であれば、 CDNから読み込みます。最後に、15秒のクエリが表示されますジレンマ....クエリが実行されるまで実行され、情報が表示されます。特に重いクエリを実行している場合は、ブラウザが渋滞するか、読み込むべきものがあるまで待つだけです。クエリを攻撃し、パターン自体を表示することを検討してください。

上記の記事の教えに基づいてJavascriptが効果的に呼び出されたことを確認したら、1分間停止してAjaxのクエリを検討します。最も効率的なサーバー側のクエリが可能ですか? サーバー側、パイプライン型のデータテーブルのようなデータの読み込みを中断させる方法はありますか?あなたのユーザーが合理的に見ることができる情報をロードするだけでよいのですが、別のajaxed getを実行して準備ができたら詳細な情報が得られ、応答時間が長くなります。

また、私は上記のようにドキュメントレディDOMローダーをほぼ常に使用していますが、一度だけ試してみてください.....いくつかのテストケースを実行してください。 IE 6が大混乱を起こしていたとき、Domローダーは素晴らしかったです。ほとんどの新しいブラウザでは、読み込みの問題はほとんど解決されています。

私は、数百万のレコードを定期的に扱うSAASアプリケーションのUI開発者です。だから、これは私の毎日の難点です。私は、「一度に1つずつ」のデータを見ると、最も効果的なインターフェイスを最も効果的に作り出すことが分かっています。

0
追加された
私の実際のシナリオでは、私はちょうど約100文字ですサーバーからのテキスト文字列をロード..サーバー部分の計算だけ重いです..データの量
追加された 著者 Gaurav Shah,
私は計算を変更することはできませんし、それはいいです..私のユーザーはそれについて知っていて、それは助けられません。はい、私はすぐにダミーのテキストを返そうとし、その後、ブラウザは完全にうまく応答するようです。
追加された 著者 Gaurav Shah,
@adeneoどのようにして10秒かかる単一のダミー取得リクエストを作成するのですか?私は自分のコードを追加しましたが、違いがありますか?
追加された 著者 Gaurav Shah,
また、40個のjsファイルをロードしていません。あなたは40個のファイルをロードしています...(jsを解析したり、何もしません)
追加された 著者 Gaurav Shah,
問題がサーバー側で計算され、$ .getを通って渡されるものが100文字の文字列である場合、なぜたくさんのjsファイルをロードしようとしているのか全く無用な例を提示していますか?我々はすべての40 jsファイルを読み込もうとしていることがブラウザを数秒間詰まらせることは知っていますか?
追加された 著者 adeneo,
理解可能ですが、UIの世界で15秒に関係なく、永遠です。何があっても、それは弱いつながりになるでしょう。エキゾチックな参加ですか?スピードの指標にすることはできますか?クエリ自体のパフォーマンスを調整するのはどうですか?代わりに、計算をしないテスト関数を書くだけで、文字列を吐き出す.....遅延ロードはまだ問題ですか?
追加された 著者 bpeterson76,
私はあなた自身の質問にちょうど答えたと思う...私は非常に複雑なレポートで同様の問題を抱えており、それはちょうど非常に複雑なクライアントデータのためにそこに座っているようだ。私はそれについてはほとんどできませんが、幸運なことにそれは1人の内部管理者のためだけです。私はそれを普通の消費のために門の外に出さないことを...... ......
追加された 著者 bpeterson76,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript