HTML-Importe

Für Web einschließen

Warum Importe?

Überlegen Sie, wie Sie verschiedene Arten von Ressourcen im Web laden. Für JS haben 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 kann auf einfache und deklarative Weise geladen werden. Bei HTML ist das nicht der Fall. Sie haben folgende Möglichkeiten:

  1. <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.
  2. AJAX – Ich liebe xhr.responseType="document", aber Sie sagen, dass ich JS zum Laden von HTML brauche? Das kann nicht stimmen.
  3. 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üfe, ob .import im Element <link> vorhanden ist:

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

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

Der Browsersupport befindet sich noch in der Anfangsphase. 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. Für andere Browser funktioniert jedoch die webcomponents.js-Polyfill hervorragend, bis die Funktionen allgemein unterstützt werden.

Ressourcen bündeln

Importe bieten eine Möglichkeit, HTML-/CSS-/JS-Dateien (auch andere HTML-Importe) in einem einzigen Deliverable zu bündeln. Es ist eine grundlegende, aber leistungsstarke Funktion. 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 einmal 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.“ Wenn Sie die Inhalte tatsächlich verwenden möchten, müssen Sie ein Script schreiben.

Ein wichtiger aha!-Moment ist die Erkenntnis, 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

Um auf den Inhalt eines Imports zuzugreifen, verwende die Property .import des Linkelements:

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

link.import ist null unter folgenden Bedingungen:

  • Der Browser unterstützt keine HTML-Importe.
  • Die <link> hat keine rel="import".
  • Das <link> wurde dem DOM nicht hinzugefügt.
  • Die <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>

Scripts in Importen

Importe sind nicht im Hauptdokument enthalten. Sie sind Satelliten davon. 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 werden in window gespeichert.
    • 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 Verzögerung erhalten, während die richtige Scriptreihenfolge beibehalten wird. Weitere Informationen dazu finden Sie unten.

Webkomponenten ausliefern

Das Design von HTML-Importen eignet sich gut zum 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]. Wenn diese Technologien zusammen verwendet werden, werden Importe zu einer #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 heißt, Scripts werden erst ausgeführt, wenn die Vorlage dem 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>. Im ersten Beispiel wird ein einfaches benutzerdefiniertes Element gezeigt, das sich im Import registriert. Das zweite Beispiel zeigt, 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 Verkabelung 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

Unterimporte

Es kann hilfreich 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 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>

Sogar 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:

jquery.html wird einmal angefordert
jquery.html wird einmal angefordert

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 weiterhin. Beachten Sie dabei Folgendes:

Importe zusammenführen

Die Reduzierung von Netzwerkanfragen ist immer wichtig. Wenn Sie viele Importlinks der obersten Ebene haben, sollten Sie sie in einer einzigen Ressource zusammenfassen 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. Sie können es als Build-Schritt für Webkomponenten betrachten.

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 http://cdn.com/bootstrap.html-Import kann untergeordnete Ressourcen enthalten, die aber im Cache gespeichert werden.

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

Inhalte sind inaktiv, bis Sie ihre Dienste aufrufen. 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!';

Das 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 ähnlich wie bei <link rel="stylesheet">. 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. „Synchron“ bedeutet standardmäßig, dass HTML-Importe mit benutzerdefinierten Elementdefinitionen 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 aber nicht die Importseite. Das bedeutet, dass Sie ein ähnliches Verhalten wie bei der Verzögerung 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 Script enthalten kann, das vor dem Script 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 inline-Script in <body>

Ich empfehle, <script> nicht direkt nach den Importen 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>

Alles ist 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 ein Import lange zum Laden braucht, wird das Rendern der Seite durch das erste <script> blockiert, das ihm auf der Seite folgt. 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 auch gegen Ende der <body>-Datei hinzufü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 das Script in einem Import nur beim ersten Mal ausgeführt wird, wenn der Import erkannt wird.

  • Scripts in einem Import werden der Reihe nach verarbeitet, blockieren aber nicht das Parsen des Hauptdokuments.

  • 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 können Sie HTML-, CSS- und JS-Dateien in einer einzigen Ressource bündeln. 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 verwenden und in ihre eigene App einbinden können. Diese Komponenten werden über <link rel="import"> bereitgestellt.

HTML-Importe sind ein einfaches Konzept, ermöglichen aber 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 register 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. Bei Importen kann die Bibliothek sofort mit der Arbeit beginnen, sobald Block A geparst wurde. Weniger Latenz!
// TODO: DevSite - Code sample removed as it used inline event handlers
  • Paralleles HTML-Parsen: Erstmals kann 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 App muss nicht wissen, ob das Importziel eine gebündelte/kompilierte Ressource oder ein Importbaum ist.