1

jquerymobileを使用してモバイルシングルページWebアプリを作成しています。webappには、いくつかのjavascriptファイルといくつかのcssファイルが含まれています。jsファイルとcssファイルを連結して最小化するデプロイスクリプトを作成しましたが、連結されたjsファイルとcssをHTMLファイルに直接インライン化する必要があるかどうか疑問に思っています-ここではシングルページアプリについて話していることに注意してください（これは、動的に生成されたHTMLを使用する従来のWeb 1.0アプリではお勧めできません）。また、appcache /マニフェストファイルを使用してシングルページアプリをキャッシュし、Webアプリへの後続のアクセスがキャッシュから提供されるようにしているため、最初の読み込み時間が主な関心事です。

すべて（jquery、jquery mobileなど）をインライン化すると、7kbのHTMLファイルは350kb（100kbのzip形式）に増加しますが、1回のリクエストですべてをロードできるようになりました。

しかし、jsファイルの並列ダウンロードなどの他の利点が欠けていますか？したがって、cssとjsをインライン化せずに、すべてのjsとcssを単一のjsファイルと単一のcssファイルに連結してからフェッチする方が良いでしょうかそれぞれ別々のリクエストで？

知っておくべきファイルサイズの制限はありますか？たぶん、ネットワークルーターでのキャッシュは、ファイルサイズが小さいなどの場合にうまく機能しますか？

だから私の質問は、単一ページのモバイルWebアプリを作成するときにすべてをインライン化するのが良い考えかどうかに要約されますか？

4

2 に答える 2

3

連結する量とインライン化する量の答えは、条件の数によって異なります。最終的な答えは、A / Bテストを実行して、自分に最適なものを見つける必要があるということです。あなたが説明していることから、私はあなたが絶対に350KのCSSとJSをインライン化しないことをお勧めします。これを行う場合、HTML、JS、またはCSSを変更するには、ペイロード全体をダウンロードする必要があります。代わりに、HTML、JS、CSSを個別のリクエストとして保持することにより、これらの変更と強制更新を区分化します。あなたは動的に行うことができます| インライン化最初の応答を高速にしますが、後続のリクエストに（appまたはlocalStorage）キャッシュを活用しますが、アプリキャッシュと組み合わせると複雑になります（HTMLドキュメントがアプリキャッシュに保存されるため）。それ以外の場合は、それらを別々に保ち、各リソースをアプリキャッシュに保存し、必要に応じて個々のリソースを更新します。

于 2012-09-09T20:21:36.513 に答える
1

異なるクエリ文字列を使用して異なるURLからWebアプリにアクセスできる場合は、すべてをhtmlにインライン化することはお勧めしません。例 ：

それらのそれぞれがappcacheにマスターコピーを追加します（chromeのchrome：// appcache-internals /を見ると非常にわかりやすくなります）。次に、キャッシュに関してappcacheのクォータ制限に達するリスクがあります。さらに、appcacheの更新時に、ブラウザはappcacheエントリリストを調べて、その新しいコピーを要求します。私がモバイルデバイスとappcacheでフォローしている良い妥協案は、htmlを小さく保ち、1つの大きなcss（base 64のインライン画像を含む）と1つのjsファイルを用意することです。

参考までに、現在、appcacheにリストされているすべてのリソースの合計のサイズに5MBから25MBの順序で割り当て制限があります（25は新しいiOS6の制限です）

-seb

于 2012-10-30T05:10:02.530 に答える