Diese Seite wurde von der Cloud Translation API übersetzt.

HTML-Importe

Für Web einschließen

Eric Bidelman

Vorteile von Importen

Überlegen Sie, wie Sie verschiedene Arten von Ressourcen im Web laden. Für JavaScript verwenden wir <script src>. Für Preisvergleichsportale ist das wahrscheinlich <link rel="stylesheet">. Für Bilder ist das <img>. Das Video hat <video>. Audio, <audio>… Kommen Sie schnell zur Sache! Der Großteil der Webinhalte lässt sich einfach und deklarativ laden. Bei HTML ist dies nicht der Fall. Sie haben folgende Möglichkeiten:

<iframe> – bewährt, aber schwer. Die Inhalte eines Iframes befinden sich in einem völlig anderen Kontext als Ihre Seite. Das ist zwar im Großen und Ganzen eine tolle Funktion, aber sie bringt auch zusätzliche Herausforderungen mit sich: Es ist schwierig, den Frame an den Inhalt anzupassen, es ist extrem frustrierend, Scripts darin einzufügen oder daraus zu entfernen, und es ist fast unmöglich, ihn zu stylen.
AJAX – Ich liebe xhr.responseType="document", meinst du aber, ich brauche JS, um HTML zu laden? Das kann nicht stimmen.
CrazyHacks™ – in Strings eingebettet, als Kommentare ausgeblendet (z. B. <script type="text/html">).

Sehen Sie die Ironie? Die grundlegendsten Inhalte des Webs, HTML, erfordern den größten Aufwand. Zum Glück gibt es Webkomponenten, die uns wieder auf den richtigen Weg bringen.

Erste Schritte

HTML-Importe, die zur Kategorie Webkomponenten gehören, sind eine Möglichkeit, HTML-Dokumente in andere HTML-Dokumente einzubinden. Sie sind auch nicht auf Markup beschränkt. Ein Import kann auch CSS, JavaScript oder andere Inhalte enthalten, die in einer .html-Datei enthalten sein können. Mit anderen Worten: Importe sind ein hervorragendes Tool zum Laden zugehöriger HTML-/CSS-/JS-Dateien.

Grundlagen

Füge einen Import auf deiner Seite ein, indem du <link rel="import"> deklarierst:

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

Die URL eines Imports wird als Speicherort für Importe bezeichnet. Wenn Inhalte aus einer anderen Domain geladen werden sollen, muss der Importspeicherort CORS-kompatibel sein:

<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">

Funktionsprüfung und -unterstützung

Prüfen Sie, ob .import für das <link>-Element vorhanden ist, damit dies unterstützt wird:

function supportsImports() {
    return 'import' in document.createElement('link');
}

if (supportsImports()) {
    // Good to go!
} else {
    // Use other libraries/require systems to load files.
}

Die Browserunterstützung steht noch ganz am Anfang. Chrome 31 war der erste Browser, in dem ES-Module implementiert wurden. Andere Browseranbieter warten jedoch ab, um zu sehen, wie sich ES-Module entwickeln. In anderen Browsern funktioniert jedoch webcomponents.js-Polyfill, bis es weithin unterstützt wird.

Ressourcen bündeln

Importe bieten eine Möglichkeit, HTML-/CSS-/JS-Dateien (auch andere HTML-Importe) in einem einzigen Deliverable zu bündeln. Diese Funktion ist unverzichtbar, aber sehr wirkungsvoll. Wenn Sie ein Design, eine Bibliothek oder einfach nur Ihre App in logische Blöcke segmentieren möchten, ist es sinnvoll, Nutzern eine einzige URL zur Verfügung zu stellen. Sie können sogar eine ganze App über einen Import bereitstellen. Überlegen Sie sich das kurz.

