HTML-Importe

Für Web einschließen

Vorteile von Importen

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

  1. <iframe>: erprobt und wahr, aber ein hohes Gewicht Der Inhalt eines iFrames befindet sich vollständig in einem anderen Kontext als Ihre Seite. Das ist zwar vor allem eine tolle Funktion, bringt aber auch zusätzliche Herausforderungen mit sich: Das Minimieren der Größe des Frames im Inhalt ist schwierig, extrem frustrierend für das Scripting in/aus dem Script und lässt sich fast unmöglich gestalten.
  2. AJAX – Ich liebe xhr.responseType="document", aber Sie meinen, ich brauche JS, um HTML zu laden? Da stimmt etwas nicht.
  3. CrazyHacksTM – eingebettet in Strings, versteckt als Kommentare (z.B. <script type="text/html">).

Siehst du die Ironie? HTML, die einfachsten Inhalte des Webs, erfordern den größten Aufwand. Glücklicherweise helfen uns Webkomponenten dabei, das Problem zu beheben.

Erste Schritte

Mit HTML-Importen, einem Teil der Umwandlung Webkomponenten, können HTML-Dokumente in andere HTML-Dokumente eingefügt werden. Sie sind nicht auf Markups beschränkt. Ein Import kann auch CSS, JavaScript oder alles andere enthalten, was eine .html-Datei enthalten kann. Mit anderen Worten: Dies macht Importe zu einem fantastischen Tool zum Laden von zugehörigem HTML/CSS/JS.

Grundlagen

Deklarieren Sie einen <link rel="import">, um Ihrer Seite einen Import hinzuzufügen:

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

Die URL eines Imports wird als Importspeicherort bezeichnet. Damit Inhalte aus einer anderen Domain geladen werden können, muss der Importspeicherort CORS-aktiviert sein:

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

Funktionserkennung und Support

Prüfen Sie, ob .import für das <link>-Element vorhanden ist:

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 ist noch ganz am Anfang. Chrome 31 war der erste Browser mit einer Implementierung, aber andere Browser-Anbieter warten noch darauf, wie sich ES-Module verhalten. Für andere Browser funktioniert webcomponents.js Polyfill jedoch einwandfrei, bis alles unterstützt wird.

Ressourcen bündeln

Importe bieten Konventionen für das Bündeln von HTML/CSS/JS (auch andere HTML-Importe) zu einem einzigen Liefergegenstand. Es ist eine unverzichtbare, aber leistungsstarke Funktion. Wenn Sie ein Design oder eine Bibliothek erstellen oder Ihre App einfach in logische Blöcke aufteilen möchten, ist es besonders hilfreich, Nutzern eine einzige URL zur Verfügung zu stellen. Sie können sogar eine ganze App über einen Import bereitstellen. Denken Sie kurz darüber nach.

Ein reales Beispiel ist Bootstrap. Bootstrap besteht aus einzelnen Dateien (bootstrap.css, bootstrap.js, Schriftarten), erfordert JQuery für die Plug-ins und bietet Markup-Beispiele. Entwickelnde wie À-la-carte-Flexibilität. So können sie sich auf die Teile des Frameworks verlassen, die sie verwenden möchten. Ich wette, dass Ihr typischer JoeDeveloperTM den einfachen Weg geht und Bootstrap vollständig herunterlädt.

Importe sind für Anwendungen wie Bootstrap sehr sinnvoll. Ich stelle Ihnen die Zukunft des Ladens von Bootstrap vor:

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

Nutzer laden einfach einen HTML-Import-Link. Sie müssen sich nicht um die zerlegten Dateien drehen. Stattdessen wird die gesamte Datei Bootstrap verwaltet und in einem Import, bootstrap.html, eingebunden:

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

Lass das hier warten. Das ist eine spannende Sache.

Lade-/Fehlerereignisse

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

Importe werden sofort geladen. Um Probleme zu vermeiden, können Sie die Attribute onload/onerror verwenden:

<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

Das Einschließen eines Imports auf einer Seite bedeutet nicht, dass „den Inhalt dieser Datei hier grafisch darstellen“. Das bedeutet: „Parser, go off anfetch this document, so I can use it“. Um den Inhalt tatsächlich zu nutzen, müssen Sie Maßnahmen ergreifen und ein Skript 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 Eingeweide eines Imports mit standardmäßigen DOM APIs bearbeiten.

