Я создаю легкое мобильное приложение для людей с недорогими смартфонами, с не очень большими мобильными соединениями.
Используя значки svg в html, одна страница может иметь 10-20 из них, делая загрузку около 5kb-20kb только для передачи кода значка svg.
Нам нужно использовать код, потому что значки должны быть изменены, например, штрих, цвет. В противном случае будут использоваться файлы.svg.
Я подумал, что, возможно, лучше всего сохранить эти дублированные коды в JS-переменную и повторить их, как только страница будет загружена на стороне клиента. Это означало бы, что клиент будет загружать только код svg один раз для каждого значка, а затем его телефон будет размещать значок много раз на всей странице.
Является ли эта плохая практика, полагаясь на телефон, чтобы выполнить такую задачу? Говорят, что смартфон, которому 2 года, будет использовать до многих своих ресурсов/памяти/процессора в веб-приложении?
То, как я добавляю значок svg, выглядит так:
var arrowIconNext = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"'+
'width="11.8px" height="46.8px" viewBox="0 0 11.8 46.8" enable-background="new 0 0 11.8 46.8" xml:space="preserve">'+
'<polyline fill="none" stroke-width="1" stroke-miterlimit="10" points="1.3,1 20.2,24 5.3,46.2 "/>'+
'</svg>';
$('.content .icon').html(arrowIconNext);
Это циклически проходит через все.icons на странице и вставляет svg html.
Некоторые из ваших шаблонов не нужны. Идентификатор атрибута может также оказаться ненужным, но трудно сказать, не видя, используете ли вы его.
var arrowIconNext = '<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"'+
'width="11.8px" height="46.8px" viewBox="0 0 11.8 46.8">'+
'<polyline fill="none" stroke-width="1" stroke-miterlimit="10" points="1.3,1 20.2,24 5.3,46.2 "/>'+
'</svg>';
Также gzip все ваши данные и отправить его на телефон как Content-Encoding: gzip