3

ページ上の JavaScript ファイルの読み込みによって速度が低下していると確信している Web サイトのパフォーマンスをプロファイリングしようとしています。

同じ JavaScript ファイルがページに複数含まれており、タグが下部に含まれて<script />いるのではなく、ページ全体に散らばっています。

私が思ったように、FireBug の [Net] タブを見ると、ほとんどの場合 (すべてではありません)、JavaScript がロードされているときは、他のファイルは要求されません。ブラウザーは、JavaScript の読み込みが完了するまで待機します。

ただし、いくつかの例外があります。JavaScript が読み込まれる場合がいくつかありますが、同時に、他の JavaScript ファイルや画像など、他のリソースが読み込まれるように見えます。

私はいつも、JavaScript がページ上の他のリソースの読み込みをブロックしていると考えていました。この考えは間違っていますか、それともこの動作はブラウザまたはブラウザのバージョンによって異なりますか?

更新:
スクリプトの読み込みが他のリソースの読み込みをブロックする方法を説明した人には、私はすでにこれを認識しています。私の質問は、スクリプトが他のリソースの読み込みをブロックしない理由です。Firebug は、一部の JavaScript ファイルが他のリソースの読み込みをブロックしないことを示しています。なぜこれが起こるのか知りたいです。

4

10 に答える 10

7

Javascriptリソースリクエストは確かにブロックされていますが、これを回避する方法があります（つまり、DOMが先頭にスクリプトタグを挿入し、AJAXリクエスト）。ページを自分で見なくても、ここで何が起こっている可能性があります。

同じJSリソースの複数のコピーを含めることは非常に悪いですが、必ずしも致命的ではありません。これは、別々のチームの作業から追加された可能性のある大規模なサイト、または単なる古い悪いコーディング、計画、または保守に典型的です。

スクリプトを本文の下部に配置するというyahooの推奨事項に関しては、これにより、知覚される応答時間が改善され、実際の読み込み時間がある程度改善される可能性があります（以前のすべてのリソースが最初に非同期化されるため）が、これほど効果的ではありません。非ブロッキング要求として（ただし、技術的能力の高い障壁があります）。

ここでノンブロッキングJSのかなりまともな議論。

于 2009-06-04T14:23:22.633 に答える
2

Firebug がブラウザー内で何が起こっているかを正確に反映しているかどうかは、完全にはわかりません。リソースの読み込みのタイミングは良いようですが、何が起こっているのかを正確に反映しているのかどうかはわかりません. HTTP スニファー/プロキシ アプリケーションを使用して、ブラウザーからの実際の HTTP 要求を監視することで、うまくいきました。私は Fiddler を使用していますが、他にもツールがあることは知っています。

要するに、これはツールの問題であり、リソースが実際にどのようにロードされているかではありません...少なくとも除外する価値があります.

于 2009-06-09T16:08:52.907 に答える
1

Firefox3.0.10とFirebug1.3.3は最新リリースであるため、これらを使用していると思います。

Firebug 1.4ベータ版では、ネットタブで多くの改善が行われていますが、Firefox3.5が必要です。Firefox 3.0でテストする場合は、以前の1.4アルファバージョンのいずれかを使用してください。しかし、改善しても、結果を理解するのに苦労しています。Firebugの開発者が、ダウンロードの各部分の意味をより正確に文書化してくれることを願っています。接続後にキューイングが行われる理由は私にはわかりません。

私の結論は、Firebugの結果を信頼することではなく、WebPageTestを使用することになりました。これはAOLから来て驚くほど良かったです;-)

また、JavaScriptと同時にどのようなリソースが読み込まれていますか？同時に読み込まれるリソースをトレースして、css / iframe/html-ajaxで参照されているかどうかを確認してください。他に何もロードされない理由は、ブラウザがスクリプトタグを（延期せずに）表示すると、現在のHTMLの解析を停止するためだと思います。HTMLの解析を続行できないため、これ以上要求することはありません。

あなたが話しているページへのリンクを提供できれば。それは誰もがより正確な答えを与えるのに役立ちます。

于 2009-06-09T22:48:11.997 に答える
0

コンテンツはダウンロードされていると思いますが、JavaScriptの読み込みが完了するまでレンダリングされません。

これは、サーバーのPOVからはそれほど重要ではありませんが、ユーザーにとっては速度に大きな違いをもたらす可能性があります。

于 2009-06-04T12:40:24.167 に答える
0

他の人が言ったように、1つの非ブロッキング方法は<script>ページにタグを挿入することですhead。

ただし、firefoxはロードさ<script>れたを並行して実行することもできます。以下の2行をコピーします。

http://streetpc.free.fr/tmp/test.js
http://streetpc.free.fr/tmp/test2.js

次に、このページに移動し、入力テキストエリアに貼り付けて、[JavaScript]、[スクリプトの読み込み]の順にクリックします（これにより、<script>子要素が作成され、に追加されますhead）。

FFで試してみてください。「test2ok」が表示されたら、ダイアログボックスを移動して「testok」が表示されます。他のブラウザでは、「test ok」（背後に他のダイアログはありません）、次に「test2 ok」が表示されます（Safari 4を除き、テスト前にtes2が表示されます）。

于 2009-06-10T15:59:11.540 に答える
0

Firefox 3は、Webページの読み込み中のパフォーマンスを向上させるために、接続並列処理機能を導入しました。これが問題の原因であると思います;）

画像、Javascriptファイル、フレーム、データフィードなど、さまざまなオブジェクトが含まれているWebページを開くと、ブラウザはパフォーマンスを向上させるために、それらのいくつかを一度にダウンロードしようとします。

これは、それに関するZDNETのブログ投稿です。

于 2009-06-16T04:48:54.580 に答える
0

考えてみれば、コンテンツのレンダリングを続行するには、タグの処理を終了する必要があります。タグが document.write やその他の素晴らしくばかげたものを使用していたらどうなるでしょうか? スクリプト タグ内の何かがページの実行を終了するまで、ページに何が表示されるかはわかりません。

于 2009-06-04T14:12:21.970 に答える
0

他の人が述べているように、スクリプトはおそらく DOM インジェクションによって他のリソースをロードしています。

Script.aculo.us は実際にこれを行うことで、その子コンポーネント/スクリプト自体をロードします --<script>それらの DOM に他のタグを挿入します。

これが当てはまるかどうかを確認したい場合は、Firebug のプロファイラーを使用して、スクリプトが何を行っているかを調べてください。

于 2009-06-10T01:51:18.367 に答える
0

ブラウザーは通常、1 つのドメインに対して一定数の接続を開きます。
そのため、同じドメインからすべてのスクリプトをロードする場合、通常は 1 つずつロードします。
ただし、これらのスクリプトが複数のドメインから読み込まれる場合、それらは並行して読み込まれます。

于 2009-06-09T16:14:07.713 に答える
0

JavaScript のダウンロード中にブラウザがブロックされる理由は、スクリプト内に DOM ノードが作成されるとブラウザが疑っているためです。

たとえば、スクリプト内に「dcoument.write()」呼び出しがある場合があります。

スクリプトに DOM 生成が含まれていないことをブラウザに知らせる方法は、「defer」属性を使用することです。そう、

<script src="script.js" type="text/javascript" defer="defer"></script>

ブラウザがリクエストの並列化を継続できるようにする必要があります。

参考文献:

http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer

http://www.websiteoptimization.com/speed/tweak/defer/

于 2009-06-09T21:25:19.450 に答える