HTML Webページ作成チュートリアル iframeタグを慎重に使用してください

HTML Webページ作成チュートリアル iframeタグを慎重に使用してください

iframe を使用すると、他の Web サイトのページを簡単に呼び出すことができますが、注意して使用する必要があります。他の DOM 要素 (スタイルやスクリプトを含む) を作成する場合よりも、パフォーマンスが数十倍、場合によっては数百倍も高くなります。 100 個の異なる要素を追加するのにかかる時間を比較すると、iframe がいかにパフォーマンスを集中的に消費するかがわかります。

iframe を使用するページには、通常、それほど多くの iframe がないため、DOM の作成にかかる時間をそれほど気にする必要はありません。さらに懸念されるのは、onload イベントと接続プールです。

iframe ブロック onload

ウィンドウの onload イベントができるだけ早く実行されることが非常に重要です。これにより、ブラウザの読み込み進行状況インジケーターが完了し、ユーザーはこれを使用してページが読み込まれたかどうかを判断します。 onload イベントが遅延すると、ユーザーはページが遅いと感じるでしょう。

ウィンドウの onload イベントは、ウィンドウに含まれるすべての iframe と iframe 内のすべてのリソースが完全に読み込まれるまでトリガーされません。 Safari と Chrome では、JavaScript を使用して iframe の src 値を動的に割り当てることで、このブロック動作を回避できます。

接続プール

ブラウザは各 Web サーバーに対してごく少数の接続のみを開きます。 IE 6/7 や Firefox 2 などの古いブラウザでは、ホストごとに接続が 2 つしかありません。新しいブラウザでは、接続数が急増します。 Safari 3+ および Opera 9+ は 4 に増加し、Chrome 1+、IE 8、Firefox 3 は 6 に増加しました。

iframe ごとに個別の接続プールがあると思われるかもしれませんが、そうではありません。ほとんどのブラウザでは、接続はメイン ページとその iframe 間で共有されます。つまり、iframe 内のリソースが利用可能な接続を占有し、メイン ページのリソースの読み込みをブロックする可能性があります。 iframe 内のコンテンツがメイン ページと同等かそれ以上に重要な場合は、これで問題ありません。ただし、一般的に、iframe 内のコンテンツはページにとってそれほど重要ではないため、iframe が接続番号を占有することはお勧めできません。 1 つの解決策は、優先度の高いリソースのダウンロードが完了した後に、iframe の src 値を動的に割り当てることです。

米国のトップ 10 ウェブサイトのうち 5 つは iframe を使用しています。主に広告を読み込むために使用されます。これはあまり適切ではありませんが、理解できるものであり、コンテンツに広告を挿入する簡単な方法です。多くの場合、iframe を使用することは理にかなっています。ただし、これがページのパフォーマンスに及ぼす影響に注意してください。必要でない限りは注意してご使用ください。

<<:  CSSページ下部固定を実現する8つの方法の詳細な説明

>>:  react+antd.3x は IP 入力ボックスを実装します

推薦する

CSS 水平プログレスバーと垂直プログレスバーの実装コード

時々、素敵なスクロールバー効果を見るのは楽しいものです。ここでは、CSSを使用してそれを実現する方法...

MySQLからOracleへのリアルタイム同期ソリューションの詳細な説明

1 要件の概要MySQL5.6本番データベースの複数のテーブルのデータは、Oracle11gデータウ...

知らないかもしれない奇妙で興味深いDockerコマンド

はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...

実用的な情報が満載のJavaScript Webフォーム機能通信

1. はじめに先ほど、フロントエンドの表示の問題について説明しました。では、前のコンテンツに戻って、...

Ubuntu での Subversion (SVN) の詳細なインストールと設定

ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...

element-ui 写真をアップロードした後、座標点をマークします

要素UIとはelement-ui は、Ele.me のフロントエンド チームが開発者、デザイナー、製...

mysql8.0.11 winx64 手動インストールと設定チュートリアル

まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...

JavaScript の基礎: 即時実行関数

目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...

MySQL5.7 マスタースレーブ構成例の分析

MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...

Linux での tcpdump コマンド例の詳細な説明

序文簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...

いくつかの重要なMySQL変数

MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...

HTML のタイトル、段落、改行、水平線、特殊文字についての簡単な説明

タイトルXML/HTML コードコンテンツをクリップボードにコピー< h1 >第 1 レ...

CSSセレクターでの正規表現の使用

はい、CSS にも正規表現があります (アーメン) CSS で目立つための 2 つの強力なツール: ...

Linux で FastDFS ファイル サーバーを構築するための実装手順

目次1. ソフトウェアパッケージ2. gccをインストールする3. libfastcommonをイン...