モバイル機器でJSヘビーなページを演奏するにはどのようなテクニックを使用できますか?

JSコードを大量に含むサイト(jQueryを含む〜100K)があります。私が電話やタブレットで類似のサイトを閲覧したとき、私は通常、彼らがどれほど怠惰であることに失望しています。サイトの別の「モバイルフレンドリー」バージョンを開発せずに、モバイルデバイスで(ページ読み込み時間レスポンスの両方で)コードの大部分を交換します。

もちろん、すべての環境に適用できる無数のパフォーマンス手法があります。私が聞きたいのは、私がデスクトップ/ブロードバンド環境でやりたい したいモバイル/セルラー環境でのパフォーマンスのためにやりたいことです。

ここで私が探しているもののいくつかの例があります:

  • Setting jQuery.fx.off = true to skip animations
  • Disabling intensive CSS effects like box-shadow, text-shadow, and border-radius

ほかに何か?

7

3 答え

待ち時間はモバイル環境の中でのキラーなので、集中する最初のものの1つは要求を減らすことです。たとえば、次のようにします。

CSSとJSをインライン化し、それらを分割してローカルストレージにキャッシュします(Bing mobileはこれを行います)

あるいは、JSをインライン化してコメントに入れてコメントを削除し、JS(モバイルGmailがこれを行うのに使用した - それがどうかわからない)

画像にdata-uriを使用する

jqueryからjepto.jsのようなよりスリムなフレームワークに切り替える

大規模なオフセットを使用してアイテムを表示しないようにしないでください。

ベロシティEUからの@ standardistaのプレゼンテーションを見つけたら、それは他の考えのシリーズ全体を含んでいます。

4
追加された
うわー、インラインCSS/JSをlocalStorageにキャッシュすることは、私が考えていなかったことです。ありがとう。
追加された 著者 Trevor Burnham,
Addy Osmaniはこれを手助けするための実験ライブラリを作成しました。 - addyosmani.github.com/basket.js
追加された 著者 Andy Davies,

あなたは実際には、モバイルデバイスだけに固有の最適化を見つけることはできません。あなたが言及した2つは、アニメーションと集中的なCSS効果を無効にするだけで、遅いデスクトップPCでの応答性を向上させることにもなります。同様に、モバイルデバイスをターゲットに設定することができる他の最適化は、デスクトップPCのパフォーマンスも向上させます。

そのことを踏まえて、私が考えることができる半最適化は、特にモバイルデバイスのメリットとして、ページの物理的なサイズを縮小することだけです。これは、人々があなたのページの異なる部分にズームする時間を無駄にする必要がないようにするためです。

Also, to add to your list, I highly recommend using Minify: http://code.google.com/p/minify/

2
追加された

Javascriptのパフォーマンス最適化手法 で書いた次の記事をご覧ください。

モバイルデバイスのページの読み込み時間の場合、最も関連するセクションは依存関係を管理し積極的に減らすです。ここにはいくつかのテクニックがあります:

  • ライブラリの依存関係を最小限に抑えるコードを作成します。
  • あなたのライブラリとモジュールには、ポストロード依存マネージャを使用してください。
  • コードを最小化してモジュールにまとめます。

ホスト(DOM)オブジェクトとのやりとりを減らすと、反復の効率を最大限にするに焦点を当てたい UIの反応性いくつかの重要なものは次のとおりです。

  • あなたのHTMLを超希薄な状態に保ちます(これらの不要なDIVタグとSPANタグをすべて削除します)。
  • ブラウザ内オブジェクトへのポインタ参照を格納します。
  • DOMを変更するための呼び出しを最小限に抑え、特にスタイルを変更する。

他のセクションはすべて、最適化された応答性の高いUIを作成するさまざまな側面に役立ちます。あなたがそれらが有用であることを願っています。

1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript