javascript_javascript スキルにおける defer の役割についての深い理解

多くの人はすでに Javascript の使用に習熟していますが、defer を見たときに何に使用されているかわからない可能性があります。また、多くの人がこのような問題に遭遇し、DOM オブジェクトを操作しない js を直接実行する必要があります。オブジェクトが見つからないというメッセージは常に報告されます。誰もが知っているように、その理由は、ページがまだロードされておらず、js 操作オブジェクトがまだダウンロード中であるためです。しかし、多くの人は、defer タグを追加することでこの問題を簡単に解決できることを知りません。

の defer の機能は、オブジェクトが見つからないという問題を回避するために、ドキュメントがロードされた後にスクリプトを実行することです。ちょっとした問題です

コードをコピー コードは次のとおりです:

test< ;/button>
<script><br>myButton.click();<br></script>

<script><br>myButton.click();<br></script>

test

defer の追加は、ページが完全にロードされた後に実行することを意味します。これは window.onload と同等ですが、アプリケーションでは window.onload よりも柔軟です。

defer は、スクリプト プログラムの力における「縁の下の力持ち」です。これは、スクリプト セグメントにすぐに実行する必要のないコードが含まれていることをブラウザーに伝え、SRC 属性と組み合わせて使用​​すると、これらのスクリプトがバックグラウンドでダウンロードされ、フォアグラウンドのコンテンツが表示されるようにすることもできます。通常通りユーザーに。

-- ただし、ドキュメントがロードされた後にスクリプトを実行します

次の 2 点にご注意ください:

1. document.write は直接出力効果を生み出すため、遅延タイプのスクリプト セグメントで document.write コマンドを呼び出さないでください。

2. また、遅延スクリプトセグメントには、即時実行スクリプトで使用されるグローバル変数や関数を含めないでください。

パフォーマンスを最適化する一般的な方法は、スクリプトをすぐに実行する必要がない場合に、<SCRIPT> タグに「defer」属性を設定することです。 (即時スクリプトはファンクション ブロックに含まれていないため、読み込みプロセス中に実行されます。) 「defer」属性を設定した後、IE はスクリプトが読み込まれて実行されるのを待つ必要がありません。こうすることで、ページの読み込みが速くなります。一般に、これは、即時スクリプトが関数ブロックに配置され、ドキュメントまたは本文オブジェクトの onload ハンドラーで関数を処理するのが最適であることも意味します。このプロパティは、ボタンをクリックしたりマウスを特定の領域に移動したりするなど、ユーザーのアクションに依存するスクリプトがある場合に役立ちます。ただし、ページの読み込み中または読み込み後に実行する必要があるスクリプトがいくつかある場合、defer 属性を使用するメリットはあまり大きくありません。 </p> <p>スクリプトの defer 属性はデフォルトでは false です。 DHTML プログラミング ガイドの説明によると、Defer 属性は次のように記述されます: </p> <p>設計時にこの属性を使用すると、ブラウザがスクリプトを解析して実行する必要がなく、代わりにページのダウンロードと解析を続行できるため、ページのダウンロード パフォーマンスが向上します。</p> <p>言い換えると、スクリプトの作成時に defer 属性を追加すると、ブラウザはスクリプトのダウンロード時にすぐに処理する必要がなく、ページのダウンロードと解析を継続するため、ダウンロードのパフォーマンスが向上します。 </p> <p>そのような状況はたくさんあります。たとえば、多数の JavaScript 変数を定義する場合、または処理する必要がある参照ファイル (.inc) に多数のスクリプトを記述する場合は、これらのスクリプトに defer 属性を追加すると、パフォーマンスの向上に確実に役立ちます。 。 </p> <p><strong>例: <br></strong></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="51013" class="copybut" id="copybut51013" onclick="doCopy('code51013')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code51013"> <br> <script language="javascript" defer><br>var object = new Object();<br>....<br></script>