Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Импорт HTML: #include для Интернета

  1. Почему импорт?
  2. Начиная
  3. Основы
  4. Обнаружение и поддержка функций
  5. Связывание ресурсов
  6. События загрузки / ошибки
  7. Использование контента
  8. link.import
  9. Сценарии в импорте
  10. Доставка веб-компонентов
  11. Включая шаблоны
  12. Регистрация пользовательских элементов
  13. Управление зависимостями и суб-импортом
  14. Управление зависимостями
  15. Импортирует кеширование в браузере
  16. Содержание полезно только тогда, когда вы добавляете его
  17. Оптимизация для асинхронной загрузки
  18. Импорт не блокирует разбор
  19. То, что нужно запомнить
  20. Заключение
  21. Случаи применения

Почему импорт?

Подумайте о том, как вы загружаете различные типы ресурсов в Интернете. Для JS у нас есть <script src>. Для CSS ваш переход, вероятно, <link rel = "stylesheet">. Для изображений это <img>. Видео имеет <видео>. Аудио, <аудио> .... Доберитесь до сути! Большая часть веб-контента имеет простой и декларативный способ загрузки самого себя. Не так для HTML. Вот ваши варианты:

  1. <iframe> - проверенный и верный, но тяжелый вес. Содержимое iframe полностью находится в отдельном контексте, чем ваша страница. Хотя это, в основном, отличная функция, она создает дополнительные проблемы (сокращение размера кадра до его содержимого является сложным, безумно неприятным для сценария в / из, почти невозможно стилизовать).
  2. AJAX - Я люблю xhr.responseType = "document" , но вы говорите, мне нужен JS для загрузки HTML? Это не кажется правильным.
  3. CrazyHacks ™ - встраивается в строки, скрывается как комментарии (например, <script type = "text / html">). Тьфу!

Видишь иронию? Основной элемент веб-контента, HTML, требует огромных усилий для работы . К счастью, Веб-компоненты здесь, чтобы вернуть нас в нужное русло.

Начиная

HTML импорт , часть Веб-компоненты литье, это способ включить документы HTML в другие документы HTML. Вы не ограничены разметкой либо. Импорт также может включать CSS, JavaScript или что-либо еще, что может содержать файл .html. Другими словами, это делает импорт фантастическим инструментом для загрузки связанных HTML / CSS / JS .

Основы

Включите импорт на своей странице, объявив <link rel = "import">:

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

URL-адрес импорта называется местоположением импорта . Чтобы загрузить контент из другого домена, местоположение импорта должно быть с поддержкой CORS:

<! - Ресурсы из других источников должны быть с поддержкой CORS. -> <link rel = "import" href = "http://example.com/elements.html">

Сетевой стек браузера автоматически удаляет все запросы с одного и того же URL. Это означает, что импорт, ссылающийся на один и тот же URL-адрес, извлекается только один раз. Независимо от того, сколько раз загружается импорт в одном месте, он выполняется только один раз.

Обнаружение и поддержка функций

Чтобы определить поддержку, проверьте, существует ли .import в элементе <link>:

