[Перевод] HTML-импорт — include для веба: часть 2
Перевод статьи «HTML Imports #include for the web», Eric Bidelman.Ссылка на первую часть перевода.
Предоставление веб-компонентовHTML-импорт упрощает загрузку и повторное использование кода. В частности, это хороший способ распространения веб-компонентов. Это касается как простых HTML , так и полноценных кастомных элементов с теневым DOM [1, 2, 3]. Когда эти технологии работают вместе, импорт становится инструментом для подключения веб-компонентов.Подключение шаблонов HTML-шаблоны это хороший пример того, где может пригодиться импорт. Тэг позволяет выносить определенные секции разметки для дальнейшего их использования. Шаблоны полезны тем, что их содержимое и скрипты не будут отображаться и выполняться до их добавления на страницу при помощи JS кода.import.html
Hello World!
index.html
Данный импорт определяет (и регистрирует) два элемента:
polymer-ui-tabs.html
jquery.html
Данный импорт может быть использован в других импортируемых компонентах: import2.html
Если понадобится, главный документ также может использовать jquery.html:
…
Несмотря на то, что jquery.html подключается в нескольких разных документах, его загрузка и исполнение происходит только один раз. Это можно увидеть заглянув на панель network:
Соображения производительности HTML-импорт — замечательная технология, но как и с любой новой веб-технологией, вы должны с умом подойти к её использованию. Лучшие практики веб-разработки никто не отменял. Вот несколько вещей, которые вы должны помнить, работая с импортом.Объединение импорта Очень важно сократить количество запросов при загрузке страницы. Поэтому, если вам нужно импортировать большое количество компонентов верхнего уровня, постарайтесь объединить их в единственный файл для импорта.Vulcanize, инструмент от создателей Полимера, используемый для построения проектов из npm. Он производит рекурсивную сборку всех импортируемых документов в единственный главный файл, это, по сути, объединение всех веб-компонентов в один файл. Данный инструмент написали создатели Полимера.
Браузерное кеширование импорта HTML-импорт также хорошо справляется с логикой кеширования. Импорт http://cdn.com/bootstrap.html содержит вложенные ресурсы, но они так же кешируются.Содержимое используется, только когда оно добавлено в DOM Содержимое никак не вызывается, до тех пор пока оно не использовано в скриптах. Для примера у нас есть динамически созданная таблица стилей: var link = document.createElement ('link'); link.rel = 'stylesheet'; link.href = 'styles.css'; Браузер не запросит styles.css, до тех пор пока элемент link не будет добавлен в DOM: document.head.appendChild (link); // browser requests styles.css Другой пример, это динамически созданная разметка: var h2 = document.createElement ('h2'); h2.textContent = 'Booyah!'; Элемент h2 ничего не изменит, пока вы не добавите его в DOM.Эта же идея остается истинной и для импортируемых документов. Пока вы не добавите их в DOM, они ничего не делают. Но на самом деле, скрипты являются исключением, они исполняются, сразу же при загрузке импорта. Смотрите скрипты в импорте.
Оптимизация для асинхронной загрузки Импорт не блокирует парсинг главного документа. Скрипты внутри импорта выполняются по очереди, но не блокируют импортирующую страницу. Это значит, что происходит отложенное выполнение скриптов. Преимущество подключения импорта в элементе
заключается в том, что это не заблокирует работу с содержимым документов. Имея это ввиду, важно все же помнить, что скрипты в главном документе все равно блокируют загрузку страницы Есть несколько способов для оптимизации асинхронного поведения, использование которых зависит от структуры вашего приложения. Следующие техники помогут избежать блокировки отображения главной страницы.Сценарий #1 (предпочтительный): у вас нет скриптов в элементе или по ходу тела документа Я рекомендую использовать скрипты как можно ниже, чтобы предотвратить немедленную загрузку вашего импорта. Но вы ведь и так следуете этой практике, НЕ ТАК ЛИ?! ;)вот пример:
…
Все скрипты расположены снизу.Сценарий 1.5: импорт добавляется самостоятельно
Другой вариант, это позволять импорту самому себя рендерить. Если автор импорта предоставляет соглашения о размещении импорта в главном документе, то он может сам себя размещать в оговоренных местах: import.html:
…
Примечание: Самый последний вариант — наименее предпочтителен. Парсер не начинает работать с содержимым страницы до самого окончания страницы.
Что стоит запомнить mime-тип импорта, это text/html Ресурсы с других доменов должны разрешать междоменное разделение ресурсов (CORS) Импорт с одним URL запрашивается и выполняется только один раз. Это также значит, что скрипты внутри импорта выполняются только один раз. Скрипты в импорте выполняются по порядку, но не останавливают парсинг главного документа. Элемент импорта не говорит браузеру »#добавь содержимое прямо сюда». Он говорит «пойди и возьми этот документ, чтобы я в дальнейшем мог его использовать». Скрипты в импорте выполняются автоматически, а разметка, стили и другие ресурсы должны быть явно добавлены на главную страницу. Примечание: элементы