Tutorial zum Erstellen einer HTML-Webseite. Verwenden Sie Iframe-Tags mit Bedacht.

Tutorial zum Erstellen einer HTML-Webseite. Verwenden Sie Iframe-Tags mit Bedacht.

Durch die Verwendung von iFrames können problemlos Seiten von anderen Websites aufgerufen werden, allerdings sollte dabei Vorsicht geboten sein. Der Leistungsaufwand ist zehn- oder sogar hundertmal höher als bei der Erstellung anderer DOM-Elemente (einschließlich Stil und Skript). Wie leistungsintensiv iFrames sind, zeigt ein Vergleich der Zeit, die zum Hinzufügen von 100 verschiedenen Elementen benötigt wird:

Seiten, die Iframes verwenden, haben normalerweise nicht so viele Iframes, daher muss die zum Erstellen des DOM benötigte Zeit kein großes Problem darstellen. Bedenklicher sind das Onload-Ereignis und der Verbindungspool.

iFrame-Blöcke beim Laden

Es ist sehr wichtig, dass das Onload-Ereignis des Fensters so schnell wie möglich ausgeführt wird. Dadurch wird die Ladefortschrittsanzeige des Browsers abgeschlossen, anhand derer der Benutzer feststellen kann, ob die Seite geladen wurde. Durch die Verzögerung des Onload-Ereignisses haben Benutzer das Gefühl, dass die Seite langsam ist.

Das Onload-Ereignis eines Fensters wird erst ausgelöst, wenn alle darin enthaltenen Iframes und alle Ressourcen in den Iframes vollständig geladen sind. In Safari und Chrome kann dieses blockierende Verhalten vermieden werden, indem der src-Wert des Iframes dynamisch mithilfe von JavaScript zugewiesen wird.

Ein Verbindungspool

Browser öffnen nur eine sehr geringe Anzahl von Verbindungen zu jedem Webserver. Ältere Browser, darunter IE 6/7 und Firefox 2, haben nur 2 Verbindungen pro Host. In neuen Browsern steigt die Zahl der Verbindungen rasant an. Safari 3+ und Opera 9+ wurden auf 4 erhöht, Chrome 1+, IE 8 und Firefox 3 wurden auf 6 erhöht.

Man könnte erwarten, dass es für jedes Iframe einen separaten Verbindungspool gibt, dies ist jedoch nicht der Fall. In den meisten Browsern wird die Verbindung zwischen der Hauptseite und ihrem Iframe geteilt. Dies bedeutet, dass Ressourcen im Iframe die verfügbare Verbindung belegen und das Laden der Ressourcen der Hauptseite blockieren können. Dies ist in Ordnung, wenn der Inhalt des Iframes gleich wichtig oder wichtiger ist als der der Hauptseite. Im Allgemeinen ist der Inhalt des Iframes für die Seite jedoch nicht sehr wichtig und es ist nicht ratsam, dass der Iframe die Verbindungsnummer belegt. Eine Lösung besteht darin, den Quellwert des Iframes dynamisch zuzuweisen, nachdem der Download der Ressource mit der höheren Priorität abgeschlossen ist.

Fünf der zehn Top-Websites in den USA verwenden Iframes. Sie werden hauptsächlich zum Laden von Werbung verwendet. Das ist zwar nicht besonders angemessen, aber verständlich und eine einfache Möglichkeit, Anzeigen in Ihre Inhalte einzufügen. In vielen Fällen ist die Verwendung von iFrames sinnvoll. Beachten Sie jedoch die Auswirkungen, die dies auf die Leistung Ihrer Seiten haben kann. Bitte verwenden Sie es mit Vorsicht, sofern es nicht unbedingt erforderlich ist.

<<:  Detaillierte Erläuterung von acht Methoden zum Korrigieren des CSS-Seitenendes

>>:  react+antd.3x implementiert IP-Eingabefeld

Artikel empfehlen

Zusammenfassung einiger gängiger Konfigurationen und Techniken von Nginx

Vorwort Dieser Artikel listet mehrere gängige, pr...

Zusammenfassung zum Erstellen und Verwenden von Array-Methoden in Bash-Skripten

Definieren eines Arrays in Bash Es gibt zwei Mögl...

So löschen Sie node_modules und installieren es neu

Inhaltsverzeichnis Schritt 1: Installieren Sie no...

WeChat-Applet zur Bestimmung, ob die Mobiltelefonnummer legal ist Beispielcode

Inhaltsverzeichnis Szenario Wirkung Code Zusammen...

Schnelles Verständnis und Beispielanwendung der Vuex-Zustandsmaschine

Inhaltsverzeichnis 1. Schnelles Verständnis von K...

Detaillierte Erklärung der Text-Fill-Color-Eigenschaft in CSS3

Was bedeutet Textfüllfarbe? Rein wörtlich bedeute...

Centos7.5 installiert die Bereitstellung des binären Pakets mysql5.7.24

1. Umweltvorbereitung: Betriebssystem: CentOS Lin...

Detaillierte Beschreibung der Unicode-Signatur-BOM

Unicode-Signatur-BOM – Was ist die BOM? BOM ist di...