私は、パフォーマンス上の懸念から Ajax 機能に大きく依存している Web アプリケーションを開発しています。実行時間の長いモジュールのロード中に、各ページの一部を利用できるようにしようとしています。
問題は、Ajax リクエストをできるだけ早く (ドキュメントの先頭で) 開始したいということです。この部分は正常に機能します。この問題はまれですが、Ajax データをロードしたい領域がページに表示される前に、Ajax 呼び出しが戻ってきます。これにより、データがロードされません。
この問題を回避するために、各コンテナーの下でスクリプト タグを使用し始めました。これは、JQuery promise を解決して、その領域が利用可能であることをコードに知らせます。
編集:データが利用可能になり次第(完全なドキュメントロードの前に)、データを領域にロードしたいと思います。
現在の疑似コードは次のようになります。
<head>
<script>
var areaAvailablePromise = new $.Deferred();
$.when(areaAvailablePromise, myAjaxFunction()).then(function(){
// load data into the element.
});
</script>
</head>
<!-- much later in the document -->
<div class="divIWantToLoadAjaxContentInto"></div>
<script>
areaAvailablePromise.resolve();
</script>
私の質問は次のとおりです。この状況を処理するためのより良い方法はありますか? インライン スクリプトがブロックされ、パフォーマンスが低下することは誰もが知っています。また、マイクロ スクリプト タグが随所に散りばめられたコードが乱雑になることにもつながると思います。