2

ポータブルネットワークグラフィックス形式の50個の小さな画像（基本的にはツールバーデザイン用の（45 x 45px）のアイコン）を含むパブリックフォルダーを設定しました。

expressを使用してパブリックフォルダーを設定するために使用される次のNode.jsコードについて考えてみます。

app.configure(function AppConfig() {
    app.set('port', 8080);
    app.use(express.bodyParser());
    app.use(express.errorHandler());
    app.use(express.cookieParser());

    app.use(express.static(app.root + '/app/public'));  // <== contains 50 icons in .png format

    app.engine('html', require('hbs').__express);
    app.set('views', app.root + '/views/html');
    app.set('view engine', 'html');
    });

最初のページは常にサインインページであるため、ユーザーがサインインの詳細を入力している間、すべてのツールバーアイコン画像が最初のページにキャッシュされてバックグラウンドで読み込まれるようにします。

バックグラウンドでそれを行う方法を探しているときに、 ImageSpriteのコンセプトに出くわしました。しかし、まだ要求されていない画像をキャッシュするには、別のソリューションが必要です。

誰かがこれを行う方法に光を当てることができますか？

更新：タグ自体を使用して、サイズが0.76MBの50個すべての画像スプライトである単一の画像（.png）を要求しようとしましたが、サインインページを読み込むと画像が読み込まれ、ユーザーはUIを確認できます。したがって、問題は、最初にUIを表示してから、AJAXのような背景の画像をロードすることです。

4

2 に答える 2

6

画像スプライトをサインイン ページの最下部に挿入して非表示にすることで、画像スプライトを事前に読み込むことができます。ブラウザーがサインイン ページを解析およびレンダリングしている間、画像スプライトが検出されて読み込まれますが、表示されません。ページの最後にあるため、UI に干渉せず、ユーザーには最初に UI が表示されます。

<html>
<body>
...
  <div style="display:none">
     <img src="sprite.png"/>
  </div>
</body>
</html>

または、JavaScript を使用してロードすることもできます

$(function() { // when DOM is ready
    $(window).load(function() { // when the page is fully loaded including graphics
        $('body').append($('<div><img src="sprite.png"/></div>').hide());
    });
});

また、スプライトをキャッシュできることをブラウザーに伝えるように Express に指示することを忘れないでください。

app.use(express.compress()); // optional
app.use(express.static(app.root + '/app/public', { maxAge: 86400000 /* 1d */ }));
于 2013-03-05T08:29:06.847 に答える
1

サーバーは、ユーザーが要求したコンテンツのみを提供できます。ファイル転送 (ページで必要) を減らし、パフォーマンスを向上させるために、ブラウザーによってキャッシュが行われます。

キャッシュを行うには、ブラウザがファイルを少なくとも 1 回要求する必要があります。その後、ファイルが更新されているかどうかを確認します。ファイルがサーバー上で変更された場合、キャッシュは破棄され、それ以外の場合はキャッシュが使用されます。すべての画像をキャッシュしたい場合は、それらをログイン ページに含めるだけです。その後、ファイルに対するすべてのリクエストがキャッシュにヒットします。ファイルがノードにキャッシュされていることを確認するには、ログを確認してください。

//First access
GET /stylesheets/style.css 200 1270ms
//Thereafter from cache
GET /stylesheets/style.css 304 6ms

キャッシュについて心配する必要はありません。ブラウザに処理させてください。

于 2013-03-04T15:32:00.450 に答える