我知道我正在做一些愚蠢的事，真的，但请耐心等待我......
确定。我们有一个Cordova生成的iOS应用程序，基本上运行远程网站（不是严格意义上的SPA，但只有几页整页重新加载），也就是说，该网站不是一些与应用程序一起分发的html文件，但是在服务器上运行的真实站点。该网站显示了许多定义了background: url(img/foo.png);或background-image: url(img/bar.png);的元素。现在我们想要减少来自客户端的图像请求，如果可能的话，还要加快页面呈现速度。
所以我们到目前为止所做的是我们预先将〜200张图像（大约7 MiB）打包到iOS应用程序中，首先运行将其提取到/Documents，然后通过Cordova {{1}加载它们插件。
服务器端将提供两个CSS文件，其中一个没有File个调用url()），另一个只包含without-bg.css个调用的元素（{{ 1}}）。 url()将正常加载，而only-bg.css将由AJAX检索并按如下方式处理：
without-bg.css基本上，我将所有only-bg.css次调用替换为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>'
);
，即base64编码数据URI。问题是这个新字符串是 huge ，至少10 MiB，如果不是更大的话。该应用程序需要至少五到十秒才能真正显示任何背景。而且几次重载使情况变得更糟。
那么，如何改进这种动态CSS生成过程以使图像加载更快......？
图像已被制作成条状...（是的，之后我们还有~200张图像）。
答案 0 :(得分：1)
您可以创建自己的嵌入式Web服务器，该服务器从应用程序内部运行，并使用以下URL来加载图像：
http://127.0.0.1/myimage.png
尽管如此，如果它不是脱机运行并且它没有使用任何本机功能，我不确定它应该是一个应用程序。