3

document.readyイベントとwindow.loadイベントの違いを知っています。今、私のウェブサイトのパフォーマンスを改善するために、私はjavascriptのロードを延期することを計画しています。遅延読み込みコンテンツの例を数多く見てきました。

  1. 挿入<script src="...">し<link rel="stylesheet" href="...">てdocument.readyに
  2. 注入<script src="...">し<link rel="stylesheet" href="...">てwindow.loadに
  3. document.readyが起動され<script src="...">てから<link rel="stylesheet" href="...">数秒後に挿入します
  4. window.loadが起動されてから数秒後に注入<script src="...">します<link rel="stylesheet" href="...">

私の最初の質問は、これらの方法のどれが好ましいかということです。

私の2番目の質問は、アプローチ＃1を使用したときに正確に何が起こるかを知りたいということです。私のドキュメントにこのコンテンツがHTMLソースで定義されている場合：

<!-- head -->
<link>
<script>
<!-- body -->

そしてdocument.readyにこれらの追加のタグを挿入します：

<!-- head -->
<link>
<script>
<link class="lazyload">
<script class="lazyload">
<!-- body -->
<img><img><img><img><img>

私はブラウザが正確に何をするのか疑問に思っています：

  1. document.readyイベントはいつ正確に発生しますか
  2. どのような順序でファイルをダウンロードしますか
  3. 挿入されたファイルをダウンロードしようとしている間、ページをブロックしますか？
4

2 に答える 2

1

私が行う方法は、スクリプトをどこにでもロードし、ほとんどの場合、実行する関数のキューのような配列を保持し、それらのスクリプトを反復処理して実行する<head>直前です。必要に応じて</body>、すべてのスクリプトを最後に配置することもできますが、関連する場所の横にタグを配置する方が簡単で、再度見つけるのもはるかに簡単です。<body><script>

これが気に入らない場合は、タグの属性asyncとdefer属性を設定できます。<script>これは、スクリプトのダウンロードと実行が、リソースが利用可能になるまで待機することを意味します（ダウンロードが終了するページからの帯域幅など）。

特定のコードを実行する前に画像やその他のコンテンツをロードする必要がある場合は、を使用してwindow.loadください。それ以外の場合document.readyは問題ありません。

于 2011-10-30T13:37:59.883 に答える
0

これは役立つかもしれません：ブロックせずにスクリプトをロードしますが、それはいくつかの質問にしか答えません。

于 2011-10-30T11:58:41.340 に答える