В прошлом нам приходилось полагаться на логику JS или связанные плагины для оптимизации веб-сайтов с большим количеством изображений, таких как懒加载технологии, а теперь (по крайней мере, в ближайшем будущем) версия Chrome 75 добавит原生懒加载Функция.
Начните прямо сейчас
Конечно, вы также можете начать использовать эту функцию прямо сейчас, набрав на панели вкладок браузераbrowser://flags/#enable-lazy-image-loadingи войдите на страницу, найдитеenable-lazy-image-loadingЭтот пункт включает его, и его можно использовать после перезагрузки.
по стандарту
Связанныйloadingиспользования, я уверен, что вы хотите узнать больше, вы можете использовать следующие три свойства, чтобы определить поведение загрузки браузера:
- lazy: использовать ленивую загрузку, когда экран прокручивается рядом с изображением
- нетерпеливый: загружать изображения немедленно
- авто: на усмотрение браузера
Для обсуждения ленивой загрузки вы можете пройти через этоissueИсследуйте дальше.
Начните работу с новым кодом
Возможно, вы хотите сразу же применить эту функцию к своему проекту, но не забывайте, что это все еще экспериментальная функция, по крайней мере, пока что, поэтому вам нужно выполнить обнаружение функции, чтобы быть совместимым с неподдерживаемыми браузерами:
Этого недостаточно, чтобы не сделать ваш тег изображения неподдерживаемым.loadingБраузер свойств загружается сразу, вам также нужно поставитьsrcАтрибуты заменяются другими атрибутами, а также учитывают случай, когда браузер не поддерживает JS, например, делаем так:
Отказаться от неродной ленивой загрузки?
Угробить неродную ленивую загрузку?Ответ в любом случае否.
Если в будущем все браузеры будут поддерживать отложенную загрузку, а стандарт не изменился с настоящего времени, он подходит только для некоторых простых сценариев просмотра веб-страниц, таких как страницы со смешанным текстом и изображениями, такие как Nuggets.этот старикДля проблемы, описанной в этой статье, нам еще нужно написать много нативной JS-логики в соответствии с потребностями.Если не решена суть проблемы, иначеЛюбая оптимизация опыта, оптимизация производительности являются частью сцены и отказываются от производительности других частей сцены.(даже отрицательная оптимизация)
наконец
В тексте используется кодовая картинкаCarbonСинтетика, подсветка кода наггетов действительно... какой способ~~
References
Экстремальная производительность — прогрессивное отображение изображений и отложенная загрузка