ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 の実践と遅延スクリプトの分析

HTML5 の実践と遅延スクリプトの分析

黄舟
リリース: 2017-02-10 14:26:31
オリジナル
2024 人が閲覧しました

遅延スクリプトとは何ですか? HTML5 の実戦と遅延スクリプトの分析は、JavaScript の読み込みの問題を解決するのに役立ちます。 HTML5の実戦・解析のディファードスクリプト機能により、JavaScript読み込み時のページ構造の乱雑さを気にする必要がなくなりました。

JavaScript の遅延スクリプトに関しては、そのような属性は HTML4.01 の時点ですでに存在していました。これは、外部参照される script タグに「defer」属性を追加すると非常に便利です。 「defer」属性を追加しても、ページの構造には影響しません。つまり、スクリプトはロードされますが実行されず、ページが完全にロードされた後に順次実行されます。よりよく理解するために、以下の例を見てください。

この例では、a.html ファイルがあり、このファイルで参照されている script タグには遅延スクリプトの属性が追加されていませんが、b.html ファイルには遅延スクリプトの属性が追加されています。それぞれ a.js と b.js という 2 つの JavaScript ファイルがあり、それぞれのファイル名がデモンストレーションとしてポップアップ表示されます。

a.jsコード

alert("a");
ログイン後にコピー

b.jsコード

alert("b");
ログイン後にコピー


a.htmlコードえー

b.htmlコードrree


上記の例からも分かります。 headタグ内でa.jsとb.jsを参照していますが、これは「defer」属性を設定しているためです。したがって、参照される a.js と b.js はロードされますが、ブラウザーがタグを検出した後に実行する必要があります。ブラウザーによって遅延属性の解析方法が異なるため、遅延スクリプトが実行される順序も異なります。 「defer」属性は、外部から参照される JavaScript ファイルにのみ適用され、JavaScript ファイルを参照する他のいくつかの方法は無視されます。

サポートされているブラウザは、IE9、Firefox 3.5、Safari 5、Chromeです。サポートされていないその他のブラウザは、通常どおりスクリプトをロードして処理します。

上記は HTML5 の実戦と遅延スクリプトの分析の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。






ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート