次のグラフは、100 個の異なる要素で iframe を作成するのにどれくらいの時間がかかるかを示しています。 ![]() 100個の要素を作成する時間 iframe を使用するページには、通常、あまり多くの iframe が含まれていないため、DOM ノードの作成に費やされる時間は大きな割合を占めることはありません。しかし、オンロード イベントと接続プールなど、他のいくつかの問題が発生します。 Iframe はページの読み込みをブロックします ウィンドウの onload イベントを適切なタイミングでトリガーすることが非常に重要です。 onload イベントはブラウザの「ビジー」インジケーターを停止させ、現在の Web ページが読み込まれたことをユーザーに伝えます。 onload イベントが遅延すると、Web ページが非常に遅いという印象をユーザーに与えます。 すべての iframe (内部の要素を含む) が読み込まれた後に、window の onload イベントをトリガーする必要があります。 Safari と Chrome では、JavaScript を介して iframe の SRC を動的に設定することで、このブロックを回避できます。 接続プールのみ ブラウザは、Web サーバーへの接続を少数しか開くことができません。 Internet Explorer 6 および 7、Firefox 2 などの古いブラウザでは、一度に 1 つのホスト名に対して 2 つの接続しか開くことができません。この制限はブラウザの新しいバージョンでは増加されています。 Safari 3+ および Opera 9+ では、ドメインへの接続を 4 つ同時に開くことができます。Chrome 1+、IE 8、Firefox 3 では、ドメインへの接続を 6 つ同時に開くことができます。詳細なデータ テーブルについては、この記事「並列接続のまとめ」をご覧ください。 iframe には独自の接続プールがあると思われるかもしれませんが、そうではありません。ほとんどのブラウザでは、メイン ページとその中の iframe がこれらの接続を共有します。つまり、iframe はリソースを読み込むときに利用可能なすべての接続を使い果たし、メイン ページのリソースの読み込みがブロックされる可能性があります。もちろん、iframe 内のコンテンツがメイン ページのコンテンツよりも重要な場合は、これで問題ありません。しかし、通常、iframe 内のコンテンツはメイン ページのコンテンツほど重要ではありません。この時点で、iframe 内の利用可能な接続をすべて使い切る価値はありません。 1 つの解決策は、メイン ページの重要な要素が読み込まれた後に、iframe の SRC を動的に設定することです。 米国のトップ 10 の Web サイトはすべて iframe を使用しています。ほとんどの場合、広告を読み込むために使用されます。これは理解しやすく論理的な解決策であり、広告サービスを読み込む簡単な方法です。ただし、iframe はページのパフォーマンスに悪影響を与えることに注意してください。可能な限り、iframe の使用は避けてください。必要な場合は注意して使用してください。 出典:英語原文中国語訳: IT中毒 |
<<: Nginx プロセス スケジューリングの問題の詳細な説明
>>: CSS 変数に基づくテーマ切り替えに最適なソリューション (推奨)
目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...
1. refがコピーされ、ビューが更新されますrefを使用してオブジェクトのプロパティ値をレスポンシ...
変更後: innodb_buffer_pool_size=576M ->256M InnoDB...
目次1. はじめに2. タブバーのスタイルをカスタマイズする3. カスタムタブバーと関連設定を導入す...
MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...
目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...
Docker 公式ドキュメント: https://docs.docker.com/ Docker は...
1. 基本的な文法コードをコピーコードは次のとおりです。埋め込み src=url注: 埋め込みはさま...
多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...
チェックボックスやラジオボタンの使用を含むコードをコピーコードは次のとおりです。 <!DOCT...
問題の説明html <iframe id="h5Content" src=...
目次序文エラー境界エラー境界を超えてトライ/キャッチwindow.onerror、エラーイベント未処...
導入2日前に見た問題について詳細に書きます。バイトコンピューターがバイナリに基づいていることは誰もが...
目次オブジェクトプロトタイプの値()オブジェクトプロトタイプtoString()シンボル.toPri...
この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的...