検索

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

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

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

スクリプトの 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 までご連絡ください。
JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター