1、軽量なJavaScriptライブラリ：
PC側のWebページの場合はもちろん、フロントエンドのjQuery JavaScriptライブラリとして最初の選択肢になりますが、モバイル端末のために、jQueryのは、あまりにも、そして今、モバイル端末のために、多くの優れた利用可能なフレームワーク、jQueryのモバイル、YUI、XUIがあるので、あります良いフレームワークが、個人的にzeptoを好みます。ただし、一部のイベントは、iOS上で、このようなタッチスクリーンのスライドスワイプなどの定義済みイベント、完璧なサポートをzeptoが、アンドロイド上で、一部のブラウザでは、一部のサードパーティ製プラグインのJavaScriptのライブラリ、善を追求する必要があり、この時間をサポートしていません。今そこに多くのオンラインjavascriptの優れたサードパーティ製のプラグインライブラリ利用可能であるので、あなたはそれを得るために必要。
2は、HTTPリクエストの数を減らすために：
完全なHTTP要求を処理するために再使用される場合、問題なく、動作するHTTP要求を使用して、そのようなページめくり動作又はフィルタのようなページは、その後、ネットワーク上で伝送されるデータの量を増加させる初期負荷、モバイルため終了後、あなたがより多くを支払わなければならない、特別な制限は、ユーザーのネットワークトラフィックが制限されているがあります。これらのページの内部の動作時間のこの部分は、特定のユーザーデータを減らすことができ、データを保存するために、サーバー側のキャッシュ、フロントキャッシュ機構を使用することができ、短期的には変更されませんいくつかのデータのためのAjaxの非同期要求を使用して達成することができます要求された量。
3、圧縮JavascriptとCSS：
ページで使用するJavaScriptコードとCSSのコードでは、圧縮後のページサイズを減少させるのに有効になります。
オンラインJavascriptのコード圧縮ツール圧縮ツールとオンラインCSSコードがたくさん持っている、と私は開発の次の二つを使用します。
Javascriptを圧縮：http://www.jscompress.com/
CSS圧縮します。http：//www.csscompressor.com/
4、リソースページを管理するために、CDNを使用しました：
CDNは、コンテンツ配信ネットワーク、すなわち、コンテンツ配信ネットワークの略です。基本的な考え方は、ボトルネックやリンクは、インターネットのデータ伝送速度と安定性に影響を与える可能性を避けるために可能な限りコンテンツ配信より速く、より安定しています。
私たちは、ページ上で使用できるJavaScriptファイル、CDN上のCSSファイル、固定ICONアイコンや写真のチェーン外では、ユーザーがWebページを訪問したときに、これらのリソースを取得するために行くことができるように改善し、ネットワークの混雑状況を解決することができますユーザーがページの適切な速度にアクセスします。
5、「怠惰な」負荷を達成するために、イメージのリスト：
携帯端末機器の画面サイズが限られているので、フルスクリーンの画像をロードする必要はありません、ページのロード時、一回に来る、我々は、ユーザーがページをスライドするとき、唯一の視覚的な画面の画像をロードするために選択し、フォローアップをロードすることができます画像の残りの部分。
このプログラムは、実際に今、誰もが映像遅延ローディング技術と述べているが、開発の過程で私たちの同僚は「怠惰」負荷の画像をダビングし、実際には、最終的な分析では、オンデマンドでロードされています。たとえば、あなたが淘宝網の検索製品を使用し、お使いのモバイルデバイスは、だけなので、そのページのロード時5枚の絵の唯一の初期ロード、ページがそうで5枚の絵を再ロードされ、ユーザーのスライド、実際に5枚の画像を画面に表示することができますスライドショーユーザーがどこに行きます。
現在、そこにいくつかの優れたオンライン遅延ロードプラグインがありますが、私はこのプラグインを開発し、開発プロセスにおける特定のサードパーティ製プラグインを使用していないが、「怠惰」負荷のように絵を達成するために、独自のプラグインを開発するために、その後の一人で私を紹介します。
図6に示すように、最適化された画像は示しています。
まず、我々はそれの表示画像を最適化したい場合、レスポンシブウェブデザインはなぜで始まりますか？たとえば、今、あなたは、低解像度の低解像度の画像に表示された場合は、絵を持って問題ありませんが、高解像度の画像の上にマシンをぼやけされ、ユーザの視覚体験に影響を与えます。それは、ネットワークトラフィックのユーザの無駄になりますので、しかし、あなたが考慮に入れ、すべてのマシン上のビジュアル体験を取ることができますもののので、高解像度の画像を選択して起動しますが、ローエンドマシンの場合は、非常に不公平です。
どのように我々はそれに対処すべきか？解決策は、良好な視覚体験の異なる端末に両方のユーザーが、彼らは、ユーザーのネットワーク・データ・トラフィックを無駄にしないように、異なる解像度で異なる画像をロードするために、ユーザ機器の解像度に基づいています。
①解決するための表示画面サイズは、2つの方法でここに提示画像を最適化します。
その後、Javascriptを通ってくる。まず、アドレスの低解像度画像での使用に適したページのsrc属性<イメージ>タグは、他の一方で、データ - HTML5のカスタムを使用して、高解像度画像のアドレスは非表示にする属性ブラウザウィンドウのサイズは、画像をロードされ、写真に必要なデータ - カスタム属性にJavascriptのsrc属性<イメージ>タグで置き換える決定を取得します。
第二：CSSスタイルを使用してロードされた画像は、アドレスを定義し、メディアクエリーメディアクエリー機構により画像をロードするかを決定します。
②網膜画面の絵のために最適化された特別な操作を行い、同じ2つの方法について説明します。
その後、Javascriptのでロードされたサイズ比の網膜を判断するかどうかを決定する。まず、一般的な画像のアドレスに使用されるsrc属性のページで、<イメージ>タグ、及びデータHTML5のカスタムを使用して網膜の画面を使用して画像のアドレスを非表示にする属性絵は、網膜像に必要なデータ - カスタムプロパティにsrc属性<イメージ>タグを置き換えるためにJavascriptを使用してロードされました。
第二次のようにロードされた画像を定義するCSSスタイルを使用すること、及び、コード網膜スクリーンメディアクエリメカニズムを決定するためにメディアクエリーメディアクエリー機構によって負荷網膜画像を決定するアドレスです。
@mediaのみ画面と（-webkit-デバイスピクセル比：2）{
// Retinaディスプレイの画像を設定します
}
アダプティブ③写真
アダプティブレイアウトが達成することは困難ではない、あなたはそれがどのように描くのですか？あなたのWebページは（ない別のデバイス上の広い帯域幅に影響を与えたことはありません場合には、画面の適応の大きさに応じて、彼に示すことができるか、この効果に対処するための方法があり、私の絵ですパフォーマンスを考慮して）、あなたは最大の画面のための画像を作成すると、スタイルによって異なる表示デバイスのサイズを制御できるようにしてもよい。別の方法では、各ブレークポイントの別の画像を準備することができるということです。
適応画像サイズ
画像適応を制御するためのスタイルを使用します。
IMG {最大幅：100％;}
ブレークポイントの写真
それぞれ異なる画像のブレークポイントを提供し、これは、内側のクエリが絵「SRC」属性の値を変更していないため、頭痛であり、それを解決する方法はありませんこと？私たちは、次の解決策を参照することができます：
- 背景画像を使用してください：背景画像素子を使用し、
- 表示/非表示親要素：別の画像を使用して、親要素、そして内側側で制御は、これらの写真が表示または非表示に照会します。
ブレークポイント画像適応を解決するために例を見てください：
<IMG SRC = "image.jpg" データ-SRC-600PX = "画像600px.jpg" データSRC-800ピクセル= "画像800px.jpg" ALT = "">
@media（MIN-デバイス幅：600PX） { IMG [データ-SRC-600PX] { 含量：ATTR（データ-SRC-600PX、URL） 。 } } @media（MIN-デバイス幅：800ピクセル） { IMG [データ-SRC-800ピクセル] { 含量：ATTR（データ-SRC-800ピクセル、URL） 。 } }
7、SEOフレンドリーなラベルの使用：
当社のウェブサイトより優れた検索エンジンが含ませることができるようにするために、我々はのページのSEOにやさしいラベルには、そのような<H1>、<強い>、...、などなどSEOフレンドリータグのための可能な限り低い私達のページを使用する必要があります変換は、私は、特に後半の導入を発行します。
ます。http：//my.oschina.net/iamjiuye/blog/127995からの振替
ます。https：//www.cnblogs.com/JoannaQ/archive/2013/05/07/3064227.htmlで再現