若手フロントエンドエンジニアの自己啓発

はしがき

最適化！ さらなる最適化！

カットダイアグラムは、Web アプリケーション全体の間のリンクとして機能し、ユーザーの行動とマシンのパフォーマンスを結び付けます。 最適化の究極の意味は、この 2 つの間の最適なバランスを達成することです。

これは特に画像リソースの読み込みに当てはまります。 今日は、プロジェクト開発における一般的な画像読み込みの最適化方法について簡単に説明します。

プリロード済み

1.マスキング方法

window.onload は実際には DOMContentLoaded イベントによって完了するコールバックであり、DOM ツリーの構築のみを完了することは誰もが知っています。 CSS レンダリングやページ内画像などのリソースのダウンロードは、必ずしも完了するとは限りません。したがって、この時点でページをレンダリングすると、ページは非常に見苦しくなります。

この問題を解決し、デザインと動作の観点からユーザーエクスペリエンスを向上させるために、画像などの重要なリソースが完全にダウンロードされる前に、より美しいマスクをページに追加することができ、読み込みプロンプトがポップアップして通知されます。画像が完全にロードされたら、マスクを削除してアニメーションをロードするまで待ちます。

具体的な実装アイデアは次のとおりです:

window.onload が呼び出された後、最初にマスクがポップアップし、読み込み中であることをユーザーに知らせるために読み込みアニメーションが使用されます

ページにプリロードする必要がある IMG 要素をダウンロードします var img = new Image();

画像がダウンロードされると、onload コールバックが存在します img.onload = function () {…}

このコールバックの読み込みアニメーションとマスクを削除します

これにより、ユーザーはスムーズでシルキーな操作体験を提供できるようになり、完全に表示されていない、ダウンロード中の見苦しい画像がユーザーに表示されることを心配する必要がなくなります。

私たちのスローガンは次のとおりです: 見せません。または、最適なアプリケーション シナリオを示します。「最初の画面に画像のアニメーションがある場合、または接続している UI デザイナーがいる場合に使用してください」非常に強力です」

2. 暗号化された大法

コーディング方法とマスキング方法には若干の違いがあります。具体的な実装アイデアは次のとおりです。

まず、プリロードする必要がある 2 つの写真を準備します。1 つは高解像度、もう 1 つは低解像度です。 たとえば、girl_hd のサイズは 60kb で、もう 1 つの写真は girl で、サイズは 6kb です。

HTMLページにプリロードする必要がある画像タグのsrcアドレスは、低解像度アドレスです

低解像度の画像は非常に小さいため、すぐに読み込むことができます。

window.onloadを呼び出した後、ページ上の高解像度置換が必要なimgのsrc(girl.jpg)を取得し、そのsrcをベースに文字列(+'_hd.jpg')をつなぎ合わせて取得します。高解像度画像 (girl_hd.jpg) のアドレスを指定し、var img = new Image(); を使用してこの高解像度画像をダウンロードします

画像がダウンロードされると、onload コールバックが存在します img.onload = function () {…}

コールバックでページ内の img の src を置き換えるので、ページ上の画像タグは になります

私たちのスローガンは次のとおりです: 無修正の高画質を見たい場合は、まずコード化された低解像度アプリケーション シナリオをご覧ください: 「最初の画面に大量の画像が表示され、サイズが小さくない」場合に使用してください。

遅延読み込み

上記のプリロードのアイデアを注意深く読んだ場合は、私の頭をたたいてください。マスキング方法やコーディング方法に関係なく、これではプロジェクトの読み込み速度は結局のところ向上しません。ダウンロードは必要ありません。 はい、遅延読み込みはユーザーの操作エクスペリエンスを変えるだけで、実際にはプロジェクトの読み込み速度は向上しません。 ただし、ここで説明しているのは遅延読み込みであり、実際にプロジェクトの読み込み速度が向上します。

遅延読み込みとは一言で説明すると、オンデマンドで画像を読み込むことです

