Записки фронтендера
Lazy loading HTML фрагментов 🤯
Представим, что наш сервер настроен так, что HTML он нам отдаёт не целиком, а небольшими частями. Тогда кусочки, которые пришли раньше, будут анализироваться и отрисовываться сразу, не дожидаясь оставшейся части приложения. Но у нас вполне может возникнуть ситуация, когда какие-то из них мы не готовы отдать сразу, т.к. предварительно на сервере нужно произвести сложные вычисления. В таком случае оставшаяся загрузка кода может быть заблокирована до полной загрузки отдельного чанка.
Для решения этой проблемы Chrome в 148 версии ввёл специальный синтаксис, который позволяет указать место в коде, которое будет пропущено, но может быть заполнено в будущем, если вернётся <template> с таким же идентификатором:
<div>
<?marker name="placeholder">
</div>
...
<template for="placeholder">
Какой-то <em>HTML код</em>
</template>
Также существует дополнительный синтаксис, который позволяет на время загрузки подставить какой-то лоадер, чтобы не показывать пользователю пустой экран:
<div>
<?start name="placeholder">
Загрузка...
<?end>
</div>
...
<template for="placeholder">
Какой-то <em>HTML код</em>
</template>
Если HTML уже полностью подгрузился и мы хотим что-то подставить уже впоследствии, то мы можем воспользоваться новыми стриминговыми методами JS (в следующем посте расскажу о них подробнее):
const response = await fetch('/dashboard');
await document.body.streamHTMLUnsafe(
response.body
);
🔗 Ссылка на полифил
⚙️ Таблицу на caniuse пока не добавили
2 · 445 ·