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

Installieren Sie Zookeeper unter Docker (Standalone und Cluster).

Nachdem wir Docker gestartet haben, schauen wir u...

Detaillierte Erklärung dieses Zeigeproblems in JavaScript

Vorwort Glauben Sie mir, solange Sie sich an die ...

So lösen Sie das Problem der hohen Parallelität in der MySQL-Datenbank

Vorwort Wir alle wissen, dass Startups zunächst m...

Mysql-Abfrageanweisung mit mehreren Bedingungen und dem Schlüsselwort „And“

MySQL-Abfrage mit mehreren Bedingungen und dem Sc...

So aktualisieren Sie MySQL 5.6 auf 5.7 unter Windows

Vorne geschrieben Es gibt zwei Möglichkeiten, MyS...

So verwenden Sie Vue+ElementUI Tree

Die Verwendung von Vue + ElementUI Tree dient zu ...

Nodejs-Plugin und Nutzungsübersicht

Die Betriebsumgebung dieses Tutorials: Windows 7-...

Tutorial zur MySQL-Optimierung: Große Paging-Abfrage

Inhaltsverzeichnis Hintergrund LIMIT-Optimierung ...

Eine kurze Diskussion über JavaScript-Drosselung und Anti-Shake

Inhaltsverzeichnis Drosselung und Anti-Shake Konz...

Grundlegendes Handbuch für Webdesign 216 Websichere Farben

Die Farbdarstellung auf einer Webseite wird von ve...

Seitenlayout für Bootstrap 3.0-Lernnotizen

Dieses Mal werden wir hauptsächlich etwas über da...