テンセントのお役立ち情報！ 4 つの側面からモバイル ページのパフォーマンスを最適化する_html/css_WEB-ITnose

モバイル インターネットの発展に伴い、モバイル ページのパフォーマンスの最適化にますます注意を払う必要があります。今日はこの点についてお話します。

まず第一に、なぜモバイル ページを最適化する必要があるのでしょうか?

モバイルネットワークの現状を見る:

モバイルページのレイアウトはますます複雑になり、その効果はますます目まぐるしくなり、それが直接的に影響を及ぼします。統計によると、

71% のユーザーがモバイル ページを期待しています。応答時間は 5 秒であるため、モバイル ページでも十分な速度を確保する必要があります。

モバイル ページの速度は、モバイル ネットワーク帯域幅の速度、デバイスのパフォーマンス (CPU、GPU、ブラウザ)、ページ自体の 3 つの要素に関係します。

現在の主流のモバイル ネットワーク標準は 3G です。

今年は 4G ネットワーク標準の急速な発展も見られ、モバイルの読み込み速度が再び向上しました。 ;

モバイルデバイス自体は、これまでiPhone6/Samsung Note4などを筆頭に、これまで以上に画面が大型化し、CPU、GPU、メモリも大容量化してきました。信頼性のある。

同時に、ブラウザのメーカーもページ速度を向上させるために絶え間ない努力を払ってきました。

ネットワーク標準サプライヤー、携帯電話メーカー、ブラウザメーカーは非常に強力ですが、私たちはどうでしょうか?何ができるでしょうか。

私たちにできることはモバイル ページ自体を最適化することであり、これは私たちのプロフェッショナルな価値を反映するものでもあるため、モバイル ページのパフォーマンスを最適化する必要があります。

モバイル ページを最適化するにはどうすればよいですか?

これについて説明する前に、一般的に使用される PC 最適化方法について触れておく必要があります。

1. コードの最適化 (css、html、js の最適化)
2. HTTP リクエストの削減 (スプライト画像、ファイルのマージ…)
3. DOM ノードの削減
4. ノンブロッキング (インライン CSS、配置後の JS…)
5. キャッシュ

...

これらの方法のほとんどはモバイル端末に適用できます。これらは今日ここで説明します。興味がある場合は、PDI コース「Web サイトのパフォーマンスの最適化」を参照してください。

今日は主にモバイル端末に適した最適化手法について説明します。それでは本題に入ります。

まず、最初からレンダリングの完了までにページがどの段階を経る必要があるかに注意する必要があります。

各ステージの主な作業は上の図に示すとおりで、最適化の目標は次のとおりです。

上記のステージの最適化方法について詳しく説明します。

まず、ロード時の最適化方法を見てみましょう。

1. プリロード

2 つのプリロード方法があります。

A.表示 性的な読み込み

この種の読み込みは、ユーザーに明確に認識されます。この読み込み方法をインタラクティブなページに追加することをお勧めします。一方、Fun はページの視認性を高めることができ、その後のページ エクスペリエンスをよりスムーズにすることができます。

B. 暗黙的な読み込み

このメソッドは、最初の画像を読み込むときに 2 番目の画像を事前に読み込み、ページのエクスペリエンスをよりスムーズにします。これを暗黙的な読み込みと呼びます。この方法は、トラフィックを節約するだけでなく、エクスペリエンスも向上します。

2. オンデマンド読み込み

オンデマンド読み込みは、主に次の 2 つの方法があります。最初の画面がロードされるときに、最初の画面のコンテンツが可能な限りロードされ、最初の画面の外側にある要素は最初の画面に表示されるときにのみロードされるため、トラフィックが大幅に節約され、最初の読み込みが向上します。時間。

これは応答読み込みと呼ばれます。これは、JS または CSS を使用して解像度を決定し、導入するさまざまなサイズの画像を選択することを意味します。これによる利点は明らかであり、速度も向上します。ロードしてトラフィックを節約します。

3. 画像を圧縮します

圧縮画像の場合、最初に言及するのは jpg ファイルです。

モバイル JPG ファイルの場合、次の結論になります。 :

サイズが大きく非可逆圧縮率が大きい jpg を使用します

可逆圧縮には jpegtran を使用します

2. png についてはそこにあります

カラフルな画像には png24 を使用します

低色の画像には png8 を使用します

pngquant を使用することをお勧めします
リダイレクトを避けるようにしてください
3. リダイレクトを避ける必要があるのはなぜですか?図に示すように、

これは同じネットワーク速度でのテスト結果です。リダイレクトが遅くなる理由は、ドメイン名の検索、TCP リンク、リクエストの送信を繰り返すためです。 。

5. 他の方法を使用して画像を置き換えます

2 つの方法があります。1 つ目は、CSS 3 に依存して画像を描画する方法です。

