Тай Люис из Lucidchart написал хорошую статью про base64 "Base64 Encoding: A Visual Explanation".

На сегодняшний день base64 используется при внедрении ресурсов в страницы с помощью протокола data:, в source map'ах и там, где необходимо передавать бинарные данные по текстовому протоколу.

В статье описывается работа алгоритма base64 с хорошей визуализацией. В цикле верхнего уровня входной поток данных делится на группы по 24 бита (input groups), которые обрабатываются вложенным циклом. Во вложенном цикле каждая входная группа бьётся на группы по 6 битов. Каждой комбинации битов соответсвует определённый символ, которым кодируется полученная группа. При необходимости во внешнем цикле input group искусственно расширяется до 24 битов с помощью символа =. Именно поэтому в конце base64 последовательности данных можно часто видеть =.

В статье Тай рассказал ещё про пасхалку в Chrome, про которую я не знал. Если ввести в адресную строку chrome://dino, то во весь вьюпорт браузера запустится игра с динозавром, которая доступна в обычном режиме тогда, когда нет доступа к сети (не забудьте нажать пробел). Эта игра хранит все свои ресурсы: изображение и звуки — в base64.

#base64 #algorithm #egg

https://www.lucidchart.com/techblog/2017/10/23/base64-encoding-a-visual-explanation/

Пару месяцев в закладках лежала статья Дага Силларса про объяснение того, почему инлайн изображений в CSS с помощью Base64 является анти-паттерном — "Performance Anti-Patterns: Base64 Encoding".

Добавление закодированных в base64 изображений блокирует critical rendering path. Если изображение очень большое, то это повлияет на размер CSS. После загрузки большой CSS-файл должен будет распариться. Комбинация этих двух факторов увеличивает задержку перед отображением документа. Также может возникнуть такая ситуация когда один и тот же файл может быть заинлайнен несколько раз. Даг нашёл пример, в котором одно и тоже фоновое изображение было заинлайнено 115 раз. Ещё в статье был пример большого CSS, в который было заинлайнено 6 разных шрифтов.

Совет в статье простой — использовать инлайн изображений с умом. Также не стоит инлайнить шрифты. И по возможности надо переходить на HTTP/2.

P.S. Завтра буду рассказывать обновлённый доклад про кодмоды на FrontendConf в Москве. Если среди вас кто-нибудь там будет, подходите сказать привет, буду рад вашему фидбеку.

#performance #base64 #css

https://calendar.perfplanet.com/2018/performance-anti-patterns-base64-encoding/