Ein praktisches Beispiel ist Bootstrap. Bootstrap besteht aus einzelnen Dateien (bootstrap.css, bootstrap.js, Schriftarten), erfordert JQuery für seine Plug-ins und bietet Markup-Beispiele. Entwickler schätzen die À-la-carte-Flexibilität. So können sie die Teile des Frameworks auswählen, die sie verwenden möchten. Ich würde aber wetten, dass der typische JoeDeveloper™ den einfachen Weg geht und das gesamte Bootstrap-Paket herunterlädt.

Importe sind für etwas wie Bootstrap sehr sinnvoll. Hier ist die Zukunft des Bootstrap-Ladens:

<head>
    <link rel="import" href="bootstrap.html">
</head>

Nutzer laden einfach einen HTML-Importlink. Sie müssen sich nicht mit der Vielzahl von Dateien herumschlagen. Stattdessen wird das gesamte Bootstrap-Framework in einem Import, bootstrap.html, verwaltet und verpackt:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
...

<!-- scaffolding markup -->
<template>
    ...
</template>

Lassen Sie das alles mal sacken. Das ist wirklich spannend.

Lade-/Fehlerereignisse

Das <link>-Element löst ein load-Ereignis aus, wenn ein Import erfolgreich geladen wird, und onerror, wenn der Versuch fehlschlägt (z.B. wenn die Ressource einen Fehler 404 zurückgibt).

Importe werden sofort geladen. Eine einfache Möglichkeit, Probleme zu vermeiden, ist die Verwendung der onload/onerror-Attribute:

<script>
    function handleLoad(e) {
    console.log('Loaded import: ' + e.target.href);
    }
    function handleError(e) {
    console.log('Error loading import: ' + e.target.href);
    }
</script>

<link rel="import" href="file.html"
        onload="handleLoad(event)" onerror="handleError(event)">

Wenn Sie den Import dynamisch erstellen:

var link = document.createElement('link');
link.rel = 'import';
// link.setAttribute('async', ''); // make it async!
link.href = 'file.html';
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);

Inhalte verwenden

Wenn Sie einen Import auf einer Seite einfügen, bedeutet das nicht, dass Sie den Inhalt der Datei einfach dort einfügen. Das bedeutet: „Parser, hol dieses Dokument, damit ich es verwenden kann.“ Um die Inhalte tatsächlich nutzen zu können, musst du Maßnahmen ergreifen und ein Skript schreiben.

Im aha!-Moment wird erkannt, dass ein Import nur ein Dokument ist. Der Inhalt eines Imports wird als Importdokument bezeichnet. Sie können die Daten eines Imports mithilfe von Standard-DOM-APIs bearbeiten.

link.import

Verwende die .import-Eigenschaft des Link-Elements, um auf den Inhalt eines Imports zuzugreifen:

var content = document.querySelector('link[rel="import"]').import;

link.import ist unter den folgenden Bedingungen null:

Der Browser unterstützt keine HTML-Importe.
Die <link> hat keine rel="import".
Das <link> wurde dem DOM nicht hinzugefügt.
Das Element „<link>“ wurde aus dem DOM entfernt.
Die Ressource ist nicht CORS-kompatibel.

Vollständiges Beispiel

Angenommen, warnings.html enthält Folgendes:

<div class="warning">
    <style>
    h3 {
        color: red !important;
    }
    </style>
    <h3>Warning!
    <p>This page is under construction
</div>

<div class="outdated">
    <h3>Heads up!
    <p>This content may be out of date
</div>

Importeure können einen bestimmten Teil dieses Dokuments kopieren und auf ihrer Seite einfügen:

<head>
    <link rel="import" href="warnings.html">
</head>
<body>
    ...
    <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from warning.html's document.
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
    </script>
</body>

Scripting in Importen

Importe sind nicht im Hauptdokument enthalten. Sie sind Satellit. Ihr Import kann jedoch weiterhin auf der Hauptseite angewendet werden, auch wenn das Hauptdokument vorrangig ist. Ein Import kann auf sein eigenes DOM und/oder das DOM der Seite zugreifen, von der er importiert wird:

