1

私は、パフォーマンスが非常に重要な問題である Web プロジェクトに取り組んでいます。

編集：

状況：

ユーザーのワークフローに関する詳細を追加したいと思います。

  1. ユーザーが私のウェブサイトのウェルカム ページにアクセスしhttp://example.org/ます。
  2. 彼はページにアクセスするためにリンクをクリックしますhttp://example.org/mypage
  3. onclick-リンクのハンドラが実行されました。
  4. ハンドラーは、XHR を使用してデータをロードします。
  5. ハンドラーはhttp://example.org/mypage動的に作成します。
  6. FileSystem APIハンドラーは、 at を使用してローカルに mypage を保存しfilesystem:http://example.org/mypageます。EDIT：（クライアント側にfilesystem:http://example.org/mypage保存されているローカルリソースです）FileSystem
  7. ハンドラーは履歴を拡張し、ロケーション バーのURL を (ウェルカム ページの URL) からHistory API(ユーザーが見たいページ) に変更します。http://example.org/http://example.org/mypage
  8. その間、ユーザーは別のページにアクセスします。
  9. その後、ユーザーhttp://example.org/mypageはロケーション バーに直接入力します。
  10. ブラウザは、 の代わりにfilesystem:http://example.org/mypage(のローカルに保存されたバージョン) を表示/ロードします。つまり、ブラウザは新しいリクエストを作成せず、ローカルに保存された のコピーを使用します。http://example.org/mypagehttp://example.org/mypagehttp://example.org/mypage

新しいリクエストを作成する代わりに、ブラウザがページのローカルに保存されたバージョンを使用するようにするにはどうすればよいですか? 編集: - 上記のリストの #10 でやりたいことです。

編集：

私の質問：

http://example.org/mypageクライアント側は、上記のリストの #2 から #7 で既に作成/生成されています。そのページをもう一度作成する必要はありません。そのため、ブラウザに のリクエストを作成させたくないのですhttp://example.org/mypage。

それが私がやりたいことです：

filesystem:http://example.org/mypageがすでに作成されている場合 (ユーザーが既に にアクセスしたことがある場合) http://example.org/mypage:

filesystem:http://example.org/mypageの代わりに使用しhttp://example.org/mypageます。

さもないと：

のリクエストを送信http://example.org/mypage

解決しようとします:

  1. マニフェスト ファイルのフォールバック セクションを使用して次のようなことを行うことはできません: EDIT: (orgin は別として)

    フォールバック: http://example.org/mypageファイルシステム:http://example.org/mypage

フォールバック ディレクティブは、ユーザーがオフラインの場合にのみ使用され、それ以外の場合は無視されるため、FileSystem に保存されているローカル バージョンをブラウザーに使用させるためです。編集:しかし、ユーザーがオンラインであっても、のfilesystem:http://example.org/mypage代わりに使用したい。http://example.org/mypage

  1. 新しいリクエストを作成せず、キャッシュされたバージョンを使用するために、サーバー生成ページのレスポンス ヘッダーで Expire フィールドを使用できることを知っています。

しかし、JS と XHR を使用してクライアント側で動的にページを作成するとどうなるでしょうか。編集: (そのケースについては で説明しましたThe situation) クライアント側でページを作成する場合、クライアントにそのページをキャッシュさせる方法はありません。FileSystem APIそのため、クライアント側に保存するためにページを手動で「キャッシュ」します。

パフォーマンスを向上させるために、ユーザーが既にローカルにアクセスしたページを保存しようとしています。ユーザーがページに再度アクセスすると、ローカルに保存された古いバージョンのページが表示され、スクリプトは XHR を作成して、その間にページが変更されたかどうかを確認します。

しかし、ブラウザでページのローカル バージョンを使用するにはどうすればよいでしょうか。生成されたページは、FileSystem API を使用してクライアント側にローカルに保存できます。生成されたページの URL を選択して、History API を使用してブラウザーのロケーション バーに表示できます。
ユーザーが別のサイトにアクセスして戻るボタンを押すと、イベント ハンドラーによって onPopState イベントをキャッチできます。
そして、そのイベント ハンドラーは、FileSystem API を使用して、動的に作成されたファイルを読み込むことができます。
しかし、ユーザーが [戻る] ボタンを使用せず、History API を使用して登録した URL をロケーション バーに直接入力した場合はどうすればよいでしょうか?
その場合、ブラウザはローカルに保存されたバージョンのページを使用せず、ブラウザはサーバーからページをロードするリクエストを作成します。

4

2 に答える 2

0

アプリケーション キャッシュに動的データを入れないでください。ページに動的データを配置したい場合は、AJAX を使用してサーバーからデータを取得し、データをLocal Storageに保存し、JavaScript を介してストレージからデータをページに入力します (このために History API にフックできます)。

ちなみに、フォールバック エントリは同じドメインにある必要があるため、これは機能しません。

FALLBACK:
http://example.org/mypage filesystem:http://example.org/mypage

ページがアプリケーション キャッシュにある (つまり、ローカルに保存されている) と、マニフェストが更新されるか、ユーザーがキャッシュを削除するまで、ブラウザーは常にアプリケーション キャッシュのバージョンを使用します。ページにどのような有効期限ヘッダーを配置しても問題はありませんが、長い有効期限を設定し、マニフェストを頻繁に更新する場合は、アプリケーション キャッシュがサーバーから更新されるのではなく、ブラウザー キャッシュから読み込まれる可能性があります。これが、アプリケーション キャッシュに入れるものを静的ファイルにする必要がある理由です。AJAX を使用して動的なものを取得します。

于 2012-04-05T16:28:42.623 に答える
0

階層内の実際のリンクをエンコードする URL (例: "mypage") を URL のアンカー部分 (例: http://example.com/#mypage ) で使用する場合があります。次に、window.location.hash を使用して # の後の文字列を取得し、必要な魔法を実行できます。ルート (または # の前に必要なもの) が AppCache にあることを確認してください。

于 2013-02-05T22:13:33.743 に答える