Оптимизация производительности интерфейса — изображения

Эта статья включена в githubGitHub.com/Майкл-Ли Чжиган…

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

Давайте сначала посмотрим на информацию об изображении, загружаемую при запуске страницы.

Как показано на рисунке, при запуске страницы загружаются десятки изображений (или даже больше), и эти запросы изображений почти параллельны.В браузере Chrome максимальное количество поддерживаемых одновременных запросов ограничено, а другие запросы будут Войдите в очередь, чтобы ждать или стоять на месте, и новый запрос не будет выдан, пока не будет завершен предыдущий раунд запросов. Следовательно, значительное количество запросов ресурсов изображения должно ждать в очереди, а слишком большое количество изображений неизбежно повлияет на загрузку и отображение страницы.

Выберите подходящий формат изображения

JPEG

JPEG — это тип изображения, разработанный Объединенной группой экспертов по фотографии. Его величайшей особенностью являетсясжатие с потерями. Этот эффективный алгоритм сжатия делает его очень легким форматом изображения. С другой стороны, несмотря на то, что это называется сжатием с потерями, метод сжатия JPG по-прежнему является методом сжатия высокого качества: когда мы сжимаем объем изображения менее чем до 50% от его исходного размера, JPG все еще может поддерживать 60% % качество. Кроме того, формат JPG хранит одно изображение в 24 бита и может отображать до 16 миллионов цветов, что достаточно для удовлетворения требований к цвету в большинстве сцен, что определяет потерю качества до и после сжатия, которую нелегко обнаружить. нашими человеческими глазами.

преимущество

• Изображения в формате JPEG могут иметь миллионы цветов. Поэтому всякий раз, когда веб-сайту необходимо представить цветные изображения, JPEG всегда является лучшим выбором.
• При сжатии с потерями вы можете значительно уменьшить размер изображения, сжав его.Как правило, для изображения больше подходит уровень 60%.Если вы выберете уровень сжатия выше 75%, качество изображения будет значительно снижено. .
• Проблем с совместимостью нет, поэтому разработчики могут использовать его свободно.

сцены, которые будут использоваться

• JPG подходит для представления цветных изображений.В нашей повседневной разработке изображения JPEG часто появляются в виде больших фоновых изображений, карусельных изображений или изображений баннеров.
• Однако действительно трудно выявить изображение после сжатия с потерями, когда речь идет о изображениях с четкими линиями и сильным цветовым контрастом, таких как векторная графика и логотипы, размытие искусственно сжатых изображений будет совершенно очевидным.
• Изображения JPEG не поддерживают обработку прозрачности, а PNG можно использовать для прозрачных изображений.

PNG

PNG (Portable Network Graphics Format) — это формат изображения, разработанный W3C.сжатие без потерьформат изображения высокой четкости. Он поддерживает как 8-битные, так и 24-битные числа, которые здесь являются двоичными цифрами. Согласно соответствию, упомянутому в наших предварительных знаниях, 8-битный PNG поддерживает до 256 цветов, а 24-битный PNG может отображать около 16 миллионов цветов.

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

Сценарии применения

• Преимущества PNG в работе с контрастом линий и цветов, мы в основном используем его для представления небольших логотипов, простых цветов и сильно контрастирующих изображений или фона и т. д.
• Поддержка обработки прозрачности, прозрачные изображения могут использовать PNG

GIF

GIF — это 8-битный формат изображения без потерь, поддерживающий до 256 цветов. Это ограничение делает формат GIF неспособным отображать многоцветные или фотографические изображения.

преимущество

• Поддерживается 256 цветов, а размер файла обычно очень маленький.
• Поддержка прозрачности

Сценарии применения

• Поддержка анимации, подходящая для отображения некоторых анимаций с бесконечным циклом, таких как значки, смайлики, рекламные столбцы и т. д.
• Это очень подходит для некоторых изображений только с простыми цветами.

WebP

