Я знаю, что я делаю что-то немое, правда, но, пожалуйста, несите меня ...Улучшение производительности CSS url() с помощью DataURI Image
Ok. У нас есть приложение, созданное в Кордове iOS, которое в основном запускает удаленный сайт (не строго SPA, но только с несколькими полнофункциональными перезагрузками), то есть веб-сайт не некоторые html-файлы, которые распространяются вместе с приложение, но настоящий сайт, который работает на сервере. На сайте показано множество элементов с background: url(img/foo.png); или background-image: url(img/bar.png);. Теперь мы хотим уменьшить запрос изображения от клиента и, если возможно, также ускорить рендеринг страниц.
Итак, что мы сделали до сих пор, мы предварительно упаковали ~ 200 изображений (c.a. 7 MiB) в приложение iOS, извлеките его в /Documents с помощью первого запуска и загрузите их через плагин Cordova File.
на стороне сервера будет обеспечивать два CSS файлов, один без url() вызова в нем (without-bg.css), а другой только с элементами, которые имеют url() вызов в ней (only-bg.css). without-bg.css будет загружен так же, как нормальный, в то время как only-bg.css будут извлечены с помощью AJAX и обработаны следующим образом:
var styleSheetConverted = styleSheetRaw.replace(
/(url\()(.*?)(\))/gi,
function(m, p1, p2, p3){
if(p2.match(/https?:\/\//i)) return p1+p2+p3;
var naked = p2.replace(/"/g, '');
if(imgDataURIs.hasOwnProperty(naked)){
return p1+imgDataURIs[naked]+p3;
}
return p1+p2+p3;
}
);
$('head').append(
'<style>' + styleSheetConverted + '</style>'
);
В принципе, я замена всех url(path/to/img.png) вызовов в url(data:image/png;base64,iVBORw0K <...> ErkJggg==, то есть в формате base64 идентификаторы URI данных. Проблема в том, что эта новая строка огромная, не менее 10 MiB, если не больше. Приложение занимает не менее пяти-десяти секунд, чтобы фактически показать что-либо с фоном. И несколько перезарядов делают его еще хуже.
Итак, как я могу улучшить этот динамический процесс генерации CSS, чтобы ускорить загрузку изображений ...?
Изображения уже сделаны в полоски ... (да, после этого у нас еще есть ~ 200 изображений).
datauris создает большие утечки памяти, если вы перезагружаете их много раз .... но иногда вам нужно это делать. поэтому вы можете кэшировать их в websql или в качестве полного json-файла и/или использовать cache.manifest. – cocco
Почему вы делаете это с URL-адресами данных? Почему бы просто не упаковать файлы изображений с вашим приложением и не ссылаться на них с помощью обычных локальных URL-адресов? – Pointy
@ Понятно, потому что они не сработают ...? Исправьте меня, если я ошибаюсь, но как я могу ссылаться на них в файле CSS, который исходит от * remote *, а не локального? – Metaphox