スクリプトは、HTMLのロードが完了するまで実際には使用されません。スクリプトは、HTMLがロードされるまでDOMを変更できません。document.ready
DOMがロードされるのを待ちます。したがって、スタイルシートのような重要なものを保持する意味はありません。
ページの下部(</body>
タグの前)にスクリプトを配置し、できるだけ早くHTMLとCSSをユーザーに提供するようにします。ユーザーがスクリプトのダウンロードを待機している間、ユーザーが凝視するために空白のページを残すのではなく、ブラウザはページをより速くレンダリングしてからスクリプトをロードできます。
ブラウザがページを段階的にレンダリングしている間に、スクリプトタグ(外部Javascriptファイル)にヒットすると、すべてが停止します。スクリプトには優先権があります-スクリプトのダウンロード中、ブラウザは他のダウンロードを開始しません。つまり、画像とスタイルシート、およびその他の並行ダウンロードは、異なるホスト名であってもブロックされます。
ページの下部にスクリプトを配置することの欠点は、スクリプトが初期化される前にページがレンダリングされるため、特にクイッククリッカーがJavascriptの準備ができる前にサイトと対話できることです。
注:スタイルシートの場合は逆です。すべてのスタイルシートがダウンロードされ、ドキュメントに移動してHEAD
問題が解消されるまで、ページの下部近くのスタイルシートはプログレッシブレンダリングをブロックします。
ユーザーを待たせずにJavaScriptをロード<script/>
するには、DOM createElement()
メソッドを使用して要素を作成し、終了</body>
タグの直前にページに追加できます。
var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);
ブラウザは、新しい<script/>
要素が実際にページに追加されるまで、jsスクリプトのダウンロードを開始しません。ダウンロードが完了すると、ブラウザは含まれているJavascriptコードを解釈します。