Beispiel: import.html, das der Hauptseite eines seiner Stylesheets hinzufügt

<link rel="stylesheet" href="http://www.example.com/styles.css">
<link rel="stylesheet" href="http://www.example.com/styles2.css">

<style>
/* Note: <style> in an import apply to the main
    document by default. That is, style tags don't need to be
    explicitly added to the main document. */
#somecontainer {
color: blue;
}
</style>
...

<script>
// importDoc references this import's document
var importDoc = document.currentScript.ownerDocument;

// mainDoc references the main document (the page that's importing us)
var mainDoc = document;

// Grab the first stylesheet from this import, clone it,
// and append it to the importing document.
    var styles = importDoc.querySelector('link[rel="stylesheet"]');
    mainDoc.head.appendChild(styles.cloneNode(true));
</script>

Sehen Sie sich an, was hier passiert. Das Script im Import verweist auf das importierte Dokument (document.currentScript.ownerDocument) und hängt einen Teil dieses Dokuments an die Importseite (mainDoc.head.appendChild(...)) an. Ziemlich kompliziert, wenn Sie mich fragen.

Regeln für JavaScript in einem Import:

Das Script im Import wird im Kontext des Fensters ausgeführt, das die importierte document enthält. window.document bezieht sich also auf das Dokument der Startseite. Daraus ergeben sich zwei nützliche Folgerungen:
- in einem Import definierte Funktionen in window enden.
- Sie müssen nichts Kompliziertes tun, z. B. die <script>-Blöcke des Imports an die Hauptseite anhängen. Das Script wird noch einmal ausgeführt.
Importe blockieren nicht das Parsen der Startseite. Die darin enthaltenen Scripts werden jedoch in der richtigen Reihenfolge verarbeitet. Das bedeutet, dass Sie ein ähnliches Verhalten wie bei der Defer-Funktion erhalten, während die richtige Scriptreihenfolge beibehalten wird. Weitere Informationen dazu finden Sie unten.

Webkomponenten ausliefern

Das Design von HTML Imports eignet sich gut für das Laden wiederverwendbarer Inhalte im Web. Insbesondere eignet es sich hervorragend für die Bereitstellung von Webkomponenten. Von einfachen HTML-<template>s bis hin zu vollwertigen benutzerdefinierten Elementen mit Shadow DOM [1, 2, 3]. Werden diese Technologien zusammen verwendet, werden Importe zu einem #include für Webkomponenten.

Vorlagen einschließen

Das HTML-Vorlage-Element eignet sich hervorragend für HTML-Importe. <template> eignet sich hervorragend, um Bereiche des Markups für die importierende App zu erstellen. Wenn Sie Inhalte in <template>-Tags einschließen, haben Sie außerdem den Vorteil, dass die Inhalte erst dann angezeigt werden, wenn sie verwendet werden. Das bedeutet, dass Skripts erst ausgeführt werden, wenn die Vorlage zum DOM hinzugefügt wurde. Zack!

import.html

<template>
    <h1>Hello World!</h1>
    <!-- Img is not requested until the <template> goes live. -->
    <img src="world.png">
    <script>alert("Executed when the template is activated.");</script>
</template>

index.html

<head>
    <link rel="import" href="import.html">
</head>
<body>
    <div id="container"></div>
    <script>
    var link = document.querySelector('link[rel="import"]');

    // Clone the <template> in the import.
    var template = link.import.querySelector('template');
    var clone = document.importNode(template.content, true);

    document.querySelector('#container').appendChild(clone);
    </script>
</body>

Benutzerdefinierte Elemente registrieren

Benutzerdefinierte Elemente sind eine weitere Webkomponententechnologie, die sich hervorragend mit HTML-Importen kombinieren lässt. Importe können Scripts ausführen. Warum definieren und registrieren Sie Ihre benutzerdefinierten Elemente nicht, damit Nutzer das nicht tun müssen? Nennen wir sie… „automatische Registrierung“.

