0

我知道我在做一些愚蠢的事情，真的，但请多多包涵……

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

所以到目前为止，我们所做的是将大约 200 张图像（约 7 MiB）预打包到 iOS 应用程序中，在/Documents第一次运行时将其解压缩，然后通过 CordovaFile插件加载它们。

服务器端将提供两个 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，如果不是更大的话。该应用程序至少需要 5 到 10 秒才能实际显示任何具有背景的内容。几次重新加载使情况变得更糟。

那么，我该如何改进这个动态 CSS 生成过程以使图像加载更快......？

图像已经被制作成条带......（是的，之后我们仍然有大约 200 张图像）。

4

1 回答 1

1

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

http://127.0.0.1/myimage.png

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

于 2013-08-22T17:37:21.027 回答