用DataURI提高CSS url（）的性能

我知道我正在做一些愚蠢的事情，真的，但請忍受我...用DataURI提高CSS url（）的性能

好的。我們有一個科爾多瓦產生基本上運行遠程網站（不是嚴格意義上的SPA，但只有少數完整的頁面重新加載）的iOS應用程序，也就是說，該網站是不與該一起分發一些HTML文件應用程序，而是一個運行在服務器上的真實網站。該網站顯示了許多定義了background: url(img/foo.png);或background-image: url(img/bar.png);的元素。現在我們要減少來自客戶端的圖像請求，並且如果可能的話，還要加快頁面渲染速度。

所以我們到目前爲止所做的是，我們預先在〜iOS應用程序中打包了大約200張圖片（c.a. 7 MiB），首先將其提取到/Documents中，然後通過Cordova File插件加載它們。

服務器端將提供兩個CSS文件，一個沒有任何url()調用（without-bg.css），和其他與只在它（only-bg.css）url()來電元素。 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==，即編碼數據的URI的base64。問題是，這個新的字符串是巨大的，至少10 MiB，如果不是更大。該應用程序至少需要五到十秒才能實際顯示具有背景的任何內容。而且幾次重新加載都讓它變得更糟。

那麼，怎樣才能提高我這種動態CSS生成過程，使圖像加載速度更快...？

圖像已經被拍成了條......（是的，在那之後我們仍然有200〜圖像）。

來源

2013-08-22 Metaphox

如果重新加載它們很多次，datauris會產生大量內存泄漏......但有時您需要這樣做。所以你可以將它們緩存在websql中或者作爲完整的json文件緩存並且/或者使用cache.manifest。 – cocco

你爲什麼要用數據URL來做這件事？爲什麼不直接將圖像文件打包到應用程序中，並使用普通的本地URL引用它們呢？ – Pointy

@Pointy，因爲他們不會工作...？如果我錯了，請糾正我的錯誤，但是如何在CSS文件中引用它們，它來自* remote *，不是本地的？ – Metaphox

您可以創建一個從應用程序中運行自己的嵌入式Web服務器，並使用網址像下面這樣加載圖像：

http://127.0.0.1/myimage.png

不過，我不知道這應該是一個應用程序，如果它不會脫機運行，並且不會使用任何本機功能。

來源

2013-08-22 17:37:21

非常感謝WebResourceLoadDelegate，現在就試試吧。該應用程序確實利用條形碼掃描器等原生功能並從iPad讀取自定義設置。它應該是一個完整的本地應用程序，但功能確實需要全時網絡訪問。 – Metaphox

僅供參考'WebResourceLoadDelegate'在iOS中不可用。與嵌入式HTTP服務器。 – Metaphox

用DataURI提高CSS url（）的性能

回答

相關問題