От автора: в этом году я тесно сотрудничал с замечательной командой Coingaming в прекрасном Таллинне. Мы очень много работали над тем, чтобы сделать их набор онлайн-продуктов намного быстрее, и я был техническим консультантом, возглавляющим проект. Это был невероятно интересный и полезный проект, и мы сделали некоторые реальные улучшения в бизнесе и клиенте.
Одной из основных причин, по которым проект показался мне веселым, является то, что он дал мне реальный шанс стать экспертом. Естественно, команда всегда должна решать проблемы с низкой вилкой, но как только это будет сделано, вы сможете углубиться в сорняки. Это сообщение в блоге о том, как осуществляется загрузка изображений, происходит оттуда.
Background
Чтобы лучше контролировать, как серия миниатюрных изображений отображается на главной странице одного из своих продуктов, команда решила создать их не как элементы img, а как background-image CSS: это позволило им улучшать размер и позиционировать изображения в их контейнере, и, отложив в сторону любые смысловые проблемы, это имеет смысл с точки зрения стиля. Моя единственная оговорка знала, что, поскольку изображения определены в CSS, а не в HTML, их исходящие запросы не будут запускаться до тех пор, пока браузер не создаст дерево рендеринга: это будет только после того, как все CSS будут загружены, проанализированы и построены CSSOM что браузер действительно знает. «Этот div с этим классом в настоящее время виден на странице, и его фон установлен таким образом: мне бы лучше его скачать!».
Водопад ниже показывает браузер, ожидающий завершения CSSOM, прежде чем он отправит любые запросы на любые изображения — вы можете ясно видеть, что CSS нужно закончить, прежде чем начнутся какие-либо изображения. Это связано с тем, что браузер не знает, какие (если есть) изображения ему понадобятся, пока не будет создан CSSOM:
Посмотреть полный размер / качество
Водопад, показывающий, что фоновое изображение не может быть загружено до тех пор, пока CSSOM не завершится.
Это слишком поздно для такого важного контента, потому что пользователи хотят увидеть миниатюры как можно скорее.
Перемещая изображения в элементы img (что также семантически более уместно), браузер может обнаружить их гораздо раньше, поскольку они становятся доступными для сканера предварительной загрузки браузера, и отправляют их запросы до (или параллельно) завершения CSSOM:
Посмотреть полный размер / качество
Водопад показывает, как обычные элементы изображения могут быть загружены независимо от конструкции CSSOM.
Это то, что мы уже знали:
Браузеры не могут загружать background-image до тех пор, пока они не построят CSSOM.
Браузеры не должны основываться, таким образом, на задержку — загрузка img на завершение CSSOM. Подробнее об этом позже …
Интересно, когда мне стало интересно, как разные браузеры обрабатывают разные типы изображений, когда они видны или нет: элемент img с display: none; примененный к нему идеально не будет загружен, но единственный способ, которым браузер знал бы, что изображение действительно скрыто — это то, что он ждет завершения CSSOM, что замедляет поведение по умолчанию img: что произойдет?
background-image
Я начну с background-image как это был первый случай использования моего клиента. Я чувствую, что поведение background-image должно быть самым предсказуемым, поскольку в игре есть определенные невозможности (например, мы не можем загрузить background-image пока не построим CSSOM).
Что я буду ожидать
У меня есть несколько ожиданий (или надежд), которые я предсказываю:
Браузеры не будут (не могут) запускать загрузку для background-image пока не узнают, что она ему нужна (т. е. до тех пор, пока не будет создан CSSOM).
Браузеры не загружают background-image, которое применяется к элементу, скрытому от представления (например, display: none; ).
Что на самом деле происходит
Chrome (v67.0.3396.79)
Ожидается, что Chrome не загрузит background-image до тех пор, пока не будет создан CSSOM:
Посмотреть полный размер / качество
Неожиданно Chrome загрузит background-image, которое не видно пользователю:
Посмотреть полный размер / качество
Safari (v11.1 (13605.1.33.1.4))
Ожидается, что Safari не загрузит background-image до тех пор, пока не будет построено CSSOM:
Посмотреть полный размер / качество
Ожидается, что Safari не загрузит background-image, которое не видно пользователю:
Посмотреть полный размер / качество
Firefox (v60.0.1)
Ожидается, что Firefox не загрузит background-image до тех пор, пока не будет создан CSSOM:
Посмотреть полный размер / качество
Ожидается, что Firefox не загрузит background-image, которое не видно пользователю:
Посмотреть полный размер / качество
Opera (v53.0.2907.68)
Ожидается, что Opera не загрузит background-image до тех пор, пока не будет построено CSSOM:
Посмотреть полный размер / качество
Неожиданно Opera загрузит background-image, которое не видно пользователю:
Посмотреть полный размер / качество
Edge (v17.17134)
Ожидается, что Edge не загрузит background-image до тех пор, пока не будет создан CSSOM.
Посмотреть полный размер / качество
Неожиданно Edge загрузит background-image, которое не видно пользователю.
Посмотреть полный размер / качество
Обобщение
Примечание: да или нет представляет фактическую информацию. ✓ и ✗ представляют собой то, что я считаю хорошим / ожидаемым и плохим / неожиданным поведением, соответственно.
Вердикт
Firefox и Safari, похоже, имеют наиболее предпочтительное поведение здесь: они не будут загружать background-image, которое, как они знают, им не понадобится.
Chrome, Opera и Edge будут загружать background-image, которое применяется к невидимым элементам. Это кажется расточительным, но я подозреваю, что это превентивная оптимизация для обеспечения того, чтобы изображение находилось на клиенте перед потенциальным событием, когда элемент становится видимым. Я чувствую, что — если это так — это оптимизация, которую следует оставить разработчику.
<img />
Затем давайте посмотрим, как браузеры обрабатывают img.
Что я буду ожидать
Браузеры будут загружать img полностью независимо от конструкции CSSOM. Блокировка img в конструкции CSSOM кажется очень неэффективной и приведет к задержкам при загрузке содержимого.
Соответственно, браузеры загружают img, которые в конечном итоге скрываются от представления, то есть display: none;. Если браузер начинает загружать img перед построением CSSOM (как я ожидаю), то он не знает, нужно ли это изображение или нет.
Что на самом деле происходит
Chrome
Ожидается, что Chrome не будет блокировать запросы img в конструкции CSSOM:
Посмотреть полный размер / качество
Ожидается, что в результате вышеизложенного Chrome загрузит img, который в конечном итоге окажется невидимым:
Посмотреть полный размер / качество
Safari
Ожидается, что Safari не будет блокировать запросы img для построения CSSOM:
Посмотреть полный размер / качество
Ожидается, что в результате вышесказанного Safari загрузит img, который в конечном итоге окажется невидимым:
Посмотреть полный размер / качество
FireFox
Неожиданно Firefox блокирует запросы img для построения CSSOM. Это означает, что запросы img не отправляются до тех пор, пока не будет создан CSSOM. Это представляет собой неожиданную неэффективность:
Посмотреть полный размер / качество
Неожиданно, несмотря на то, что Firefox знает, что ему не понадобится результат img, если он неожиданно блокирует конструкцию CSSOM, он все равно загрузит img, даже если он знает, что он не будет виден. Я нахожу это чрезвычайно странным: кажется, что все происходит неправильно по обоим пунктам:
Посмотреть полный размер / качество
Opera
Ожидается, что Opera не будет блокировать запросы img для построения CSSOM:
Посмотреть полный размер / качество
Ожидается, что в результате вышеперечисленного Opera загрузит img, который в конечном итоге окажется невидимым:
Посмотреть полный размер / качество
Edge
Ожидается, что Edge не будет блокировать запросы img для построения CSSOM:
Посмотреть полный размер / качество
Ожидается, что в результате вышесказанного Edge загрузит img, который в конечном итоге окажется невидимым:
Посмотреть полный размер / качество
Обобщение
Заметка: да или нет представляет фактическую информацию. ✓ и ✗ представляют собой то, что я считаю хорошим / ожидаемым и плохим / неожиданным поведением, соответственно.
Вердикт
Firefox, похоже, блокирует img в конструкции CSSOM. Это похоже на плохую идею — no img начнет загрузку до тех пор, пока Firefox не скачет, не разобратся и не применит CSS. Это означает, что если у вас есть блокировка таблиц стилей, они блокируют ваш img\. Это было бы особенно неприятно, если img — ключевой контент (подумайте Imgur, Flickr и т. д.).
Firefox все еще страдает! Он ждет, пока он не построит CSSOM до того, как он отключится от любых запросов img, что означает, что он знает, будет ли отображаться img, но если невидимый img, он будет загружать его в любом случае. Это двойной удар: Firefox блокирует img в конструкции CSSOM, но все еще загружает img, которые не видны.
Выводы
Факты
Chrome, Opera и Edge будут загружать background-image, которое не требуется для первого рендеринга. Это означает, что скрытые узлы DOM, у которых есть background-image примененное к ним, будут по-прежнему загружать background-image. Остерегайтесь неожиданных загрузок.
Firefox будет блокировать загрузку img в конструкции CSSOM, что означает более поздние, чем ожидалось, загрузки. Остерегайтесь задержек.
Кроме того, Firefox все равно будет загружать img, даже если он не нужен. Остерегайтесь неожиданных загрузок.
Как это может повлиять на вас?
Если вы являетесь продуктом, который в значительной степени опирается на контентные изображения (например, Flickr, онлайн-публикация, фотограф), Firefox не будет загружать ни одно из этих изображений, пока оно не будет обработано вашим CSS. Вы должны изучить предварительную загрузку содержимого любого ключевого изображения.
Если вы сильно используете фоновые изображения и по какой-либо причине не показываете их все для первого рендеринга, будьте осторожны, что некоторые браузеры будут продолжать и загружать их в любом случае: вам может понадобиться изучить лучшие стратегии для скрытого контента (например, удаление из DOM, а не display: none;).
Источник: https://csswizardry.com/
Редакция: Команда webformyself.