#dev #web

Небольшая заметка, чтобы разгрузить беклог.

Как засунуть в HTML бинарные данные и извлечь их в JSе? Казалось бы, ответ простой — применить base64 и декодировать в рантайме. А если хочется еще и файл сделать маленьким? Вот такой код загружает данные в переменную s:

<script>(async()=>s=(await (await fetch("#")).bytes()).slice(80))()</script><!--Binary data goes here...

Решение простое, и заметки б не было, если б я до этого не перепробовала несколько способов, потому что забыла про существование fetch.

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

Подход, соответственно, следующий. Интерпретируем данные, которые нужно закодировать, как последовательность 16-битных чисел. Кодпоинты, задающие безопасные UTF-16 символы, т.е. все кроме суррогатов и кавычек/бэкслешей, прям так и выдаем на выход. А чтобы закодировать опасное число c, прибавляем к нему 0x10000 и выдаем на выход такой кодпоинт, закодированный в UTF-16. Для декодирования просто нужно пройтись по кодпоинтам строки, сделать & 0xffff, и реинтерпретнуть получившийся массив 16-битных чисел как массив байт.

Теряем мы здесь по одному слову на каждое слово в промежутке [0xd800; 0xe000) и еще по мелочи от эскейпов, т.е. размер файла от такого кодирования увеличивается всего где-то на 3%.

Дальше встает загадка о том, что на дворе 2024 год, все используют UTF-8, и браузеры дефолтнутся на него. Но! Стандарт по какой-то причине говорит, что если HTML-файл начинается с BOM, то кодировку надо определять по нему. Даже если в Content-type указана иная. Так что таким трюком можно заставить использовать UTF-16 даже Github Pages.

Остался нюанс, что это форсит UTF-16 на весь HTML-файл, увеличивая размер всего кроме бинарных данных. Так что где-то тут еще может быть разумно засунуть HTML прямо в бинарные данные и подгружать его в рантайме JSом.