2 番目: 画像の代わりに iconfont を使用します

ただし、iconfont が必ずしも画像より優れているわけではありません。ここで実験を行います。

大きな画像の場合は、iconfont を使用します。スプライト画像が良いというわけではありませんが、片側の小さいサイズのアイコンにのみ iconfont を使用することをお勧めします。

次に、スクリプト実行時の最適化方法について 2 点だけ説明します。

1. DataURI を避けるようにしてください

DataURI は、モバイル側では PC 側ほど人気が​​ありません。その理由は次のとおりです。

テスト後、DataURI は単純な外部リンクよりもリソースが 6 倍遅くなります。さらに、生成されたコード ファイルのサイズは画像ファイルに比べて増加します。さらに、base64 デコード処理中にブラウザがメモリと CPU を消費する必要があります。特にモバイル端末では顕著です。

2. クリックイベントの最適化

モバイル端末では、タッチスタート、タッチエンド、タッチなどのイベントを適切に使用して、比較的遅延の大きいクリックイベントを置き換えてください。クリックが遅い原因はマウスダウンです:

次に、レンダリング段階での最適化方法について 2 点だけ説明します:

1. アニメーションの最適化

a) css3 アニメーションを使ってみる

利点:

1. js メインスレッドを占有しない
2. ハードウェアアクセラレーションを利用できる
3. ブラウザはアニメーションを最適化できます

欠点:

中間状態の監視をサポートしません

b) キャンバス アニメーションを適切に使用します

利点:

レンダリング ツリーの計算を回避し、レンダリングを高速化できます

欠点:

開発コストが高く、メンテナンスが面倒です。

CSS 3 アニメーションと Canvas アニメーションを比較すると、次のようになります。

結論は次のとおりです。5 要素以内では CSS3 アニメーションを使用し、5 要素を超える場合は Canvas アニメーションを使用します。

c) RAF (requestAnimationFrame) の適切な使用

利点:

1. スクリプトの問題によって引き起こされるフレーム損失と遅延の問題を解決できる
2. サポート中間状態モニタリング

欠点:

互換性の問題

RAF アニメーションと settimeout アニメーションの比較:

結論: Android 4.3 ブラウザとの互換性が必要ない場合は、RAF を使用してスクリプトアニメーションを作成してください

2. 高頻度イベントの最適化

touchmove と同様に、スクロールなどのイベントは次の方法で最適化できます:

1. requestAnimationFrame を使用して、レンダリングが適切に実行されるようにします。 time

2. 変更に応答する時間間隔を増やし、再描画の数を減らします。

最後に、合成/描画の最適化方法は 1 つだけです:

GPU アクセラレーション

GPU アクセラレーションをトリガーする方法は次のとおりです:

1. CSS3 トランジション
2. CSS3 3D 変換
3. WebGL 3D 描画
4. ビデオ

…

GPU アクセラレーションを使用する前の比較実験:

GPU アクセラレーションは実際に合成/描画時間を大幅に短縮し、ページ速度を大幅に向上させますが、GPU アクセラレーションには独自の欠点があります。

GPU レイヤーが多すぎるとパフォーマンスのオーバーヘッドが発生します主な理由は、GPU アクセラレーションを使用すると、レンダリング リソースが再利用されるため、実際に GPU レイヤーのキャッシュが使用されるため、レイヤーが増えてキャッシュが増加すると、他のパフォーマンスの問題が発生することになります。

概要

この記事では、ページ表示の 4 つの段階における典型的な最適化方法を提案します。最後に読者に思い出していただきたいのですが、実際、最適化とは両刃の剣。

オンデマンド読み込みは速度を向上させますが、大量の再描画が発生する可能性があります。

タッチは高速に反応しますが、多くのシナリオには適していません。

GPU アクセラレーションは効率的です。ただし、メモリのオーバーヘッドが大きいです。お待​​ちください

読み込みにより全体的なエクスペリエンスはスムーズになりますが、ユーザーの離脱を引き起こしやすくなります

画像圧縮により帯域幅のコストは削減されますが、視覚効果が低下する可能性があります

これと同様に、まだ多くの矛盾があります。ビジネスに応じて、実情に応じて最適化してください。

【テンセント最新HTML5クラシックケース集】

友達の間で人気のウー・イーファンが入隊！

『経験者は言う！人気の「Wu Yifan Enlists」HTML5 の背後にあるデザイン ストーリーとは何ですか? 》

一番人気のガンゲーム！

「『National Assault』の HTML5 デザインの完全レビューと体験まとめ」

Tencent テクノロジーのヒント!

「恐ろしい HTML5 ページの作り方」

元アドレス: tgideas.qq

[Ushe.com 元記事投稿メールアドレス: 2650232288@ qq.com】