WebP — это формат файлов изображений, обеспечивающий как сжатие с потерями, так и сжатие без потерь (обратимое сжатие), производный от формата кодирования изображений VP8. Он может обрабатывать изображения с богатой детализацией, такие как JPEG, поддерживает прозрачность, например PNG, и может отображать динамические изображения, такие как GIF, и объединяет преимущества различных форматов файлов изображений.

Первоначально WebP был выпущен в 2010 году с целью уменьшить размер файла, но добиться того же качества изображения, что и JPEG, что, как мы надеемся, сократит время, необходимое для отправки файлов изображений через Интернет. Согласно более раннему тесту Google, сжатие WebP без потерь уменьшило размер файла на 45% по сравнению с файлами PNG, найденными в Интернете, и даже когда эти файлы PNG были обработаны с помощью pngcrush и PNGOUT, WebP все равно смог уменьшить размер файла на 28%. %.

Хотя WebP имеет много преимуществ, он не является полной заменой JPEG и PNG, поскольку поддержка WebP браузерами не является широко распространенной. В частности, мобильная система IOS принципиально не поддерживается.

Сжатие изображения

Давайте посмотрим на процесс загрузки изображения:

Слишком много изображений и слишком большой размер изображения часто влияют на скорость загрузки страницы, что приводит к ухудшению взаимодействия с пользователем.Некоторые изображения достигают сотен КБ или даже 2 МБ (этот объем должен быть возвращен, должны ли загружаться большие изображения высокой четкости?), что напрямую приводит к слишком долгой загрузке. Следовательно, для изображений, которые слишком велики, размер изображения может быть соответственно сжат, сохраняя при этом изображение в приемлемом диапазоне четкости.

Сжатие изображений делится на сжатие с потерями и сжатие без потерь.

сжатие с потерями

Сжатие с потерями означает, что в процессе сжатия размера файла часть информации картинки теряется, то есть снижается качество картинки (то есть картинка сжимается), и эта потеря необратима. Распространенным методом сжатия с потерями является объединение соседних пикселей по определенному алгоритму. Алгоритм сжатия не кодирует и не сжимает все данные картинки, а удаляет детали картинки, не распознаваемые человеческим глазом при сжатии. Следовательно, сжатие с потерями может значительно уменьшить размер изображения при том же качестве изображения. Например, изображения в формате jpg используют сжатие с потерями.

сжатие без потерь

Сжатие без потерь относится к процессу сжатия изображений без потери качества изображений. Мы можем восстановить исходную информацию из сжатых без потерь изображений в любое время. Алгоритм сжатия кодирует и сжимает все данные изображения, что позволяет уменьшить объем изображения при сохранении качества изображения. Например, png и gif используют сжатие без потерь.

Ниже приведены типы сжатия различных форматов изображений.

сжатие инструмента

• tinypngБесплатные, массовые, скоростные блоки
• Интеллектуальное сжатие картыBaidu трудно найти официальный сайт, бесплатный, пакетный, простой в использовании
• squooshОнлайн-инструмент для сжатия изображений
• compressorПоддержка JPG, PNG, SVG, GIF

минификация веб-пакета

Инженерные проекты могут настроить image-webpack-loader в webpack для сжатия изображений.

1. Установить зависимости

npm install --save-dev image-webpack-loader

2. настроить веб-пакет

module.exports = {
...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash:7].[ext]'
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 50,
              },
              optipng: {
                enabled: true,
              },
              pngquant: {
                quality: [0.5, 0.65],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: { // 不支持WEBP就不要写这一项
                quality: 75
              },
            },
          },
        ],
      },
    ],
  },
}

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

Использовать спрайт

Sprite, CSS Sprites, также известные как спрайты CSS в Китае, представляют собой технологию синтеза изображений CSS, в основном используемую для отображения небольших изображений.

Когда браузер запрашивает ресурсы, существует максимальное ограничение параллелизма при запросе ресурсов с одного и того же исходного доменного имени.Chrome — 6. Например, если у вас на странице есть 10 маленьких изображений одного и того же доменного имени CDN, вам нужно инициировать 10 запросы на их вытягивание. Дважды одновременно. После возвращения первого параллельного запроса инициируется второй параллельный запрос. Если вы объедините 10 маленьких картинок в одну большую, вы сможете получить ресурсы 10 маленьких картинок одним запросом. Уменьшите нагрузку на сервер, уменьшите параллелизм и сократите количество запросов.

