Async css: html — DEFER or ASYNC allowed on a stylesheet include?

alexxlab

Фронтенд-новости №2. Новинки CSS в 2022, ShadowRealms и холивары про async/await / Хабр

nikolayshabalin

Блог компании HTML Academy Разработка веб-сайтов *CSS *JavaScript *HTML *

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 11–17 апреля.

HTML

  • Проектирование лучшей бесконечной прокрутки.

  • Как и где отображается доступное описание и имя.

  • Лёгкий и доступный способ создания <диалогов>.

  • Как построить постепенно расширяемый, доступный, фильтруемый пагинационный список.

  • Улучшаем производительность <img>.

  • Начинайте с HTML. Статья, напоминающая про прогрессивное улучшение.

  • Создаём компонент диалога.

CSS

  • Список новинок в CSS на 2022 год. Предыдущий список обнов.

  • Стили для «неопределённого» состояния элемента.

  • Глубокое погружение в функцию CSS :where().

  • Идентификация шрифтов в дикой природе. Определяем шрифт где угодно.

  • Новые цветовые функции из модуля CSS Color Module Level 5.

  • Анимируем грид-полосы с помощью :has.

JavaScript

  • Рекомендации по тестированию JavaScript и node.js в 2022. 50 лучших практик, разделённых на категории с простыми примерами.

  • ShadowRealms — предложение ECMAScript для лучшего eval().

  • Как компилируется компилятор TypeScript.

  • Как тестировать взаимодействие компонентов с помощью Storybook.

  • «Почему я избегаю async/await». Осторожно холивары.

  • Proposal в ECMASCript: четыре неразрушающих метода массива для копирования:

    . toReversed() — аналог reverse();

    .toSorted() — аналог sort();

    .toSpliced() — аналог splice;

    .with() — аналог arr[index] = value.

  • Сортировка с учетом локали.

React

  • Redux reducers на Rust.

  • Список React-библиотек на 2022 год.

  • Как создать кастомные React-хуки.

  • Обновляем структуру папок React-приложения до последних стандартов.

  • React-хук для обнаружения клика за пределами компонента.

  • Как обнаружить жест «долгого нажатия».

Angular

  • Новые релизы Angular:

    • 14.0.0-next.12;

    • 14.0.0-next.13;

    • 13.3.3.

  • Результаты опроса разработчиков 2021.

Node.js

  • Последний node.js 12-версии — Node.js 12.22.12 LTS.

  • Возможное появление синтаксического анализатора аргументов командной строки в v18. 0.0

  • Выпущен v17.9.0 (Current).

  • Архитектурное сравнение Express, Fastify и NestJS.

Инструменты

  • Firefox 98 включает новую версию панели «Производительность» в панели инструментов DevTools.

  • Rome Formatter — инструмент для форматирования JavaScript и TypeScript.

  • RedwoodJS 1.0 — фреймворк на базе React и GraphQL для создания чего угодно.

  • Swiper 8.1 — обновился слайдер с сенсорным управлением и аппаратным ускорением.

  • CSS Checker — проверяем количество похожих и дублирующихся CSS-классов.

  • react-cancelable — отменяет ненужные запросы.

  • Генератор градиентов.

Оптимизации

  • Оптимизация основных показателей в одностраничных приложениях.

Общее

  • Как работает режим чтения Firefox?

  • Браузер DuckDuckGo для Mac.

  • Проектирование хлебных крошек.

Как читать статьи на английском языке

В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.

Теги:

  • html
  • css
  • javascript

Хабы:

  • Блог компании HTML Academy
  • Разработка веб-сайтов
  • CSS
  • JavaScript
  • HTML

Всего голосов 17: ↑15 и ↓2 +13

Просмотры

6.9K

Комментарии 0

Twitter ВКонтакте Github

Николай Шабалин @nikolayshabalin

Автор профессиональных курсов

Комментарии Комментировать

Асинхронный CSS — правильный путь с шаблоном печати

Шаблон предварительной загрузки/полифилла CSS — это то, что разработчики часто используют для повышения производительности. Этот подход вместо этого загружает любые таблицы стилей как предварительные загрузки, а затем использует их события onload , чтобы изменить их обратно на таблицу стилей, как только они будут готовы браузером. 2 проблемы с этим, и большинство из них делают это неправильно. Вот ПРАВИЛЬНЫЙ способ асинхронного CSS.

Асинхронная загрузка CSS? Вы, вероятно, делаете это неправильно и делаете противоположное тому, что намеревались. Узнайте, как правильно асинхронизировать CSS!

The Quick & Dirty

ПРАВИЛЬНЫЙ способ асинхронного CSS с использованием шаблона печати:

НЕПРАВИЛЬНЫЙ способ для aync CSS с использованием шаблона предварительной загрузки:

Две проблемы с шаблоном Preload Async CSS

В отличие от элементов сценария, здесь нет async или отложите атрибут , чтобы просто применить его к элементу ссылки. Чтобы противостоять этому, умные разработчики придумали шаблон предварительной загрузки — , хотя у него есть свои проблемы.

  1. Сбрасывает сетевые приоритеты
  2. Блокирует анализатор HTML*

* У Firefox есть способ обойти #2, но он влияет на все остальные браузеры.

Что бы вы к нему ни применили, оно будет скачано вверх по очереди для загрузки. Использование preload означает, что этим таблицам стилей, если вы делаете их асинхронными, потому что они не критичны, браузеры отдают очень высокий приоритет — немного противоположный эффект. Посмотрите на пример ниже:

Строки 3-6 — это файлы CSS, загружаемые асинхронно с использованием шаблона предварительной загрузки. Хотя они не критичны для начального рендеринга, использование предварительной загрузки означает, что в этом случае они появляются раньше всего.

Не забывайте о важном CSS

Самые эффективные способы увеличить время до Начать рендеринг — использовать шаблон Critical CSS:

Определить все стили, необходимые для Начать рендеринг (обычно это стили, необходимые для всего, что находится выше сгиба), встроить их в теги