elements.html

<script>
    // Define and register <say-hi>.
    var proto = Object.create(HTMLElement.prototype);

    proto.createdCallback = function() {
    this.innerHTML = 'Hello, <b>' +
                        (this.getAttribute('name') || '?') + '</b>';
    };

    document.registerElement('say-hi', {prototype: proto});
</script>

<template id="t">
    <style>
    ::content > * {
        color: red;
    }
    </style>
    <span>I'm a shadow-element using Shadow DOM!</span>
    <content></content>
</template>

<script>
    (function() {
    var importDoc = document.currentScript.ownerDocument; // importee

    // Define and register <shadow-element>
    // that uses Shadow DOM and a template.
    var proto2 = Object.create(HTMLElement.prototype);

    proto2.createdCallback = function() {
        // get template in import
        var template = importDoc.querySelector('#t');

        // import template into
        var clone = document.importNode(template.content, true);

        var root = this.createShadowRoot();
        root.appendChild(clone);
    };

    document.registerElement('shadow-element', {prototype: proto2});
    })();
</script>

Mit diesem Import werden zwei Elemente definiert (und registriert): <say-hi> und <shadow-element>. Das erste Beispiel zeigt ein einfaches benutzerdefiniertes Element, das sich innerhalb des Imports selbst registriert. Im zweiten Beispiel wird gezeigt, wie ein benutzerdefiniertes Element implementiert wird, das Shadow DOM aus einem <template> erstellt und sich dann selbst registriert.

Das Beste am Registrieren benutzerdefinierter Elemente in einem HTML-Import ist, dass der Importeur Ihr Element einfach auf seiner Seite deklariert. Keine Kabel erforderlich.

index.html

<head>
    <link rel="import" href="elements.html">