преимущество

Объедините множество маленьких картинок в одну большую, используйтеbackround-positionЗначение атрибута для определения позиции представления изображения может эффективно сократить количество запросов, и, не влияя на опыт разработки, использование подключаемых модулей сборки может быть прозрачным для разработчиков. Он подходит для сцен с большим количеством насыщенных изображений страниц.

недостаток

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

Композитный спрайт

В webpack есть соответствующие плагины, обеспечивающие функцию автоматического синтеза изображений спрайтов и умеющие автоматически генерировать соответствующие файлы стилей - webpack-spritesmith, использование такое

var path = require('path')
var SpritesmithPlugin = require('webpack-spritesmith')

module.exports = {
  // ...
  plugins: [
    new SpritesmithPlugin({
      src: {
        cwd: path.resolve(__dirname, 'src/ico'),
        glob: '*.png',
      },
      target: {
        image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
        css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.styl'),
      },
      apiOptions: {
        cssImageRef: '~sprite.png',
      },
    }),
  ],
}

С приведенной выше конфигурацией вы можетеsrc/icoВсе файлы png в каталоге синтезируются в изображения спрайтов и выводятся в соответствующий каталог. В то же время может быть сгенерирован соответствующий файл стиля. Синтаксис файла стиля будет динамически генерироваться в соответствии с суффиксом файла стиля, который вы настроен.

использовать иконочный шрифт

iconfont (значок шрифта), то есть отображение иконок через шрифты, которые в основном используются для отрисовки иконок, простой графики, специальных шрифтов и т.п.

преимущество

• Установите размер, цвет и другие стили, такие как шрифты, без искажений
• Легкий и простой в модификации
• Эффективно сократить количество HTTP-запросов

Рекомендуется использовать библиотеку иконок шрифтов Ali:iconfont

Использовать формат base64

Принцип: преобразуйте изображение в строку в кодировке base64, встроенную в страницу или css.

преимущество

• Повышение производительности: каждое изображение на веб-странице необходимо загружать с помощью HTTP-запроса. Для загрузки изображения всегда требуется запрос на сервер. Если для загрузки изображения не требуется запрос на сервер, можно использовать base64. скачивается вместе с HTML. Загружается одновременно на локальный сервер. Сокращает количество запросов https.

• Шифрование: пусть пользователи не сразу видят содержимое изображения, а видят только код.

• Удобная справка: при использовании некоторых изображений в нескольких файлах одновременно вы можете преобразовать изображения в файлы в формате base64, а стили поместить в глобальные, такие как common.css, и вы можете напрямую добавить имя класса, когда вы использовать их позже. Необходимо найти пути к файлам в нескольких слоях, что повысит эффективность

Однако следует отметить, что если картинка большая и цветовой уровень картинки насыщенный, то использовать этот метод не подходит, т.к. строка, закодированная base64 картинки, очень большая, что значительно увеличит размер HTML-страницы, тем самым влияя на размер HTML-страницы, скорость загрузки.

Наиболее распространенная base64ization используется в url-loader.

module.exports = {
...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10240,
          name: utils.assetsPath('img/[name].[hash:7].[ext]'),
        }
      },
    ],
  },
}

Таким образом, изображения размером менее 10 КБ в проекте можно преобразовать в base64 и применить к странице.

Используйте css вместо изображений.

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

недостаток

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

Использование образов CDN

Полное название CDN — Content Delivery Network, то есть Content Delivery Network. CDN — это сеть распространения контента, построенная в сети, опирающаяся на пограничные серверы, развернутые в разных местах, с помощью балансировки нагрузки, распределения контента, планирования и других функциональных модулей центральной платформы, чтобы пользователи могли получать желаемый контент поблизости, уменьшать сеть. перегрузки и улучшить доступ пользователей Скорость отклика и частота попаданий. Ключевые технологии CDN в основном включают технологии хранения и распространения контента.