link.import

Verwenden Sie die Eigenschaft .import 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.
  • Für <link> ist rel="import" nicht vorhanden.
  • Das <link> wurde dem DOM nicht hinzugefügt.
  • Das <link> wurde aus dem DOM entfernt.
  • Die Ressource ist nicht CORS-fähig.

Vollständiges Beispiel

Angenommen, warnings.html enthält:

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

Importe können einen bestimmten Teil dieses Dokuments abrufen und auf ihre Seite klonen:

<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 bei Importen

Importe sind nicht im Hauptdokument vorhanden. Sie sind mit Satellit verbunden. Der Import kann jedoch weiterhin auf der Hauptseite ausgeführt werden, obwohl das Hauptdokument die Kontrolle hat. Ein Import kann auf sein eigenes DOM und/oder auf das DOM der Seite zugreifen, von der es importiert wird:

Beispiel: "import.html", die ein Stylesheet zur Hauptseite 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>

Achten Sie darauf, was hier vor sich geht. Das Skript innerhalb des Imports verweist auf das importierte Dokument (document.currentScript.ownerDocument) und hängt einen Teil des Dokuments an die Importseite (mainDoc.head.appendChild(...)) an. Das ist ziemlich knister, wenn Sie mich fragen.

JavaScript-Regeln beim Import:

  • Das Script im Import wird im Kontext des Fensters ausgeführt, das die importierende document enthält. Daher bezieht sich window.document auf das Dokument auf der Hauptseite. Daraus ergeben sich zwei hilfreiche Ergänzungen:
    • In einem Import definierte Funktionen enden am window.
    • Sie müssen keine schwierigen Schritte ausführen, z. B. die <script>-Blöcke des Imports an die Hauptseite anhängen. Auch hier wird das Skript ausgeführt.
  • Importe blockieren nicht das Parsen der Hauptseite. Die darin enthaltenen Skripts werden jedoch der Reihe nach verarbeitet. Das bedeutet, dass Sie verzögerungsähnliches Verhalten erzielen und gleichzeitig die richtige Skriptreihenfolge beibehalten können. Mehr dazu weiter unten.

Bereitstellung von Webkomponenten

Das Design von HTML-Importen eignet sich gut, um wiederverwendbare Inhalte ins Web zu laden. Insbesondere ist dies eine ideale Möglichkeit, Webkomponenten zu verteilen. Von einfachen HTML-<template> bis hin zu vollständigen benutzerdefinierten Elementen mit Shadow DOM [1, 2, 3]. Wenn diese Technologien zusammen verwendet werden, werden Importe zu einem #include für Webkomponenten.

Einschließlich Vorlagen

Das HTML-Vorlagenelement ist für HTML-Importe geeignet. <template> eignet sich hervorragend, um Markup-Abschnitte zu erstellen, die die Import-App nach Bedarf verwenden kann. Das Einbinden von Inhalten in ein <template>-Element bietet außerdem den Vorteil, dass der Inhalt inaktiv wird, bis er verwendet wird. Das heißt, Skripts werden erst ausgeführt, 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 ist eine weitere Webkomponenten-Technologie, die sich absurd gut mit HTML-Importen auswirkt. Importe können Skripte ausführen. Warum definieren und registrieren Sie nicht einfach Ihre benutzerdefinierten Elemente, damit Nutzer dies nicht tun müssen? Nennen Sie es "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>

Durch diesen Import werden die beiden Elemente <say-hi> und <shadow-element> definiert (und registriert). Das erste zeigt ein grundlegendes benutzerdefiniertes Element, das sich selbst 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 an der Registrierung benutzerdefinierter Elemente in einem HTML-Import ist, dass der Importer 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>

Meiner Meinung nach macht dieser Workflow allein HTML-Importe zu einer idealen Möglichkeit, Webkomponenten gemeinsam zu nutzen.

Abhängigkeiten und Unterimporte verwalten

Untergeordnete Importe

Es kann hilfreich sein, wenn ein Import einen anderen einschließt. Wenn Sie beispielsweise eine andere Komponente wiederverwenden oder erweitern möchten, verwenden Sie einen Import, um die anderen Elemente zu laden.

Unten sehen Sie ein echtes Beispiel von Polymer. Es handelt sich um eine neue Tabkomponente (<paper-tabs>), die eine Layout- und Auswahlkomponente wiederverwendet. Die Abhängigkeiten werden mithilfe von HTML-Importen 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 folgendermaßen importieren:

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