</head>
<body>
    <say-hi name="Eric"></say-hi>
    <shadow-element>
    <div>( I'm in the light dom )</div>
    </shadow-element>
</body>

Allein dieser Workflow macht HTML-Importe meiner Meinung nach zu einer idealen Möglichkeit, Webkomponenten zu teilen.

Abhängigkeiten und untergeordnete Importe verwalten

Untergeordnete Importe

Es kann nützlich sein, einen Import in einen anderen einzubinden. Wenn Sie beispielsweise eine andere Komponente wiederverwenden oder erweitern möchten, laden Sie die anderen Elemente über einen Import.

Unten sehen Sie ein echtes Beispiel von Polymer. Es ist eine neue Tab-Komponente (<paper-tabs>), für die eine Layout- und eine Auswahlkomponente wiederverwendet werden. Die Abhängigkeiten werden über HTML-Importe verwaltet.

paper-tabs.html (vereinfacht):

<link rel="import" href="iron-selector.html">
<link rel="import" href="classes/iron-flex-layout.html">

<dom-module id="paper-tabs">
    <template>
    <style>...</style>
    <iron-selector class="layout horizonta center">
        <content select="*"></content>
    </iron-selector>
    </template>
    <script>...</script>
</dom-module>

App-Entwickler können dieses neue Element mit folgenden Tools importieren:

<link rel="import" href="paper-tabs.html">
<paper-tabs></paper-tabs>

Wenn in Zukunft eine neue, noch bessere <iron-selector2> auf den Markt kommt, können Sie <iron-selector> austauschen und sie sofort verwenden. Dank Importen und Webkomponenten werden Ihre Nutzer nicht gestört.

Abhängigkeitsverwaltung

Wir alle wissen, dass das mehrmalige Laden von JQuery pro Seite zu Fehlern führt. Ist das nicht ein riesiges Problem für Webkomponenten, wenn mehrere Komponenten dieselbe Bibliothek verwenden? Nicht, wenn wir HTML-Importe verwenden. Sie können damit Abhängigkeiten verwalten.

Wenn Sie Bibliotheken in einen HTML-Import einbetten, werden Ressourcen automatisch dedupliziert. Das Dokument wird nur einmal geparst. Scripts werden nur einmal ausgeführt. Angenommen, Sie definieren einen Import „jquery.html“, über den eine Kopie von JQuery geladen wird.

jquery.html

<script src="http://cdn.com/jquery.js"></script>

Dieser Import kann in nachfolgenden Importen so wiederverwendet werden:

import2.html

<link rel="import" href="jquery.html">
<div>Hello, I'm import 2</div>

ajax-element.html

<link rel="import" href="jquery.html">
<link rel="import" href="import2.html">

<script>
    var proto = Object.create(HTMLElement.prototype);

    proto.makeRequest = function(url, done) {
    return $.ajax(url).done(function() {
        done();
    });
    };

    document.registerElement('ajax-element', {prototype: proto});
</script>

Auch die Hauptseite selbst kann jquery.html enthalten, wenn die Bibliothek benötigt wird:

<head>
    <link rel="import" href="jquery.html">
    <link rel="import" href="ajax-element.html">
</head>
<body>

...

<script>
    $(document).ready(function() {
    var el = document.createElement('ajax-element');
    el.makeRequest('http://example.com');
    });
</script>
</body>

Obwohl „jquery.html“ in vielen verschiedenen Importbäumen enthalten ist, wird das Dokument vom Browser nur einmal abgerufen und verarbeitet. Das zeigt sich auch im Netzwerkbereich:

Hinweise zur Leistung

HTML-Importe sind super, aber wie bei jeder neuen Webtechnologie sollten Sie sie mit Bedacht einsetzen. Die Best Practices für die Webentwicklung gelten auch weiterhin. Beachten Sie dabei Folgendes:

Importe zusammenführen

Die Reduzierung von Netzwerkanfragen ist immer wichtig. Wenn Sie viele Importlinks der obersten Ebene haben, können Sie sie in einer einzigen Ressource zusammenführen und diese Datei importieren.

Vulcanize ist ein npm-Build-Tool des Polymer-Teams, mit dem eine Reihe von HTML-Importen rekursiv in eine einzelne Datei flachgelegt wird. Stellen Sie sich diesen Schritt als Verkettungs-Build-Schritt für Webkomponenten vor.

Bei Importen wird das Browser-Caching genutzt

Viele vergessen, dass der Netzwerkstack des Browsers im Laufe der Jahre optimiert wurde. Diese Logik wird auch bei Importen (und untergeordneten Importen) verwendet. Der Import http://cdn.com/bootstrap.html kann Unterressourcen haben, die jedoch im Cache gespeichert werden.

Inhalte sind nur dann nützlich, wenn Sie sie hinzufügen

Betrachten Sie Inhalte als inaktiv, bis Sie ihre Dienste nutzen. Nehmen wir ein normales, dynamisch erstelltes Stylesheet:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

Der Browser fordert styles.css erst an, wenn link dem DOM hinzugefügt wurde:

document.head.appendChild(link); // browser requests styles.css

Ein weiteres Beispiel ist dynamisch erstelltes Markup:

var h2 = document.createElement('h2');
h2.textContent = 'Booyah!';

h2 ist relativ bedeutungslos, bis Sie es dem DOM hinzufügen.

Das Gleiche gilt für das Importdokument. Es passiert nichts, es sei denn, Sie hängen den Inhalt dem DOM an. Im Importdokument wird nur <script> direkt „ausgeführt“. Weitere Informationen finden Sie unter Scripts in Importen.

Asynchrones Laden optimieren

Importe blockieren das Rendering

Importe blockieren das Rendern der Startseite. Das ist vergleichbar mit dem, was <link rel="stylesheet"> tut. Der Browser blockiert das Rendering in Stylesheets, um FOUC zu minimieren. Importe verhalten sich ähnlich, da sie Stylesheets enthalten können.

Wenn die Ausführung vollständig asynchron erfolgen und der Parser oder das Rendering nicht blockiert werden soll, verwenden Sie das Attribut async:

<link rel="import" href="/path/to/import_that_takes_5secs.html" async>

async ist nicht der Standard für HTML-Importe, da Entwickler mehr Arbeit damit haben. Standardmäßig synchron bedeutet, dass HTML-Importe, die Definitionen benutzerdefinierter Elemente enthalten, garantiert in der richtigen Reihenfolge geladen und aktualisiert werden. In einer vollständig asynchronen Welt müssten Entwickler diese Abläufe und Upgrades selbst verwalten.

Sie können auch einen asynchronen Import dynamisch erstellen:

var l = document.createElement('link');
l.rel = 'import';
l.href = 'elements.html';
l.setAttribute('async', '');
l.onload = function(e) { ... };

Importe blockieren das Parsen nicht

Importe blockieren nicht das Parsen der Startseite. Scripts in Importen werden der Reihe nach verarbeitet, blockieren die Seite für den Import aber nicht. Das bedeutet, dass Sie ein ähnliches Verhalten wie bei der Defer-Funktion erhalten, während die richtige Scriptreihenfolge beibehalten wird. Ein Vorteil des Einfügens Ihrer Importe in die <head> besteht darin, dass der Parser so schnell wie möglich mit der Verarbeitung der Inhalte beginnen kann. Beachten Sie jedoch, dass <script> im Hauptdokument die Seite weiterhin blockiert. Die erste <script> nach einem Import blockiert das Seitenrendering. Das liegt daran, dass ein Import ein Skript enthalten kann, das vor dem Skript auf der Hauptseite ausgeführt werden muss.

<head>
    <link rel="import" href="/path/to/import_that_takes_5secs.html">
    <script>console.log('I block page rendering');</script>
</head>

Je nach App-Struktur und Anwendungsfall gibt es mehrere Möglichkeiten, das asynchrone Verhalten zu optimieren. Mit den folgenden Methoden lässt sich das Blockieren des Renderings der Hauptseite vermeiden.

Szenario 1 (bevorzugt): Sie haben kein Script in <head> oder kein Script in <body> eingefügt

Ich empfehle Ihnen, <script> nicht sofort nach einem Import zu platzieren. Verschieben Sie Scripts so spät wie möglich ins Spiel. Aber das tun Sie ja schon, ODER? ;)