function supportImports () {return 'import' в document.createElement ('link'); } if (supportImports ()) {// Хорошо! } else {// Использовать другие библиотеки / требовать системы для загрузки файлов. }

Поддержка браузера все еще находится на ранних стадиях. Chrome 31 был первым браузером, который увидел реализацию, но другие производители браузеров ждут, чтобы увидеть, как работают модули ES. Однако для других браузеров webcomponents.js polyfill прекрасно работает, пока все не получит широкую поддержку.

Связывание ресурсов

Импорт обеспечивает соглашение для объединения HTML / CSS / JS (даже других импортов HTML) в один результат. Это внутренняя особенность, но мощная. Если вы создаете тему, библиотеку или просто хотите сегментировать свое приложение на логические порции, предоставление пользователям одного URL-адреса является убедительным. Черт возьми, вы даже можете импортировать целое приложение через импорт. Подумайте об этом на секунду.

Реальный пример начальная загрузка , Bootstrap состоит из отдельных файлов (bootstrap.css, bootstrap.js, шрифтов), требует JQuery для своих плагинов и предоставляет примеры разметки. Разработчикам нравится а ля карт гибкость. Это позволяет им покупать те части каркаса, которые они хотят использовать. Тем не менее, я держу пари, что ваш типичный JoeDeveloper ™ идет по простому пути и загружает все Bootstrap.

Импорт имеет массу смысла для чего-то вроде Bootstrap. Представляю вам будущее загрузки Bootstrap:

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

Пользователи просто загружают ссылку HTML Import. Им не нужно суетиться с разбросом файлов. Вместо этого весь Bootstrap управляется и упаковывается в импорт, bootstrap.html:

<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> ... <! - разметка лесов - -> <шаблон> ... </ template>

Позволь этому сидеть. Это захватывающие вещи.

События загрузки / ошибки

Элемент <link> инициирует событие загрузки, когда импорт успешно загружен, и ошибку, если попытка не удалась (например, если ресурс 404s).

Импорт пытается загрузить сразу. Самый простой способ избежать головной боли - использовать атрибуты onload / onerror:

<script> function handleLoad (e) {console.log ('Загруженный импорт:' + e.target.href); } function handleError (e) {console.log ('Ошибка загрузки импорта:' + e.target.href); } </ script> <link rel = "import" href = "file.html" onload = "handleLoad (событие)" onerror = "handleError (событие)">

Обратите внимание, что обработчики событий определены до загрузки импорта на страницу. Браузер пытается загрузить импорт, как только встретит тег. Если функции еще не существуют, вы получите консольные ошибки для неопределенных имен функций.

Или, если вы создаете импорт динамически:

var link = document.createElement ('ссылка'); link.rel = 'import'; link.href = 'file.html'; //link.setAttribute('async ',' '); // сделать это асинхронным! link.onload = function (e) {...}; link.onerror = function (e) {...}; document.head.appendChild (ссылка);

Использование контента

Включение импорта на страницу не означает «поместите содержимое этого файла сюда». Это означает «парсер, иди и возьми этот документ, чтобы я мог его использовать». Чтобы реально использовать контент, вы должны принять меры и написать скрипт.

Критическая ага! момент понимает, что импорт это просто документ. Фактически содержимое импорта называется документом импорта . Вы можете управлять внутренностями импорта, используя стандартные API DOM !

link.import

Чтобы получить доступ к содержимому импорта, используйте свойство .import элемента ссылки:

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

link.import имеет значение null при следующих условиях:

  • Браузер не поддерживает импорт HTML.
  • У <link> нет rel = "import".
  • <Ссылка> не была добавлена ​​в DOM.
  • <Ссылка> была удалена из DOM.
  • Ресурс не поддерживает CORS.

Полный пример

Допустим, что warnings.html содержит:

<div class = "warning"> <style> h3 {color: red! важный; } </ style> <h3> Внимание! </ h3> <p> Эта страница находится в разработке </ p> </ div> <div class = "устарело"> <h3> Heads up! </ h3> <p > Это содержание может быть устаревшим </ p> </ div>

Импортеры могут получить определенную часть этого документа и клонировать ее на свою страницу:

<head> <link rel = "import" href = "warnings.html"> </ head> <body> ... <script> var link = document.querySelector ('link [rel = "import"]'); var content = link.import; // Получить DOM из документа warning.html. var el = content.querySelector ('. warning'); document.body.appendChild (el.cloneNode (истина)); </ script> </ body>

Сценарии в импорте

Импорт не в основном документе. Они спутник этого. Тем не менее, ваш импорт все еще может действовать на главной странице, хотя основной документ царит. Импорт может получить доступ к своему собственному DOM и / или DOM страницы, которая его импортирует:

Пример - import.html, который добавляет одну из своих таблиц стилей на главную страницу

<link rel = "stylesheet" href = "http://www.example.com/styles.css"> <link rel = "stylesheet" href = "http://www.example.com/styles2.css"> <style> / * Примечание: <style> при импорте применяется к основному документу по умолчанию. То есть теги стилей не нужно явно добавлять в основной документ. * / # некоторый контейнер {цвет: синий; } </ style> ... <script> // importDoc ссылается на документ этого импорта var importDoc = document.currentScript.ownerDocument; // mainDoc ссылается на основной документ (страницу, которая нас импортирует) var mainDoc = document; // Получаем первую таблицу стилей из этого импорта, клонируем ее // и добавляем в импортирующий документ. var styles = importDoc.querySelector ('link [rel = "stylesheet"]'); mainDoc.head.appendChild (styles.cloneNode (истина)); </ Скрипт>

Обратите внимание, что здесь происходит. Сценарий внутри импорта ссылается на импортированный документ (document.currentScript.ownerDocument) и добавляет часть этого документа на страницу импорта (mainDoc.head.appendChild (...)). Довольно грубый, если вы спросите меня.

Правила JavaScript в импорте:

  • Скрипт при импорте выполняется в контексте окна, содержащего импортируемый документ. Таким образом, window.document относится к документу главной страницы. Это имеет два полезных следствия:
    • функции, определенные в импорте, попадают в окно.
    • вам не нужно делать что-то сумасшедшее, например, добавлять блоки <script> импорта на главную страницу. Снова, сценарий выполняется.
  • Импорт не блокирует парсинг главной страницы. Однако скрипты внутри них обрабатываются по порядку. Это означает, что вы получаете поведение, подобное отложенному при сохранении правильного порядка в сценарии. Подробнее об этом ниже.

Доставка веб-компонентов

Дизайн HTML Imports прекрасно подходит для загрузки многоразового контента в Интернете. В частности, это идеальный способ распространения веб-компонентов. Все от базового HTML <шаблон> с полным ходом Пользовательские Элементы с Shadow DOM [ 1 , 2 , 3 ]. Когда эти технологии используются в тандеме, импорт становится #включают для веб-компонентов.

Включая шаблоны

HTML шаблон Элемент естественным образом подходит для импорта HTML. <template> отлично подходит для создания разделов разметки, которую импортирующее приложение может использовать по своему усмотрению. Обтекание содержимого в <template> также дает вам дополнительное преимущество, заключающееся в том, что содержимое остается инертным до момента его использования. То есть сценарии не запускаются, пока шаблон не будет добавлен в DOM). Boom!

