У нас есть огромный веб-компонент (2MB), который в настоящее время загружается в элемент <head>, но это значительно сокращает время загрузки страницы.Lazy загрузка веб-компонента
Я думал, можем ли мы как-то лениться загрузить наш веб-компонент?
Предположив ваш веб-компонент содержится в HTML импорта, в настоящее время хранится в <head>, вы можете LazyLoad, что импортируемый файл всякий раз, когда вы хотите с JavaScript:
var import = document.createElement('link');
import.rel = 'import';
import.href = 'path/to/your/import.html';
document.head.appendChild(import);
В качестве альтернативы, вы можете попробовать просто переместив Импорт HTML из головы и в тело (около дна), что может уменьшить время загрузки, поскольку оно больше не будет блокировать синтаксический анализ тела.
Предположим, что пользовательский элемент уже существует в html, но ссылка [import] еще не вставлена в HTML. Что произойдет, когда будет загружена ссылка [import]? Будет ли элемент инициализироваться и отображаться правильно? Почему во всех примерах ссылка [import] находится в '
' вместо конца HTML, как и другие js-скрипты? – AlexStackПо http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#unresolvedels => «Поскольку пользовательские элементы регистрируются скриптом с использованием document.registerElement(), они могут быть объявлены или созданы до того, как их определение будет зарегистрировано браузером " –