В какой момент запрашивается файл изображения быстрее, чем base64, кодирующий его как встроенный?

Question

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

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

Например, если изображение имеет размер 2 КБ, а для запроса его в виде файла требуется 100 мс, как это сделать?Я говорю, сколько времени требуется для рендеринга встроенной версии того же изображения?

Answer 1

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

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