Есть ли какой-то выигрыш в производительности при использовании изображений в кодировке base64?

Question

Для изображений небольшого размера, каково (если есть) преимущество во времени загрузки с использованием изображения в кодировке base64 в файле javascript (или в простом файле HTML)?

$(document).ready(function(){
    var imgsrc = "../images/icon.png";
    var img64  = "P/iaVYUy94mcZxqpf9cfCwtPdXVmBfD49NHxwMraWV/iJErLmNwAGT3//w3NB";

    $('img.icon').attr('src', imgsrc); // Type 1
    $('img.icon').attr('src', 'data:image/png;base64,' + img64); // Type 2 base64
});

Answer 1

Преимущество заключается в том, что вам нужно сделать на один HTTP-запрос меньше, так как изображение «включено» в файл, для которого вы в любом случае сделали запрос.Количественная оценка зависит от множества параметров, таких как кеширование, размер изображения, скорость сети и задержка, поэтому единственный способ - это измерение (а фактическое измерение, безусловно, не будет применимо ко всем).

IСледует отметить, что другой распространенный подход к минимизации количества HTTP-запросов заключается в использовании CSS-спрайтов для размещения множества изображений в одном файле.Возможно, это был бы еще более эффективный подход, поскольку он также приводит к переносу меньшего количества байтов (base64 увеличивает размер байта примерно в 1,33 раза).

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

Answer 2

Вам нужно сделать несколько запросов к серверу, скажем, вы загрузили искусственный бит HTML, такой как:

<img src="bar.jpg" /> 

Вам уже нужно было сделать запрос, чтобы получить это.Сокет TCP / IP был создан, согласован, загружен этот HTML и закрыт.Это происходит с каждым загружаемым файлом.

Таким образом, в вашем браузере создается новое соединение и загружается этот jpg, P/iaVYUy94mcZxqpf9cfCwtPdXVmBfD49NHxwMraWV/iJErLmNwAGT3//w3NB

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

Это большая работа для одного изображения, поэтому вы можете встроить изображение в кодировку base64.Это не работает с устаревшими браузерами, только современные.

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

Есть и другие способы использования встроенных данных base64, но ваш вопрос касался производительности.

Будьте осторожны, чтобы неЯ думаю, что издержки HTTP настолько велики, и вы должны сделать только один запрос - это просто глупо.Вы не хотите идти за борт и включать все вещи, просто очень простые вещи.Это не то, что вы должны использовать во многих местах.Разделение проблем - это хорошо, не начинайте злоупотреблять этим, потому что вы думаете, что ваши страницы будут быстрее (на самом деле они будут медленнее, потому что загрузка одного файла огромна, и ваша страница не начнет предварительный рендеринг, пока не будет завершена).).

Answer 3

Сохраняет запрос к серверу.

Когда вы ссылаетесь на изображение через свойство src, оно загружает страницу, а затем выполняет дополнительный запрос для получения изображения.

При использовании изображения в кодировке base64 эта задержка будет сохранена.