Beispiel:

<head>
    <link rel="import" href="/path/to/import.html">
    <link rel="import" href="/path/to/import2.html">
    <!-- avoid including script -->
</head>
<body>
    <!-- avoid including script -->

    <div id="container"></div>

    <!-- avoid including script -->
    ...

    <script>
    // Other scripts n' stuff.

    // Bring in the import content.
    var link = document.querySelector('link[rel="import"]');
    var post = link.import.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
    </script>
</body>

Alle Elemente befinden sich unten.

Szenario 1.5: Der Import wird selbst hinzugefügt

Eine weitere Möglichkeit besteht darin, dass beim Importieren eigene Inhalte hinzugefügt werden. Wenn der Importautor einen Vertrag für den App-Entwickler festlegt, kann der Import einem Bereich der Hauptseite hinzugefügt werden:

import.html:

<div id="blog-post">...</div>
<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
</script>

index.html

<head>
    <link rel="import" href="/path/to/import.html">
</head>
<body>
    <!-- no need for script. the import takes care of things -->
</body>

Szenario 2: Sie haben ein Script in <head> oder inline in <body>

Wenn das Laden eines Imports lange dauert, blockiert der erste <script>, der auf den Import folgt, auf der Seite das Rendern der Seite. In Google Analytics wird beispielsweise empfohlen, den Tracking-Code in den <head> einzufügen. Wenn Sie den <script> in den <head> einfügen müssen, können Sie die Seite durch dynamisches Hinzufügen des Imports blockieren:

