3

最近、このパターンを使用しているサイトをいくつか見ました。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <script> 
    $(function (){...do some stuff with plugins...});
  </script>

</head>
<body>


  <script src="myplugin1.js"></script>
  <script src="myplugin2.js"></script>
  <script src="myplugin3.js"></script>
</body>
</html>

これは私にいくつかのトラップを考えさせました：

Question #1

document.readyプラグイン (JS) が解析された後、実行されないイベントが発生します。

dom構造が完成したときに実行されます。(注意: 「すべてのリソースがダウンロードされたとき」とは言いませんでした!)

document. readyそのため、関数が完全にダウンロードされていないプラグイン変数を使用しようとする状況が発生する可能性があります。(エラーの原因になります)。

私は正しいですか？

Question #2 これにより 、スクリプトが場所を参照する前に「document.readyを使用しないでください」 （つまり、document.readyがそれらのスクリプト変数に依存している状況で）。

私は正しいですか？

psここで明らかに動作するwindow.loadについては話していませんが、もっと長く待たなければなりません。

4

2 に答える 2

2

ページ内のすべての種類のリソースについて考えると、多くはページ コンテンツとは別に読み込むことができます (画像やスタイルシートなど)。ページの外観を変更することはできますが、構造を実際に変更することはできないため、個別にロードしても安全です。

一方、スクリプトにはdocument.write、作品にレンチを投げ込むことができるこの小さなものがあります。次のような HTML があるとします。

Who would <script>document.write("<em>");</script>ever</em> write like this?

その後、ブラウザはそれをうまく解析します。document.write、そのように最上位で使用すると、その位置にHTMLを効果的に挿入して解析します。つまり、ページの残りの部分全体がスクリプト要素に依存しているため、ブラウザーはスクリプトが読み込まれるまでドキュメントを実際に移動することはできません。

スクリプトは HTML を変更して構造を変更する可能性があるため、ブラウザーは後でそれらをロードするのを待つことができません。その時点でロードする必要があり、スクリプトが変更する可能性があるため、DOM の準備がまだ整っているとは言えません。したがって、ブラウザは、すべてのスクリプトが実行されるまで DOM 準備完了イベントを遅らせる必要があります。これにより、依存コードを準備済みハンドラーの先頭に安全に配置できます。

ただし、あまり明確ではないため、そうしないことをお勧めします。

于 2013-04-12T05:23:58.947 に答える
1

相当するイベントは、最新のブラウザーで$(document).readyはDOMContentLoadedです (そして、同じシナリオに相当するレガシー ブラウザーの他のイベントにフォールバックします)。

MDN はそれをかなりうまくまとめています:

DOMContentLoaded イベントは、スタイルシート、画像、およびサブフレームの読み込みが完了するのを待たずに、ドキュメントが完全に読み込まれて解析されたときに発生します (load イベントは、完全に読み込まれたページを検出するために使用できます)。

したがって、スクリプトは実行されるまでに常に解析されます。

于 2013-04-12T05:24:44.760 に答える