</body>
推奨されるように、終了タグの直前にjQueryを配置したい。しかし、コンテンツ管理システムを使用しているため、jQuery を必要とするインライン スクリプトは body タグの終了前に実行されます。
私の質問は次のとおりです:jQueryベースのスクリプトを配列に収集し、jQueryがロードされたときにドキュメントの最後でそれらを実行する価値はありますか? (例)または単にjQueryをheadセクションにロードしますか?
</body>
推奨されるように、終了タグの直前にjQueryを配置したい。しかし、コンテンツ管理システムを使用しているため、jQuery を必要とするインライン スクリプトは body タグの終了前に実行されます。
私の質問は次のとおりです:jQueryベースのスクリプトを配列に収集し、jQueryがロードされたときにドキュメントの最後でそれらを実行する価値はありますか? (例)または単にjQueryをheadセクションにロードしますか?
ここで説明するアプローチを採用できます
アイデアはq
、ヘッダーにすぐにグローバル変数を作成し、一時的なwindow.$
関数を使用して、依存するすべてのコード/関数/プラグインを収集することです。
window.q=[];
window.$=function(f){
q.push(f);
};
jQueryをロードした後、すべての関数を実際の関数に渡します$.ready
。
$.each(q,function(index,f){
$(f)
});
このようにして、jQuerylibを含める前にjqueryコードを安全に含めることができます
これがjQueryをヘッドにロードするよりも優れている場合は、q
一時関数にプッシュする必要のあるコードの量によって異なります。
セクションに配置されたjQueryに<head>
は、単一のブロッキングが必要ですscript
。ただし、ドキュメント内のいたるところに挿入するコードが多い場合は、レンダリングプロセスを停止する巨大なブロッキングスクリプトがたくさんある可能性があります。
それどころか、dom readyイベントの後に多くのスクリプトをロードすると、ページのロードが簡単に速くなる可能性があるため、このアプローチの方が優れており、利点がより明確になります。
したがって、すべてのコードとすべてのページに有効な決定的な答えはありません。この種の手法が一般的に優れていて好ましい場合でも(可能な限り後でスクリプトを実行できるという利点があるため)、いくつか作成する必要があります。両方のアプローチでテストし、ロードとレンダリングの時間を調べます。冒頭の記事では、パフォーマンスについていくらか考慮していますが、stackoverflowがそれを使用しなかった理由についても説明しています。
ヘッドにjQueryをロードするだけで、最初のロード後にキャッシュされ、その後何も遅くなりません。
それ以外はすべてやり過ぎのように聞こえますが、パフォーマンスの向上が余分な作業を正当化するほど重要になるかどうかはわかりません.
また、ページの読み込みが遅く、下部に JavaScript がある場合、読み込みに時間がかかることがあります。つまり、JavaScript のないビジュアルが表示され、ユーザーに優れたエクスペリエンスを提供できない可能性があります。