<head>
    <script>
    function addImportLink(url) {
        var link = document.createElement('link');
        link.rel = 'import';
        link.href = url;
        link.onload = function(e) {
        var post = this.import.querySelector('#blog-post');

        var container = document.querySelector('#container');
        container.appendChild(post.cloneNode(true));
        };
        document.head.appendChild(link);
    }

    addImportLink('/path/to/import.html'); // Import is added early :)
    </script>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...
</body>

Alternativ können Sie den Import nahe am Ende von <body> einfügen:

<head>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...

    <script>
    function addImportLink(url) { ... }

    addImportLink('/path/to/import.html'); // Import is added very late :(
    </script>
</body>

Beachte bitte Folgendes

Der MIME-Typ eines Imports ist text/html.
Ressourcen aus anderen Ursprüngen müssen CORS-kompatibel sein.
Importe von derselben URL werden einmal abgerufen und geparst. Das bedeutet, dass ein Script in einem Import nur dann ausgeführt wird, wenn der Import zum ersten Mal erfolgt ist.
In einem Import werden Skripts der Reihe nach verarbeitet, das Parsen des Hauptdokuments wird jedoch nicht blockiert.
Ein Importlink bedeutet nicht „#include the content here“ (Inhalt hier einfügen). Das bedeutet: „Parser, hol dieses Dokument, damit ich es später verwenden kann.“ Scripts werden beim Import ausgeführt, während Stylesheets, Markup und andere Ressourcen der Hauptseite explizit hinzugefügt werden müssen. Hinweis: <style> muss nicht explizit hinzugefügt werden. Das ist ein wichtiger Unterschied zwischen HTML-Importen und <iframe>, bei dem es heißt: „Lade und blende diese Inhalte hier ein“.

Fazit

Mit HTML-Importen kann HTML/CSS/JS zu einer einzigen Ressource gebündelt werden. Diese Idee ist zwar für sich genommen nützlich, wird aber in der Welt der Webkomponenten extrem leistungsfähig. Entwickler können wiederverwendbare Komponenten erstellen, die andere über <link rel="import"> nutzen und in ihre eigene App einbinden können.

HTML-Importe sind ein einfaches Konzept, ermöglichen jedoch eine Reihe interessanter Anwendungsfälle für die Plattform.

Anwendungsfälle

Verteile zugehörige HTML-/CSS-/JS-Dateien als einzelnes Bundle. Theoretisch können Sie eine ganze Webanwendung in eine andere importieren.
Codeorganisation: Segmentieren Sie Konzepte logisch in verschiedene Dateien, um Modularität und Wiederverwendbarkeit zu fördern.**
Übermitteln Sie eine oder mehrere Definitionen für benutzerdefinierte Elemente. Mit einem Import können Sie sie registrieren und in eine App einbinden. Dies entspricht guten Softwaremustern, da die Benutzeroberfläche/Definition des Elements von der Verwendung getrennt wird.
Abhängigkeiten verwalten: Ressourcen werden automatisch dedupliziert.
Chunk-Scripts: Vor dem Import wurde die Datei einer großen JS-Bibliothek vollständig geparst, um sie ausführen zu können. Das war langsam. Mit Importen kann die Bibliothek beginnen, sobald Chunk A geparst wurde. Geringere Latenz

// TODO: DevSite - Code sample removed as it used inline event handlers

Parallelisiert das HTML-Parsing: Erstmals konnte der Browser zwei (oder mehr) HTML-Parser parallel ausführen.
Ermöglicht den Wechsel zwischen Debug- und Nicht-Debug-Modus in einer App, indem Sie einfach das Importziel ändern. Ihre Anwendung muss nicht wissen, ob das Importziel eine gebündelte/kompilierte Ressource oder eine Importstruktur ist.