javascript - DataURI 画像を使用して CSS url() のパフォーマンスを改善する

Question

私は本当にばかげたことをしていることを知っていますが、私に我慢してください...

Ok。基本的にリモートWebサイトを実行するCordova生成iOSアプリがあります（厳密にはSPAではなく、ページ全体のリロードが数回のみ）。つまり、Webサイトはアプリとともに配布されるhtmlファイルではありませんが、サーバー上で動作する実際のサイト。background: url(img/foo.png);このサイトには、またはbackground-image: url(img/bar.png);定義された多くの要素が表示されます。ここで、クライアントからの画像リクエストを減らし、可能であればページのレンダリングも高速化したいと考えています。

これまでに行ったことは、約 200 枚の画像 (約 7 MiB) を iOS アプリに事前にパックし/Documents、最初の実行で展開して、CordovaFileプラグインを介してロードすることです。

サーバー側は 2 つの CSS ファイルを提供します。1 つはurl()呼び出しを含まない ( without-bg.css)、もう 1 つは呼び出しを含む要素のみを含む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 枚ほどの画像があります)。