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

внешний интерфейс
  • суг команда
  • Автор: Джейсон

задний план

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

конкретная сцена

Прежде чем описывать, как решить проблему, давайте сначала скажем, чтоКакой вопрос?Требование автора, вероятно, отображать на определенной странице1~1000 листов,200~500kразмер фигуры. Хорошая новость заключается в том, что эти изображения взяты с локального жесткого диска, а не из Интернета. (Иначе проблема становится оптимизацией сети....)

Ступая на яму

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

    const fileList = this.props.fileList;
    return (
        <div className="list-wrapper">
            {
                fileList.map((file) => {
                    <img className="img-item" src={file.src}>
                })
            }
        <div>
    )

Как только автор полон радости и думает, что это требование в основном решено, пора спускаться вниз и добавлять куриные ножки. Безжалостная реальность сильно ударила меня. При обновлении веб-страницы передо мной отобразилась чистая белая картинка, а затем я увидел только картинкуЗагружается сверху понемногу.Я не могу не задуматься, не работает ли процессор или память плавает? Когда я думаю об этом, мой компьютер имеет такую ​​производительность, и он действительно собирается выйти в интернет.Выдержит ли этот клиент это? Нет, вот так, продавщица только что меня ошарашила до того, как она попала в сеть...

Вариант 1 Ленивая загрузка

В этом случае первой реакцией всех должна быть ленивая загрузка. Краткое введение в ленивую загрузку изображений. Распространенная схема ленивой загрузки изображений означает, что при загрузке страницы визуализируется только видимая область экрана и окружающие изображения. Перезагрузите изображение, которое должно отображаться при прокрутке страницы.
С целью повышения эффективности (tou) скорости (lan) автор нашел в Интернете относительно простую в использовании библиотеку отложенной загрузки, а затем представил проект. Однако ситуация не оптимистична. Поскольку ширина и высота каждого изображения в этом сценарии спроса50*50, затем общий на стороне ПК1080pКартинка, которую нужно отобразить над сгибом на устройстве, достигла400+ листов.
Даже если мы проигнорируем эту проблему, процесс загрузки изображения не будет в порядке, когда пользователь прокручивает страницу очень быстро. Так что ленивая загрузка не панацея.

Вариант 2 Предварительная загрузка

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

    const fileList = this.props.fileList;
    fileList.forEach((element) => {
        let img = new Image();
        img.src = element.src;
        img.onload = () => {
            // 渲染这张图
            ...
        }
    })

Конечно, мы также можем использовать метод img.decode() для декодирования изображения, которое вернет объект обещания.

img.decode().then(() => {
    // 渲染这张图
     ...
})

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

Вариант 3 Ленивая загрузка + предварительная загрузка

Как мы все знаем,3 = 1 + 2.Таким образом, вариант 3 представляет собой комбинацию варианта 1 и варианта 2. Сначала мы загружаем базовую карту (заполнитель), когда изображение не загружено. Затем мы продолжаем использовать второй метод для предварительной загрузки изображений по одному. Когда пользователь прокручивает изображение, мы меняем следующее предварительно обработанное изображение на первое изображение в видимой пользователем области. Однако ситуация не оптимистична. Когда полоса прокрутки пользователя непрерывно перемещается вниз по прямой линии с постоянной скоростью, эффект остается слабым.

план прекращения

Объединив вышеперечисленные решения, мы оптимизировали базовые, которые можно оптимизировать. Итак, как продолжать улучшать пользовательский опыт? Кажется, что мы можем начать только с самой картинки?
Как упоминалось выше, в сценарии спроса, с которым я столкнулся, ширина и высота изображения50 * 50. И размер картинки200~500k. Таким образом, мы можем использовать миниатюру для рендеринга сначала миниатюры размером 3~5 КБ, а затем отображать более крупное изображение, когда пользователь щелкает изображение для просмотра деталей. В случае использования эскизов мы будем использовать решение номер три для оптимизации, и производительность может почти удовлетворить потребности пользователей в этом сценарии.

разное

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

Категории