0

約 10 個の HTML、4 個の CSS、8 個の JS、および 15 個の IMG (PNG/JPG) ファイルを含むアプリがあります。このサイトを非常に応答性が高く高速にしたい (つまり、優れたユーザー エクスペリエンス)。

したがって、最初のページの読み込み時に、ブラウザが「ブラウザがビジー」になることなく、サイトからすべてのアセットを非同期的にキャッシュするようにしたいと思います。Steve Souders (Google) によると、「ブラウザ ビジー」を回避するには、XHR Eval または XHR インジェクションを使用する必要があります。Even Faster Web Sitesのスライド 23 を参照してください。

XHR Eval または XHR Injection を Javascript に使用できることはわかっています。HTML、CSSなどに使用できますか?

私はこのようなコードを(jQueryで)試していますが、うまく動作しません:

$.ajax({ url:"/blog", cache:true, dataType:"text" });
$.ajax({ url:"/about", cache:true, dataType:"text" });
$.ajax({ url:"/blog/main.css", cache:true, dataType:"text" });
$.ajax({ url:"/about/logo.png", cache:true, dataType:"text" });
$.ajax({ url:"/blog/social.js", cache:true, dataType:"text" });

私は道を外れているのでしょうか、それともこれは高速なユーザー エクスペリエンスを備えた完全にキャッシュされたサイトへの正しい道なのですか?

4

1 に答える 1

0

マイクロ最適化について考える前に、マクロ最適化から始めてください。

  • サーバーで Gzip 圧縮が有効になっていることを確認します。
  • CSS ファイルと JS ファイルを 1 つのファイルに結合して縮小します。
  • すべての小さな画像を 1 つの大きな画像に結合して、スプライトを作成します。これにより、リクエストの数が減ります。
  • 画像に最適な形式を選択し、不要なメタデータ情報を削除してスペースを節約します。
于 2013-05-12T23:52:01.273 に答える