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を使用してそれを実現する方法...
1 要件の概要MySQL5.6本番データベースの複数のテーブルのデータは、Oracle11gデータウ...
はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...
1. はじめに先ほど、フロントエンドの表示の問題について説明しました。では、前のコンテンツに戻って、...
ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...
要素UIとはelement-ui は、Ele.me のフロントエンド チームが開発者、デザイナー、製...
まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...
目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...
MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...
序文簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...
MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...
タイトルXML/HTML コードコンテンツをクリップボードにコピー< h1 >第 1 レ...
はい、CSS にも正規表現があります (アーメン) CSS で目立つための 2 つの強力なツール: ...
序文KMS を通じてライセンス認証できる Windows システムは、一般的に VL バージョン、つ...
目次1. ソフトウェアパッケージ2. gccをインストールする3. libfastcommonをイン...