javascript - 使用 DataURI 图像提高 CSS url() 的性能

Question

我知道我在做一些蠢事，真的，但请耐心等待...

好的。我们有一个 Cordova 生成的 iOS 应用程序，它基本上运行一个远程网站(严格来说不是 SPA，但只有几个完整的页面重新加载)，也就是说，该网站不是 一些与应用程序一起分发的 html 文件，但是在服务器上运行的真实站点。该网站显示了很多元素 background: url(img/foo.png);或 background-image: url(img/bar.png);定义。现在我们想减少客户端的图片请求，如果可能的话，还要加快页面渲染速度。

到目前为止，我们所做的是将约 200 张图像(约 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 生成过程，使图像加载速度更快......？

图像已经被制作成 strip ……(是的，在那之后我们还有大约 200 张图像)。

Answer 1

您可以创建自己的嵌入式 Web 服务器，该服务器从应用内部运行并使用如下 URL 来加载图像:

http://127.0.0.1/myimage.png

不过，如果它不离线运行并且不使用任何 native 功能，我不确定它是否应该是一个应用程序。