ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptの遅延とは何ですか

JavaScriptの遅延とは何ですか

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-07-21 14:47:593229ブラウズ

defer は、スクリプト セグメントにすぐに実行する必要のないコードが含まれており、SRC 属性と組み合わせて使用​​されることをブラウザに伝えます。また、これらのスクリプトがバックグラウンドでダウンロードされる可能性もあります。フォアグラウンドのコンテンツは通常、「< ;script defer>js code2cacc6d41bbb37262a98f745aa00fbf0」という構文でユーザーに表示されます。

JavaScriptの遅延とは何ですか

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

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

<script src="../CGI-bin/delscript.js" defer></script>

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

<button id="myButton" onclick="alert(&#39;ok&#39;)">test</button>
<script>
myButton.click();
</script>

<script>
myButton.click();
</script>
<button id="myButton" onclick="alert(&#39;ok&#39;)">test</button>

<script defer>
function document.body.onload() {
alert(document.body.offsetHeight);
}
</script>

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

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

--ただし、ドキュメントが読み込まれた後にスクリプトを実行してください。

次の 2 つの点に注意してください:

1. defer-type で document.write コマンドを呼び出さないでください。 script セグメント。 document.write が直接の出力効果を生み出すためです。

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

パフォーマンスを最適化する一般的な方法は、スクリプトをすぐに実行する必要がない場合に、03c6714b8e3ee3238fc596020c4901e1 タグに「defer」属性を設定することです。 (即時スクリプトはファンクション ブロックに含まれていないため、読み込みプロセス中に実行されます。) 「defer」属性を設定した後、IE はスクリプトが読み込まれて実行されるのを待つ必要がありません。こうすることで、ページの読み込みが速くなります。一般に、これは、即時スクリプトが関数ブロックに配置され、ドキュメントまたは本文オブジェクトの onload ハンドラーで関数を処理するのが最適であることも意味します。このプロパティは、ボタンをクリックしたりマウスを特定の領域に移動したりするなど、ユーザーのアクションに基づいて実行する必要があるスクリプトがある場合に役立ちます。ただし、ページの読み込み中または読み込み後に実行する必要があるスクリプトがいくつかある場合、defer 属性を使用するメリットはあまり大きくありません。

スクリプトの defer 属性は、デフォルトでは false です。 『DHTML プログラミング ガイド』の説明によると、Defer 属性は次のように記述されています。

デザイン時にこの属性を使用すると、ブラウザがスクリプトを解析して実行する必要がないため、ページのダウンロード パフォーマンスが向上します。代わりにページのダウンロードと解析を続行できます。

つまり、スクリプトを作成するときに defer 属性を追加すると、ブラウザはスクリプトのダウンロード時にすぐに処理する必要がなく、引き続き処理を実行します。ページを処理します。ダウンロードして解析することで、ダウンロードのパフォーマンスが向上します。

そのような状況はたくさんあります。たとえば、多数の JavaScript 変数を定義する場合、または処理する必要がある参照ファイル (.inc) に多数のスクリプトを記述する場合は、これらのスクリプトに defer 属性を追加すると、パフォーマンスの向上に確実に役立ちます。 。

例:

<script language="javascript" defer>
var object = new Object();
....
</script>

defer 属性のデフォルトは false であるため、ここで defer 属性を明示的に宣言した後の

<script language="javascript" defer>

は、宣言後の

<script language="javascript" defer=true>

と同等です。 defer 属性を宣言する場合は、他の変数が defer スクリプト ブロック内の変数を参照しているかどうかを判断する必要があります。そうしないと、スクリプト エラーが発生します。

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptの遅延とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。