import.html

<template> <h1> Hello World! </ h1> <! - Img не запрашивается до запуска <template>. -> <img src = "world.png"> <script> alert («Выполняется при активации шаблона.»); </ script> </ template>

index.html

<head> <link rel = "import" href = "import.html"> </ head> <body> <div id = "container"> </ div> <script> var link = document.querySelector ('link [ отн = "импорт"] '); // Клонировать <шаблон> в импорте. var template = link.import.querySelector ('template'); var clone = document.importNode (template.content, true); document.querySelector ( '# контейнер') AppendChild (клон). </ script> </ body>

Регистрация пользовательских элементов

Пользовательские Элементы это еще одна технология веб-компонентов, которая до абсурда хорошо работает с HTML-импортом. Импорт может выполнить скрипт так почему бы не определить + зарегистрировать ваши пользовательские элементы, чтобы пользователи не должны были это делать? Назовите это ... "авторегистрация".

elements.html

<script> // Определить и зарегистрировать <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> Я являюсь теневым элементом, использующим Shadow DOM! </ span> <content> </ content> </ template> <script> (function () {var importDoc = document.currentScript.ownerDocument ; // importee // Определим и зарегистрируем <shadow-element> //, который использует Shadow DOM и шаблон. var proto2 = Object.create (HTMLElement.prototype); proto2.createdCallback = function () {// получить шаблон при импорте var template = importDoc.querySelector ('# t'); // импортировать шаблон в var clone = document.importNode (template.content, true); var root = this.createShadowRoot (); root.appendChild (clone);}; document.registerElement ('shadow-element', {prototype: proto2});}) (); </ Скрипт>