Возьмем простой пример:

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

Фундаментальный

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

Основная мысль

Основная идея CND заключается в том, чтобы избежать узких мест и ссылок в Интернете, которые могут повлиять на скорость и стабильность передачи данных, чтобы сделать передачу контента более быстрой и стабильной. Размещая узловые серверы повсюду в сети, чтобы сформировать уровень интеллектуальной виртуальной сети на основе существующего Интернета, система CDN может работать в режиме реального времени на основе сетевого трафика и подключения каждого узла, состояния нагрузки, расстояния до пользователей и ответа. время Такая исчерпывающая информация перенаправляет запрос пользователя на ближайший к пользователю сервисный узел. Его цель — дать пользователям возможность получать желаемый контент поблизости, решить ситуацию с перегрузкой интернет-сети и повысить скорость отклика пользователей, посещающих веб-сайты.

Преимущества CDN

• Узлы CDN решают проблему межоператорского и межрегионального доступа, а задержка доступа значительно сокращается;
• Большинство запросов выполняются на граничных узлах CDN, а CDN играет роль в разгрузке, снижая нагрузку на исходный сайт.

Ленивая загрузка изображения

Ленивая загрузка — это способ оптимизировать производительность веб-страницы, что может значительно улучшить взаимодействие с пользователем. Картинки всегда были основным виновником, влияющим на производительность веб-страниц, и теперь очень часто размер изображения превышает несколько мегабайт. Если вы запрашиваете все ресурсы изображения каждый раз, когда заходите на страницу, пользователь может уже уйти, когда изображение загружается. Поэтому при входе на страницу запрашиваются только ресурсы изображения в видимой области.

Это можно резюмировать так:

• Уменьшите загрузку ресурсов, и загружайте картинки только на первом экране при запуске страницы, что позволяет значительно снизить нагрузку и трафик на сервер, а также снизить нагрузку на браузер.
• Предотвратите блокировку загрузки js слишком большим количеством одновременно загруженных ресурсов, влияющих на запуск всего веб-сайта и влияющих на взаимодействие с пользователем.
• Пустая трата пользовательского трафика, некоторые пользователи не хотят читать их все, а загрузка их всех будет потреблять много трафика.

принцип

Принцип ленивой загрузки картинок заключается в том, чтобы временно не устанавливать атрибут src картинки, а скрывать url картинки, например прописать его сначала в data-src, а потом вставить реальный url картинки в атрибут src, когда текущая картинка достигает видимой области внутри, чтобы добиться ленивой загрузки изображений.

function lazyload() {
  let viewHeight = document.body.clientHeight //获取可视区高度
  let imgs = document.querySelectorAll('img[data-src]')
  imgs.forEach((item, index) => {
    if (item.dataset.src === '') return

    // 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
    let rect = item.getBoundingClientRect()
    if (rect.bottom >= 0 && rect.top < viewHeight) {
      item.src = item.dataset.src
      item.removeAttribute('data-src')
    }
  })
}

// 可以使用节流优化一下
window.addEventListener('scroll', lazyload)

Благодаря реализации приведенного выше примера нам нужно отслеживать событие прокрутки, чтобы добиться ленивой загрузки.Хотя мы можем предотвратить высокочастотные функции выполнения с помощью регулирования функции, нам все равно нужно вычислять такие свойства, как scrollTop, offsetHeight и т. д. Это просто?Нет никакого способа вычислить эти свойства, ответ да --- IntersectionObserver

const imgs = document.querySelectorAll('img[data-src]')
const config = {
  rootMargin: '0px',
  threshold: 0,
}
let observer = new IntersectionObserver((entries, self) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let img = entry.target
      let src = img.dataset.src
      if (src) {
        img.src = src
        img.removeAttribute('data-src')
      }
      // 解除观察
      self.unobserve(entry.target)
    }
  })
}, config)

imgs.forEach((image) => {
  observer.observe(image)
})

Предварительная загрузка изображения

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

