2

次のシナリオを検討してください。

<h1>Hello!</h1>
<script src="cool1.js"></script>
<script src="cool2.js"></script>
<h2>Goodbye!</h2>
<img src="boat.gif" alt="Big Boat">

ダウンロードされているときは、それが表示されているcool1.jsことを意味しますが、ダウンロードして実行するまで表示されませんか? いつダウンロードされますか (JavaScript はシングル スレッドであるため、実行が完了するまで待機する必要があります)。ダウンロードして表示するのはいつですか？Hello!Goodbye!cool1.js
cool2.jscool1.jsboat.gif

ここで著者は次のように主張します。

ブラウザーは特定の時点で JavaScript を実行したり、UI をレンダリングしたりすることしかできません。ページがブラウザーにダウンロードされるときに何が起こるかを考えてみてください。ページがダウンロードされたときにレンダリングが開始され、タグが検出されました。その時点で、JavaScript が UI に影響を与える可能性があるため、ブラウザーはレンダリングを続行できなくなり、待機します。

JavaScript はそれより前のコンテンツを変更できなかったので、これはわかりませんか?
例えばcool1.js中身<h1>を「Good day」に変えたら？

4

2 に答える 2

1

JFriend00 には既に優れた回答がありますが、質問の他の部分に答えるために私の回答を残しておきます。

外部 JavaScript がダウンロードされるまで、ページのレンダリングが停止し、人々が待つのをあきらめてトラフィックを失う可能性があります。

代わりに、リモート Javascript を非同期的にロードして、ページのレンダリングを続行し、コードをバックグラウンドでダウンロードすることをお勧めします。

重要なポイントは、特定のスクリプトがいつ必要になるかを考え、それに応じてそれらを配置/ロード/実行する必要があるということです (また、ページがレンダリングされるまで外部ファイルの関数の実行を延期する必要がある場合があるため、async ではこれがより難しくなる可能性があります。これを処理する方法の例については、このページを参照してください)。

于 2013-04-18T23:18:02.850 に答える