Этот импорт определяет (и регистрирует) два элемента, <say-hi> и <shadow-element>. Первый показывает основной пользовательский элемент, который регистрируется внутри импорта. Во втором примере показано, как реализовать пользовательский элемент, который создает Shadow DOM из <template>, а затем регистрирует себя.

Лучшая часть регистрации пользовательских элементов в импорте HTML заключается в том, что импортер просто объявляет ваш элемент на своей странице. Не требуется проводка.

index.html

<head> <link rel = "import" href = "elements.html"> </ head> <body> <say-hi name = "Eric"> </ say-hi> <shadow-element> <div> ( Я в лучах света) </ div> </ shadow-element> </ body>

По моему мнению, один только этот рабочий процесс делает HTML-импорт идеальным способом обмена веб-компонентами.

Управление зависимостями и суб-импортом

Йоу Дауг. Я слышал, вы любите импорт, поэтому я включил импорт в ваш импорт.

Суб-импорт

Для одного импорта может быть полезно включить другой. Например, если вы хотите повторно использовать или расширить другой компонент, используйте импорт для загрузки других элементов.

Ниже приведен реальный пример из полимер , Это новый компонент вкладок (<paper-tabs>), который повторно использует компонент макета и селектора. Зависимости управляются с помощью HTML-импорта.

paper-tabs.html (упрощенно):

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

полный источник

Разработчики приложений могут импортировать этот новый элемент, используя:

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

Когда в будущем появится новый, более удивительный <iron-selector2>, вы можете поменять <iron-selector> и сразу начать его использовать. Вы не сломаете своих пользователей благодаря импорту и веб-компонентам.

Управление зависимостями

Все мы знаем, что загрузка JQuery более одного раза на страницу вызывает ошибки. Не станет ли это большой проблемой для веб-компонентов, когда несколько компонентов используют одну и ту же библиотеку? Нет, если мы используем импорт HTML! Их можно использовать для управления зависимостями.

Оборачивая библиотеки в HTML-импорт, вы автоматически восстанавливаете ресурсы. Документ анализируется только один раз. Скрипты выполняются только один раз. Например, скажем, вы определяете импорт, jquery.html, который загружает копию JQuery.

jquery.html

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

Этот импорт может быть повторно использован в последующем импорте следующим образом:

import2.html

<link rel = "import" href = "jquery.html"> <div> Здравствуйте, я импортирую 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}); </ Скрипт>

Даже сама главная страница может включать jquery.html, если ей нужна библиотека:

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

Несмотря на то, что jquery.html включен во многие различные деревья импорта, его документ выбирается и обрабатывается только один раз браузером. Проверка сетевой панели доказывает это:

jquery.html запрашивается один раз

Импорт HTML - это просто потрясающе, но, как и с любой новой веб-технологией, вы должны использовать их с умом. Лучшие практики веб-разработки все еще сохраняются. Ниже приведены некоторые вещи, которые нужно иметь в виду.

Сокращение сетевых запросов всегда важно. Если у вас много ссылок для импорта верхнего уровня, рассмотрите возможность объединения их в один ресурс и импорта этого файла!

вулканизировать это инструмент сборки npm из полимер Команда, которая рекурсивно сводит набор HTML-импорта в один файл. Думайте об этом как о шаге компоновки для веб-компонентов.

Импортирует кеширование в браузере

Многие люди забывают, что сетевой стек браузера был точно настроен за эти годы. Импорт (и суб-импорт) также использует эту логику. Http://cdn.com/bootstrap.html import может иметь подресурсы, но они будут кэшироваться.

Содержание полезно только тогда, когда вы добавляете его

Думайте о контенте как о инертном, пока не вызовете его услуги. Возьмите нормальную, динамически созданную таблицу стилей:

var link = document.createElement ('ссылка'); link.rel = 'таблица стилей'; link.href = 'styles.css';

Браузер не будет запрашивать styles.css, пока ссылка не будет добавлена ​​в DOM:

document.head.appendChild (ссылка); // браузер запрашивает styles.css

Другой пример - динамически создаваемая разметка:

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

H2 является относительно бессмысленным, пока вы не добавите его в DOM.

То же самое относится и к импортному документу. Если вы не добавите его содержимое в DOM, это не будет. Фактически, единственное, что «выполняется» в импортируемом документе напрямую - это <script>. Увидеть скриптинг в импорте ,

Оптимизация для асинхронной загрузки

Импортирует блок рендеринга

Импортирует блок рендеринга главной страницы . Это похоже на то, что делает <link rel = "stylesheet">. Причина, по которой браузер в первую очередь блокирует рендеринг таблиц стилей, заключается в минимизации FOUC. Импорт ведет себя аналогично, потому что он может содержать таблицы стилей.

Чтобы быть полностью асинхронным и не блокировать анализатор или рендеринг, используйте атрибут async:

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

Причина, по которой асинхронность не используется по умолчанию для импорта HTML, заключается в том, что от разработчиков требуется больше работы. Синхронный по умолчанию означает, что HTML-импортеры, которые имеют собственные определения элементов внутри, гарантированно загружаются и обновляются по порядку. В полностью асинхронном мире разработчикам придется самим управлять этим танцем и обновлять тайминги.

Вы также можете динамически создавать асинхронный импорт:

var l = document.createElement ('ссылка'); l.rel = 'import'; l.href = 'elements.html'; l.setAttribute ('async', ''); l.onload = function (e) {...};

Импорт не блокирует разбор

Импорт не блокирует разбор главной страницы . Скрипты внутри импорта обрабатываются по порядку, но не блокируют страницу импорта. Это означает, что вы получаете поведение, подобное отложенному при сохранении правильного порядка в сценарии. Одно из преимуществ размещения импорта в <head> заключается в том, что он позволяет анализатору начать работу с контентом как можно скорее. При этом важно помнить, что <script> в основном документе все еще продолжает блокировать страницу. Первый <script> после импорта заблокирует визуализацию страницы. Это потому, что импорт может иметь скрипт внутри, который должен быть выполнен перед скриптом на главной странице.

<head> <link rel = "import" href = "/ path / to / import_that_takes_5secs.html"> <script> console.log («Я блокирую рендеринг страницы»); </ script> </ head>

В зависимости от структуры вашего приложения и варианта использования существует несколько способов оптимизации асинхронного поведения. Методы ниже уменьшают блокировку рендеринга главной страницы.

Сценарий № 1 (предпочтительно): у вас нет сценария в <head> или встроенного в <body>

Моя рекомендация по размещению <script> состоит в том, чтобы сразу же не следовать вашим импортам. Перемещайте сценарии как можно позже в игре ... но вы уже делаете эту лучшую практику, НЕ ВЫ !? ;)

Вот пример:

<head> <link rel = "import" href = "/ path / to / import.html"> <link rel = "import" href = "/ path / to / import2.html"> <! - избегать включения скрипта -> </ head> <body> <! - избегать включения скрипта -> <div id = "container"> </ div> <! - избегать включения скрипта -> ... <script> // Другие сценарии и прочее. // Введите содержимое для импорта. var link = document.querySelector ('link [rel = "import"]'); var post = link.import.querySelector ('# blog-post'); var container = document.querySelector ('# container'); container.appendChild (post.cloneNode (истина)); </ script> </ body>

Все внизу.

Сценарий 1.5: импорт добавляет себя

Другим вариантом является импорт добавить свой собственный контент , Если автор импорта устанавливает контракт для разработчика приложения, импорт может добавить себя в область главной страницы:

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 (истина)); </ Скрипт>

index.html

<head> <link rel = "import" href = "/ path / to / import.html"> </ head> <body> <! - сценарий не требуется. импорт заботится о вещах -> </ body>

Сценарий № 2: у вас есть сценарий в <head> или встроенный в <body>

