本文の後ろにスクリプトを置くためのページ読み込み速度に役立つのですか？

私はbad practice, but usually harmlessだと読んで、<body>の後にページの<script>のほとんどを配置しました。結果は大きいとは思われないので、私はそれを試す魅力的な理由があるかどうか疑問に思っています。本文の後ろにスクリプトを置くためのページ読み込み速度に役立つのですか？

私の質問は：pre-body javascriptは、javascriptの残りの部分が本体の後に来ると速く実行されますか？あるいは、別の言い方をすると、すべてのスクリプトを頭の中に置いた場合よりも読み込み速度が遅いという偽の文書ですか？

<html> 
    <head> 
     <script src="urgent-stuff.js"/> 
    </head> 
    <body> 
     <p>Lots of great content</p> 
    </body> 
    <script src="not-so-urgent-stuff.js"> 
</html>

注：私は自分のサイト（=モバイルアプリ）にjQueryMobileを使用しています。このフレームワークは、サイト全体を1つのドキュメントに置き、そのページが表示される前に、主に要素の「データ」属性に基づいてスタイルとインタラクションを使用して各ページの基本HTMLを上書きします。 jQMのjavascriptは明らかに<頭の中に入っている緊急のものの一部です。 jQueryMobileには、「pageinit」という独自の「開始」イベントがあります。このイベントは、通常のjQueryの「ドキュメント準備完了」よりも前に発生します。

出典

2012-03-27 Wytze

私はそれがページの読み込み速度を下げてすべてのスクリプトを下に置くことを読んだが、実際には私は目立った速度の違いを見ていない。 – Brian

DomReadyが発生するまでドキュメント自体は「高速」に読み込まれませんが、ドキュメントとアセットはnot-so-urgent-stuff.jsより先に読み込まれ、読み込み速度が速くなり、すぐにコンテンツを利用できるように見えます。ブラウザがリソースを取得し、他のコンテンツと直列にそれを実行しなければなりませんあなたは<script>タグからスクリプトを呼び出す任意の時間 -

ブラウザにコンテンツをロードする最速の方法は、連続したスクリプトをロードして、ブラウザをブロックすることはありません。

これはYslowなどのツールで視覚化できます。 Yslow自体は、ドキュメント内のコンテンツの配置を最適化する方法に関する素晴らしいリソースを提供します。

http://developer.yahoo.com/yslow/

http://developer.yahoo.com/performance/rules.html

編集：

これは、パフォーマンスルールは同じくらいの負荷を延期することで、この関連のスタックスレッドUnobtrusive JavaScript: <script> at the top or the bottom of the HTML code?

出典

2012-03-27 13:25:38 philwinkle

プログレッシブレンダリングは我々が目指したいものである。 –

でかなり好評で覆われていましたあなたはできるだけjs。

jsをダウンロードする古いブラウザでは、ダウンロード中に他のファイルが並行してダウンロードされたり、UIがブロックされたりするのを防ぐことができます。

最新のブラウザでも、jsの解析と実行はレンダリングを停止します。

jsを下に移動する目的の1つは、このUIスレッドの作業を遅らせることです。また、暴落した第三者がページの読み込みを妨害するのを防ぎます。

@soudersはこのトピックについて非常に多くのことを書いています。

出典

2012-03-27 18:00:28

本文の後ろにスクリプトを置くためのページ読み込み速度に役立つのですか？

答えて

関連する問題