​Атрибут 'decoding=async' в <img> - одна из...

​Атрибут 'decoding=async' в <img> - одна из самых непонятных вещей в мире.

Я даже не понимаю его до конца - и я пытался! Вот что я знаю, рассказывает Барри Поллард:

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

Серьезно - сколько раз вы видели, как страница загружается без изображений? Много раз, верно?

Нет, браузеры не блокируют основной поток при декодировании изображений, если это не указано.

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

Вы не освободите основной поток с помощью этого атрибута.

Он может задержать рендеринг другого содержимого, но ИМХО этого недостаточно для элементов <img>, уже присутствующих в HTML (<img>, внедряемые JS, - другое дело, до них мы еще доберемся).

Нет, это не делает декодирование изображения быстрее или медленнее.

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

Этот атрибут позволяет ДРУГОМУ содержимому потенциально отображаться быстрее.

Что говорит этот атрибут:

— async: когда я закончу загрузку и буду декодировать, позвольте другому содержимому быть отображенным и не ждать меня.

— sync: когда я закончил загрузку и декодирую, задержите отображение другого содержимого, чтобы мы могли отображаться все вместе.

Таким образом, для <img> в вашем исходном HTML браузер обнаружит его, поставит в очередь на загрузку и будет радостно отрисовывать другие материалы, пока это происходит.

После загрузки он будет декодирован и, скорее всего, будет отрисован в собственном фрейме в любом случае, и не нужно будет ничего "синхронизировать".

Возможно, если у вас есть обработчик "onload" на изображении, произойдут другие вещи, но тогда вам, вероятно, все равно нужна синхронизация.

Возможно, если это большое изображение, вы не хотите задерживать другие отрисовки.

Но в действительности браузеры все равно рендерят большинство изображений постепенно.

Да, даже непрогрессивные изображения - они просто рендерятся снизу вверх, а не от размытого к детальному.

Поэтому, скорее всего, придется декодировать по частям за раз.

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

Декодирование изображений происходит очень быстро по сравнению с загрузкой по сети!

Браузеры даже не могут договориться о том, что делать в этом случае.

Safari и Chrome по умолчанию делают синхронизацию, Firefox по умолчанию делает асинхронизацию (вот что означает 'decoding=auto', кстати).

Потому что есть компромиссы в тех случаях, когда это имеет значение.

И ни один из этих способов не является правильным.

ИМХО, в качестве атрибута HTML, вам будет очень трудно увидеть какую-либо разницу при любой настройке.

Не беспокойтесь о настройке.

Оставьте его по умолчанию и переходите к более важным вещам.

Для <img>, вставленных в JS, это более интересно.

Если изображение загружено, и вы вставляете его, а некоторые другие DOM обновляются, то это может быть заметно:

— sync задерживает другие обновления и приостанавливает рендеринг до завершения декодирования (плохо)

— асинхронность может вызвать вспышки несогласованности (тоже плохо).

Гораздо лучше сделать явное скачивание, затем явное 'decode()' и только потом вставить его в DOM.

Это не блокирует рендеринг и не вызывает вспышек - лучшее из двух миров!

Так что и здесь этот атрибут не сильно помогает!

Так что, если я не ошибаюсь в чем-то из вышеперечисленного, перестаньте беспокоиться о 'decoding=async', изучите 'decode()' при вставке изображений через JS, и перестаньте распространять миф о том, что это волшебный атрибут для ускорения ваших изображений каким-либо заметным образом.

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/1794...