Если у вас есть импорт, который загружается очень долго, первый <script>, следующий за ним на странице, заблокирует отображение страницы. Например, Google Analytics рекомендует помещать код отслеживания в <head>. Если вы не можете избежать добавления <script> в <head>, динамическое добавление импорта предотвратит блокировку страницы:

<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 (истина)); }; document.head.appendChild (ссылка); } addImportLink ('/ path / to / import.html'); // Импорт добавляется рано :) </ script> <script> // другие скрипты </ script> </ head> <body> <div id = "container"> </ div> ... </ body>

В качестве альтернативы добавьте импорт в конце <body>:

<head> <script> // другие скрипты </ script> </ head> <body> <div id = "container"> </ div> ... <script> функция addImportLink (url) {...} addImportLink ( '/path/to/import.html'); // Импорт добавлен очень поздно :( </ script> </ body>

Примечание: этот самый последний подход наименее предпочтителен. Синтаксический анализатор не начинает работать с содержимым импорта до позднего времени на странице.

То, что нужно запомнить

  • Mimetype импорта - это text / html.

  • Ресурсы из других источников должны быть с поддержкой CORS.

  • Импорт с одного и того же URL-адреса извлекается и анализируется один раз. Это означает, что скрипт в импорте выполняется только при первом просмотре импорта.

  • Сценарии в импорте обрабатываются по порядку, но не блокируют основной анализ документа.

  • Ссылка на импорт не означает "#включить содержимое здесь". Это означает «парсер, иди, возьми этот документ, чтобы я мог использовать его позже». Хотя сценарии выполняются во время импорта, таблицы стилей, разметка и другие ресурсы необходимо явно добавлять на главную страницу. Обратите внимание, что <style> не нужно добавлять явно. В этом основное различие между HTML-импортом и <iframe>, в котором говорится «загружайте и отображайте этот контент здесь».

Заключение

Импорт HTML позволяет объединять HTML / CSS / JS в единый ресурс. Хотя эта идея полезна сама по себе, она становится чрезвычайно мощной в мире веб-компонентов. Разработчики могут создавать повторно используемые компоненты, чтобы другие могли их использовать и вносить в свое собственное приложение, причем все они доставляются через <link rel = "import">.

Импорт HTML представляет собой простую концепцию, но включает ряд интересных вариантов использования для платформы.

Случаи применения

  • Распределить связанные HTML / CSS / JS как один пакет , Теоретически вы можете импортировать целое веб-приложение в другое.
  • Организация кода - логически сегментируйте концепции в разные файлы, поощряя модульность и возможность повторного использования **.
  • Доставить один или несколько Таможенный элемент определения. Импорт может быть использован для регистр и включить их в приложение. Это практикует хорошие программные шаблоны, отделяя интерфейс / определение элемента от того, как он используется.
  • Управление зависимостями - ресурсы автоматически дублируются.
  • Скрипты чанков - перед импортом большая библиотека JS должна была бы полностью проанализировать свой файл, чтобы запустить его, что было медленно. При импорте библиотека может начать работать, как только будет проанализирован фрагмент A. Меньше задержек!

    <link rel = "import" href = "chunks.html">:

    <script> / * блок скрипта A идет сюда * / </ script> <script> / * блок скрипта B идет сюда * / </ script> <script> / * блок скрипта C идет сюда * / </ script> .. ,
  • Распараллеливает разбор HTML - впервые браузер смог запустить два (или более) парсера HTML параллельно.

  • Позволяет переключаться между режимами отладки и отсутствия отладки в приложении, просто изменяя саму цель импорта. Ваше приложение не должно знать, является ли цель импорта связанным / скомпилированным ресурсом или деревом импорта.

Почему импорт?
ResponseType = "document" , но вы говорите, мне нужен JS для загрузки HTML?
Видишь иронию?
Импорт может выполнить скрипт так почему бы не определить + зарегистрировать ваши пользовательские элементы, чтобы пользователи не должны были это делать?
InnerHTML = 'Hello, <b>' + (this.getAttribute ('name') || '?