Wenn zukünftig ein neues, noch besseres <iron-selector2> auf den Markt kommt, können Sie <iron-selector> austauschen und sofort verwenden. Dank Importen und Webkomponenten werden Ihre Nutzer nicht unterbrochen.

Abhängigkeitsverwaltung

Wir alle wissen, dass das mehr als einmal pro Seite geladene JQuery Fehler verursacht. Wird das nicht ein großes Problem für Webkomponenten sein, wenn mehrere Komponenten dieselbe Bibliothek verwenden? Nicht mit HTML-Importen! Sie können zum Verwalten von Abhängigkeiten verwendet werden.

Durch das Einbinden von Bibliotheken in einen HTML-Import werden doppelte Ressourcen automatisch dedupliziert. Das Dokument wird nur einmal geparst. Skripts werden nur einmal ausgeführt. Angenommen, Sie definieren einen Import, jquery.html, der eine Kopie von JQuery lädt.

jquery.html

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

Dieser Import kann so in nachfolgenden Importen 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 sie die Bibliothek benötigt:

<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 Importstrukturen enthalten ist, wird das Dokument nur einmal vom Browser abgerufen und verarbeitet. Die Untersuchung des Netzwerkbereichs zeigt Folgendes:

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

Hinweise zur Leistung

HTML-Importe sind wirklich genial, aber wie jede neue Webtechnologie sollten Sie auch diese mit Bedacht einsetzen. Best Practices für die Webentwicklung gelten nach wie vor. Beachten Sie dabei Folgendes.

Importe verketten

Es ist immer wichtig, Netzwerkanfragen zu reduzieren. Wenn Sie viele Importlinks der obersten Ebene haben, sollten Sie sie in einer einzigen Ressource kombinieren und diese Datei importieren.

Vulcanize ist ein NPM-Build-Tool des Polymer-Teams, mit dem mehrere HTML-Importe rekursiv in einer einzigen Datei vereinfacht werden. Stellen Sie sich dies als einen Verkettungs-Build-Schritt für Webkomponenten vor.

Importe nutzen Browser-Caching

Viele vergessen, dass der Netzwerkstack des Browsers im Laufe der Jahre fein abgestimmt wurde. Auch Importe (und Subimporte) nutzen diese Logik. Der http://cdn.com/bootstrap.html-Import kann Unterressourcen haben, die aber im Cache gespeichert werden.

Inhalte sind nur sinnvoll, wenn sie hinzugefügt werden

Betrachte Inhalte als unwirksam, bis du ihre Dienste in Anspruch nimmst. Verwenden Sie ein normales, dynamisch erstelltes Stylesheet:

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

Der Browser fordert „styles.css“ erst dann an, wenn dem DOM link 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.

Dasselbe gilt für das Importdokument. Sofern Sie seinen Inhalt nicht an das DOM anhängen, ist dies ein Leerbefehl. Tatsächlich wird im Importdokument nur direkt <script> „ausgeführt“. Siehe Scripting von Importen.

Für asynchrones Laden optimieren

Block-Rendering importieren

Importiert das Rendern der Hauptseite, um das Bild zu blockieren. Ähnlich wie bei <link rel="stylesheet">. Der Grund dafür ist, dass der Browser das Rendern von Stylesheets blockiert, um FOUC zu minimieren. Importe verhalten sich ähnlich, da sie Stilblätter enthalten können.

Wenn Sie vollständig asynchron arbeiten und den Parser oder das Rendering nicht blockieren möchten, 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, weil Entwickler bei diesem Import mehr Arbeit leisten müssen. Synchron bedeutet standardmäßig, dass HTML-Importe, die Definitionen benutzerdefinierter Elemente enthalten, garantiert der Reihe nach geladen und aktualisiert werden. In einer vollkommen asynchronen Welt müssten Entwickler den Tanz selbst verwalten und die Timings ändern.

Sie können auch dynamisch einen asynchronen Import erstellen:

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

Importe blockieren nicht das Parsing

