0

ほとんどのページ<script>の<body>. 結果はそれほど大きくないように見えるので、試してみる説得力のある理由があるかどうか疑問に思っています: ページの読み込み速度.

私の質問は、javascript の残りの部分が body の後に来る場合、pre-body 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 を、そのページが表示される前に要素の「data-」属性に主に基づいたスタイルとインタラクションで人形化します。jQM javascript は明らかに、< head > に入る緊急のものの一部です。jQueryMobile には、「pageinit」と呼ばれる独自の「開始」イベントがあり、通常の jQuery の通常の「ドキュメント準備完了」よりもかなり前に起動すると言われています。

4

2 に答える 2

4

ドキュメント自体は、起動するまで「速く」ロードされません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 bottom of HTML code? でかなり好意的な反応が見られました。

于 2012-03-27T13:25:38.787 に答える
0

パフォーマンス ルールは、できるだけ多くの js の読み込みを遅らせることです。

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

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

js を一番下に移動する目的の 1 つは、この UI スレッドの作業を遅らせることです。また、壊れたサードパーティがページの読み込みを台無しにするのを防ぎます.

@sounders は、このトピックについてかなり多くのことを書いています。

于 2012-03-27T18:00:28.673 に答える