jquery モバイルの UI 読み込み時間を高速化する必要があります。head.js メソッドを使用して js ファイルを並列にロードしようとしたところ、基本的な html ページを表示した後、3 ～ 5 秒で jQuery モバイル UI が表示されます。CDNでホストされているjsファイルも試しましたが、ダウンロードしたjsファイルと何の違いもありません。
jquery モバイル js ファイルをキャッシュして、UI レンダリングを高速化する方法はありますか?
ありがとう。
1967 次
3 に答える
6
Javascript を圧縮する
他のプラグインやコードを使用する場合は、常に圧縮された js ファイルを使用してください。それらは小さく、はるかに高速にロードされます。見てみると、jQuery と jQuery Mobile が圧縮バージョンを提供していることがわかります。
js ファイルも圧縮する必要があります。Packerツールは簡単に見つけることができます。
js ファイルの読み込みを分析する
js ファイルの初期化を分析して、問題のあるファイルを見つけます。Firebugなどのアドオンを使用できます。ファイルの内訳が表示されます。「ネット」タブに移動するだけです。ファイルの種類でフィルタリングすることもできます。
正しいjsファイルソースを使用してください
Phonegap アプリケーションを作成している場合は、すべての js ファイルをローカルに保存する必要がありますが、通常の Web アプリケーションとして使用している場合は、質問に記載されているように CDN ソースを使用してください。
Javascript の配置を最適化する
可能であれば、JavaScript を HTML ファイルの末尾に配置してください。Google アナリティクスやその他の統計追跡ソフトウェアが、終了タグの直前に置きたいことに注目してください。
これにより、ほとんどのページ コンテンツ (画像、表、テキストなど) を最初に読み込んでレンダリングできます。ユーザーにはコンテンツの読み込みが表示されるため、ページはレスポンシブに見えます。この時点で、負荷の高い JavaScript が最後にロードを開始できます。
基本的に、タグの直前の HTML の終わりで JavaScript を初期化します。これにより、jQuery Mobile で問題が発生することがあります。その場合、jQuery と jQuery Mobile を HEAD で初期化し、その他すべてを HTML の末尾で初期化します。
Javascript をオンデマンドで読み込む
メイン コンテンツがロードされた後、必要のないすべての js ファイルをプログラムでロードする必要があります。
関数：
$import('http://example.com/myfile.js')
ファイルを直接インクルードするのと同じように、ドキュメントの先頭に要素を追加します。
ファイルをキャッシュする:
PHP をサーバー テクノロジとして使用している場合は、キャッシングを使用して読み込みパフォーマンスを向上させることができます。基本的にはブラウザのキャッシュ有効期限を設定します。これを行うには、特定のキャッシュ ヘッダーを送り返すことができるように、PHP または Apache の .htaccess にアクセスする必要があります (キャッシュの詳細を参照)。
ファイルを結合する
最後に、他のすべてがブレーキをかけたら、js コードを 1 つのファイルに結合する必要があります。ブラウザーで一度に開くことができる Web サイトへの接続は非常に多くなります。各接続をセットアップするためのオーバーヘッドを考えると、いくつかの小さなスクリプトを大きなスクリプトに結合することは理にかなっています。
すべてをGzip
多くの場合、ファイル サイズが 75% 以上削減される圧縮のメリットは無視できません。HTTP 圧縮でサイトを最適化してください。この方法は古いブラウザーでは機能しませんが、jQuery Mobile を使用しているため、古いブラウザーについて心配する必要はありません。
于 2013-05-20T10:06:41.327 に答える
0
Android WebView を使用している場合は、Android アプリの assets フォルダーから js を読み込むことができます。jsを更新するたびにアプリを更新する必要があるため、非常にお勧めできませんが、場合によってはそれが最善の解決策です。
于 2013-05-20T10:11:33.087 に答える