Importe blockieren nicht das Parsen der Hauptseite. Skripts innerhalb von Importen werden der Reihe nach verarbeitet, blockieren die Importseite aber nicht. Das bedeutet, dass Sie verzögerungsähnliches Verhalten erzielen und gleichzeitig die richtige Skriptreihenfolge beibehalten können. Ein Vorteil der Importe in <head> besteht darin, dass der Parser so schnell wie möglich mit der Arbeit am Inhalt beginnen kann. Denken Sie aber daran, dass <script> im Hauptdokument weiterhin die Seite blockiert. Der erste <script> nach einem Import blockiert das Rendern der Seite. 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, asynchrones Verhalten zu optimieren. Mit den folgenden Methoden können Sie das Rendern der Hauptseite verhindern.

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

Ich empfehle Ihnen, <script> nicht direkt nach Ihren Importen zu platzieren. Verschiebe die Skripte so früh wie möglich im Spiel – aber du führst diese Best Practice bereits um.

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 befindet sich unten.

Szenario 1.5: Der Import wird automatisch hinzugefügt

Eine andere Möglichkeit ist, dass der Import seinen eigenen Inhalt hinzufügt. Wenn der Importautor einen Vertrag mit dem App-Entwickler schließt, kann sich der Import selbst zu einem Bereich der Hauptseite hinzufügen:

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 Skript in <head> oder inline in <body>

Wenn das Laden eines Imports sehr lange dauert, wird das Rendern der Seite durch den ersten <script>, der darauf folgt, blockiert. In Google Analytics wird beispielsweise empfohlen, den Tracking-Code in <head> einzufügen. Wenn Sie <script> nicht in die <head> einfügen können, wird durch das dynamische Hinzufügen des Imports verhindert, dass die Seite blockiert wird:

<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 gegen Ende von <body> 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>

Wichtige Hinweise

  • Der MIME-Typ eines Imports ist text/html.

  • Ressourcen aus anderen Quellen müssen CORS-fähig 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 gesehen wird.

  • Die Skripts in einem Import werden der Reihe nach verarbeitet, blockieren jedoch nicht das Parsen des Hauptdokuments.

  • Ein Importlink bedeutet nicht „#include the content here“. Es bedeutet „Parser, go off an query this document, so I can use it Later“. Während Skripts beim Import ausgeführt werden, müssen Stylesheets, Markups und andere Ressourcen explizit zur Hauptseite hinzugefügt werden. Hinweis: <style> müssen nicht explizit hinzugefügt werden. Dies ist ein wesentlicher Unterschied zwischen HTML-Importen und <iframe>, in dem „diese Inhalte hier laden und rendern“ angegeben ist.

Fazit

HTML-Importe ermöglichen das Bündeln von HTML/CSS/JS als eine Ressource. Obwohl diese Idee an sich durchaus nützlich ist, wird sie in der Welt der Webkomponenten äußerst wirkungsvoll. Entwickler können wiederverwendbare Komponenten erstellen, die andere nutzen und in ihre eigene App einbinden können – alles über <link rel="import">.

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

Anwendungsfälle

  • Verteilen Ähnliche HTML/CSS/JS als ein einzelnes Bundle. Theoretisch können Sie eine ganze Webanwendung in eine andere importieren.
  • Codeorganisation: Konzepte logisch in verschiedene Dateien aufteilen, um Modularität und Wiederverwendbarkeit zu fördern**
  • Eine oder mehrere Definitionen für benutzerdefinierte Elemente liefern. Mit einem Import können sie register und in eine App eingebunden werden. Dabei werden gute Softwaremuster verwendet, bei denen die Benutzeroberfläche/Definition des Elements von der Verwendung getrennt bleibt.
  • Abhängigkeiten verwalten: Ressourcen werden automatisch dedupliziert.
  • Chunk-Scripts: Vor dem Import wurde die Datei einer großen JS-Bibliothek vollständig geparst, um mit der Ausführung zu beginnen. Dies war langsam. Mit Importen kann die Bibliothek mit der Arbeit beginnen, sobald Chunk A geparst wurde. Weniger Latenz!
// TODO: DevSite - Code sample removed as it used inline event handlers

  • Parallelisiert das HTML-Parsing: Das erste Mal, dass der Browser zwei (oder mehr) HTML-Parser parallel ausführen konnte.

  • Wechselt in einer App zwischen Debug- und Nicht-Debug-Modus, indem Sie einfach das Importziel selbst ändern. Ihre Anwendung muss nicht wissen, ob das Importziel eine gebündelte/kompilierte Ressource oder eine Importstruktur ist.