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

Detaillierte Erklärung der MySQL information_schema-Datenbank

1. Übersicht Die Datenbank information_schema ist...

Wie viele gängige Schleifen zur Array-Traversierung in JS kennen Sie?

Vorwort Als grundlegende Datenstruktur spielen Ar...

Implementierungsschritte zur Installation eines FTP-Servers in Ubuntu 14.04

Inhaltsverzeichnis Installieren Softwareverwaltun...

So implementieren Sie eine einzelne Dateikomponente in JS

Inhaltsverzeichnis Überblick Einzelne Dateikompon...

vue + springboot realisiert die Login-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Implementierung eines Nginx-Load-Balancing-Clusters

(1) Experimentelle Umgebung youxi1 192.168.5.101 ...

Verwendung des offiziellen MySQL-Exporttools mysqlpump

Inhaltsverzeichnis Einführung Anweisungen Tatsäch...

js implementiert Tabellen-Drag-Optionen

In diesem Artikelbeispiel wird der spezifische JS...

Vue realisiert Web-Online-Chat-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

So ändern Sie das Datenbankdatenspeicherverzeichnis in MySQL

Vorwort Die Standarddatenbankdatei der MySQL-Date...

Beispiel für eine einfache Operation einer MySQL-Abfrageanweisung

Dieser Artikel veranschaulicht anhand von Beispie...

Keine chinesische Spezialität: Webentwicklung unter kulturellen Unterschieden

Webdesign und -entwicklung sind harte Arbeit, als...