коллеги, у меня теоретический вопрос. дано: uikit. в исходном коде html я вижу, что все иконки выводятся не только как <span class=""></span>, но и внутри идет svg код. это так отображается конечному юзеру или реально в коде куча svg? можно применить другую технику для сокращения DOM. например, иконки в шрифте и вставка через <i> или <span>, либо спрайт-картинка <img src="mysprite.svg#vk-icon>. но это нужно заморочиться. просто хочу понять: в текущем варианте uikit/pagebuilder, иконки реально вставляются в коде и замусоривают код и увеличивают DOM?

зачем вставлять иконку как картинку, когда можно написать так: <i class="icon:vk"></span> (это просто пример) и всё - нет лишнего DOM и иконка идет не как картинка

А разве <i class="icon:vk"> - это не элемент дом, как например и картинка?

напрямую svg сами вставляем

вот я и хочу это выяснить, стоит ли игра свеч

чтобы js не обрабатывал юкита

Ну загрузка фонт авесом не блокирует загрузку страницы как и картинка, по идее выигрывает, то что быстрее загрузится фонт авесом или картинка

просто непонятен подход: в случае с font awesome, это шрифт и вставка через тег. DOM не увеличивается. в uikit, видимо, не так. соответственно, для уменьшения DOM нужно применять др.технику. для yootheme pro придется костыли делать. тк там иконки часто в родных элементах используются

коллеги, у меня теоретический вопрос. дано: uikit. в исходном коде html я вижу, что все иконки выводятся не только как <span class=""></span>, но и внутри идет svg код. это так отображается конечному юзеру или реально в коде куча svg? можно применить другую технику для сокращения DOM. например, иконки в шрифте и вставка через <i> или <span>, либо спрайт-картинка <img src="mysprite.svg#vk-icon>. но это нужно заморочиться. просто хочу понять: в текущем варианте uikit/pagebuilder, иконки реально вставляются в коде и замусоривают код и увеличивают DOM?

Судя по Пейджспид — входят в DOM. Но в моем случае они как-то не мешают особо. Тут важно легкие svg применять.

Как хочешь, бери спрайтом, шрифтовыми иконками, или без Единственное юзай тогда uikit без js иконок

просто непонятен подход: в случае с font awesome, это шрифт и вставка через тег. DOM не увеличивается. в uikit, видимо, не так. соответственно, для уменьшения DOM нужно применять др.технику. для yootheme pro придется костыли делать. тк там иконки часто в родных элементах используются

Вы же с тобой вместе выясняли что самый быстрый это спрайт.

А разве <i class="icon:vk"> - это не элемент дом, как например и картинка?

чтобы js не обрабатывал юкита

Я из юикита выкидываю js компонент иконок

Ну это тот момент когда гибкость и удобство расширения приводить к плохим последствиям

А в чём тут траблы? Зачем мне тянуть дефолтные иконке в js? Тем более это все можно отрубить

Fontawesome не отобразится пока не загрузится весь шрифт. Это блокирующая загрузка. Svg отобразится сразу. Поэтому svg выгоднее

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

окей. понял. значит повозиться придется

Всего ничего - это сколько? 200кб?

если загружается в gzip 15кб

И с чего бы это font awesome не блокирует отображение? Пока он не будет загружен - иконки на экране не появятся…

Страница без загруженного фонт авесом отобразится и будет работоспособна

А причем тут gzip?

Потому что его можно сжатым загружать

Там не будет иконок

Размер его никак не меняется от способа передачи

300 милисекунд

Меняется скорость передачи от размера

И собственно это именно та причина почему от него все избавляются

Я в этом вообще проблем не вижу, проще так через svg голову морочить

Это проблемы в пределах погрешностей

В шаблонах html layout я к примеру вызываю svg для спрайта и кидаю параметры: размер, название иконки Плюс у меня стоит еще там номер версии. Ппавда я сборкудклаю на вебпак, поэтому у меня везде номер версии везде одинаковый. Это нужно, чтобы не было траблы с кешем, особенно если ещё какой-то cdn поверх лежит типа cloudflare или Google

200кб - это предел погрешности?

в gzip это 15 кб

15 кб и 100 байт - это огромная разница

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

Кидай в личку

А когда все в кэше вообще побоку 100 или 1000 кб

Но браузеру каждый раз нужно это все рендерить 🤷

Это милисекунды