Существует два широко используемых метода: один — скрыть в атрибуте url фона css, а другой — предварительно загрузить изображение, установив атрибут src объекта экземпляра через объект Image javascript.

1. Предварительная загрузка с помощью CSS и JavaScript

#preload-01 {
  background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px;
}
#preload-02 {
  background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px;
}
#preload-03 {
  background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px;
}

Предварительно загрузите изображения на закадровый фон с помощью свойства фона CSS. Браузеры используют предварительно загруженные (кешированные) изображения во время рендеринга, когда они вызываются в другом месте веб-страницы. Несмотря на то, что метод эффективен, его еще можно улучшить. Изображения, загруженные с помощью этого метода, будут загружены с другим содержимым на странице, что увеличит общее время загрузки страницы.
Чтобы решить эту проблему, мы добавили некоторый код JavaScript для задержки времени предварительной загрузки до загрузки страницы.

function preloader() {
  if (document.getElementById) {
    document.getElementById('preload-01').style.background =
      'url(http://domain.tld/image-01.png) no-repeat -9999px -9999px'
    document.getElementById('preload-02').style.background =
      'url(http://domain.tld/image-02.png) no-repeat -9999px -9999px'
    document.getElementById('preload-03').style.background =
      'url(http://domain.tld/image-03.png) no-repeat -9999px -9999px'
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload
  if (typeof window.onload != 'function') {
    window.onload = func
  } else {
    window.onload = function () {
      if (oldonload) {
        oldonload()
      }
      func()
    }
  }
}
addLoadEvent(preloader)

2. Предварительная загрузка с помощью JavaScript

function preloader() {
  if (document.images) {
    var img1 = new Image()
    var img2 = new Image()
    var img3 = new Image()
    img1.src = 'http://domain.tld/path/to/image-001.gif'
    img2.src = 'http://domain.tld/path/to/image-002.gif'
    img3.src = 'http://domain.tld/path/to/image-003.gif'
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload
  if (typeof window.onload != 'function') {
    window.onload = func
  } else {
    window.onload = function () {
      if (oldonload) {
        oldonload()
      }
      func()
    }
  }
}
addLoadEvent(preloader)

Адаптивная загрузка изображений

Что такое адаптивная загрузка изображений? По сути, это отображение картинок разного размера на устройствах с разным разрешением во избежание траты ресурсов.

Обычно используемый метод — это медиа-запрос css3.

@media  screen and (min-width: 1200px) {
  img {
    background-image: url('1.png');
  }
}
@media  screen and (min-width: 992px) {
  img {
    background-image: url('2.png');
  }
}
@media  screen and (min-width: 768px) {
  img {
    background-image: url('3.png');
  }
}
@media screen and (min-width: 480px) {
  img {
    background-image: url('4.png');
  }
}

Кроме того, вы можете использовать свойство изображения HTML5 для адаптивной обработки. Методы, как показано ниже:

1. Создайте тег изображения.
2. Разместите несколько исходных тегов, чтобы указать разные имена файлов изображений для загрузки в зависимости от различных условий.
3. Добавьте резервный элемент

<picture>
  <source srcset="src/img/l.png" media="(min-width: 1200px)" />
  <source srcset="src/img/2.png" media="(min-width: 992px)" />
  <source srcset="src/img/4.png" media="(min-width: 768px)" />
  <img src="src/img/4.png" />
</picture>

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

прогрессивное изображение

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

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

Технология каркасного экрана также имеет аналогичный принцип.

Суммировать

1. Выбор соответствующего формата изображения и сжатие большого изображения могут решить проблему медленной загрузки больших изображений из-за первопричины.
2. Использование изображений спрайтов, значков, base64, css вместо изображений и т. д. может уменьшить HTTP-запросы изображения и повысить скорость загрузки страницы.
3. Использование картинок CDN может добиться эффекта отвлечения внимания и снизить нагрузку на купоны на услуги.
4. Ленивая загрузка изображений, предварительная загрузка, прогрессивные изображения и т. д. могут в разной степени сократить время белого экрана и улучшить впечатление от продукта.

рекомендуемая статья