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

Improve Performance of CSS url() with DataURI Image

本文关键字：性能 CSS-url DataURI 图像 使用      更新时间：2023-09-26

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

好的。我们有一个Cordova生成的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。该应用程序至少需要5到10秒才能真正显示任何有背景的内容。几次重新装载使情况变得更糟。

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

图像已经被制成条状…（是的，在那之后我们还有大约200张图像）。

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

http://127.0.0.1/myimage.png

尽管如此，如果它没有离线运行，也没有使用任何本地功能，我不确定它是否应该是一个应用程序。

相关文章：