ZaxapKramer

Уж таким создали JS - так и манит написать спагетти-код.

Не слышал об утрате популярности TypeScript, но именно он, в отличии от Babel (ES6), позволил нормально писать объектно ориентированный код (и проверка типов помогает хорошо)

Dart, как по мне, слишком отдаляется от JS. Можно вообще С++ транслировать в JS (через Emscripten)

когда требуется поддержка IE8, например?

https://github.com/azproduction/autopolyfiller
но протестить потом ручками не помешает.

CoffeeScript и TypeScript уже утратили свою популярность

CoffeeScript пожалуй, но TypeScript живее всех живых.

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

Нуу.. переносим максимум логики на сервер. Толстый сервер - тонкий клиент.

А когда TypeScript успел утратить популярность? Сразу после выхода ангулара в релиз?

Я бы не согласился про свг и уж там более про фотошоп, тут уже дважды посоветовали хорошие инструменты для сжатия, мы у себя сжимали для вёрстки через gulp и плагином пнгкраш (ссылку уже дали выше), сжимает хорошо, либо через кракен (https://kraken.io/). Но программисты в движке для миниатюр используют конвертацию в джипег, там это даёт большее сжатие, т.к. качество не так важно, а насчёт логотипов - там только пнг24, пережатые через пнгкраш с небольшой потерей качества (визуально неотличимо)

В фотошопе есть функция сохранить для веб. В ней можно увидеть сразу несколько вариантов. Причем, изменяя степень сжатия, видите результат. Можно и пакетно сжимать. Еще момент. В ряде случаев , как ни странно jpeg выглядит лучше и весит меньше (если в картинке много цветовых оттенков) .

Вот отличный ресурс. Автор отлично объясняет и показывает на примерах.
https://svg-art.ru/

Конкретно online учебника нет, но есть хорошие ресурсы:
yoksel
w3schools
ну и конечно же статьи на хабре, вроде Знакомство с SVG-графикой, Используем SVG на сайте, ...

Еще для тех кто будет мерить скорость возможно пригодится знание об оптимизации работы кода браузерами и возможных ошибках при замере скорости: https://www.youtube.com/watch?v=HPFARivHJRY

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Это парсер браузера исправил ваши ошибки. И «исправить» его нельзя и не нужно. Лучше объясните зачем вам это понадобилось и, я уверен, ваша реальная задача будет решена проще и правильнее.

пройтись по JSON и записать в DOM

Нужно вывести json в DOM? для этого не нужен шаблонизатор - одна строка кода.
Можно какой-нибудь такой генератор html сделать.
А вообще, вам с начало нужно определиться, что нужно получить в результате.

Используйте замыкания:

var template = function(a) {
  var result = JSON.stringify(a);
  result = result.replace(/<%=(.+?)%>/g,'"+($1)+"');
  result = result.replace(/<%(.+?)%>/g,'";$1\no+="');
  return function(){
    return result;
  };
};

html.replace(/<div data-id="this_div">/, '<div id=superdiv><div data-id="this_div">') + '</div>';

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

Универсального способа не может быть в принципе. Вы JSON к единой структуре приведите, а потом шаблонизатор пишите.
Кстати, я тут недавно рандомизатор писал. Посмотрите, вдруг пригодится.

У меня свои написаны, работают уже лет 10 (пару раз обновлял)... Ибо ничего компактного и оптимизированного не нашел... ни в то время, ни сейчас не вижу альтернатив.

То, что понаписывали за 10 лет, универсальное и жирное как кот на маслозаводе. Да еще написано так, что если нужно шаг в сторону сделать, то ничего не получится, только по "рельсам" или "крылья поломают и дальше только с костылями"... Или написать нужно к библиотеке в 30К еще 100К кода чтобы оно заработало. Тогда как моё умещается в 10К.

Ну не нужно мне огород 100Га вокруг городить, пусть вольница будет.

html.substring(html.indexOf('>') + 1, html.lastIndexOf('<'));