Weibo のフォト ウォールは遅延読み込みの最良の例です。最初はあまり写真が表示されていませんが、ユーザーが一番下の位置までプルダウンすると、写真の壁が引き伸ばされて新しい写真が読み込まれます。

運用アイデア:

スクロールバーのスクロールイベントを聞く（もちろんtouchmoveイベントも使えます）

イベントがトリガーされるたびに、現在のフォトウォールの位置を決定します

写真の壁が下部の重要な点までブラシをかけられている場合

Js は新しい画像をダウンロードします、var img = new Image();

ダウンロードが完了すると、onload コールバックが存在します img.onload = function () {…}

ダウンロードが完了したら、ダウンロードした画像をコールバックのページに挿入します

もちろん、プロジェクトに応じてさまざまな遅延読み込み方法があります。ただし、コアは変わりません。つまり、ページが最初に読み込まれるとき、ユーザーのニーズを満たす最小限のリソースのみが読み込まれます。例として、ユーザーの Weibo には 500 枚の写真があるとします。ページの読み込み時にそれらを読み込むと、500 枚の写真があれば、爆発するまでユーザーは動けなくなります (背景は常に写真のダウンロード状態にあるため)。 ページをロードするときに最初に 20 枚の画像だけをロードし、他の画像はユーザー自身の操作 (下にスクロール) を通じてオンデマンドでロードすると、プロジェクトのスムーズさが大幅に向上します。

結論

プリロードと遅延ロードの実装原則は非常にシンプルですが、私に与えられたインスピレーションは実に大きいです:

ユーザーの操作エクスペリエンスを向上させることに加えて、プリロードの根深い核心は実際には次のとおりです。リソースの断片的なロード、つまり、ユーザーのマウスが長期間動かなかった場合、いつでもプリロードが発生する可能性があります。こっそり2枚の写真をダウンロードできますか?ユーザーが多くの計算を行っていないときに、こっそり 2 枚の写真をダウンロードすることはできますか?ユーザーが現在非常に合理化されたログイン インターフェイスを使用している場合、ログインに成功したページの写真をこっそりダウンロードすることはできますか?待って待って

遅延読み込みの根深い核心は：オンデマンド オンデマンドという言葉は私の心に深く刻み込まれています。 今振り返ると、非常に多くの最適化手法がオンデマンドを中心に展開されています。 オンデマンドで Js をロードし、オンデマンドで画像をロードするなど

まず、ユーザーが最短時間でページとコンテンツを閲覧できるように、プロジェクトの初回読み込み速度を確保する必要があります。

次に、現在のページを可能な限り合理化し、無意味な読み込みを避けるようにしてください。 本当に必要な場合にのみユーザーに表示します。

それぞれの長所と短所は次のとおりです:

プリロード:

利点: 事前に写真をダウンロードしておくと、写真が必要になったときにすぐに開くことができます。

欠点: 画像をダウンロードすると、プロジェクトの読み込み完了時間とプロジェクトの操作のスムーズさに影響します

遅延読み込みの原因:

利点: ユーザーがロードするプロジェクトが最も効率的かつ高速であり、ダウンロードされるリソースが最小限であることを保証します

デメリット: ユーザーの操作によって遅延読み込みが引き起こされると、リソースのダウンロードが完了するまでに時間がかかり、同時にリソースのダウンロード期間中は操作の流暢性が低下します。

結局のところ、プロジェクトの最適化に特効薬はありません。ある部分の効率が別の部分の非効率につながる可能性があります。最適化メソッドをプロジェクト A からプロジェクト B にコピーすることは無意味である可能性があります。したがって、私たちにできることは、これらの技術の原理を深く理解し、プロジェクトで経験を積むことであり、それぞれの技術の長所と短所を深く理解し、ユーザーのニーズと行動習慣を深く理解することによってのみ、Carry を実現することができます。特定のプロジェクトや特定のシナリオに最適な処理を導き出します。