ミニプログラムの読み込み速度の問題と解決策

# 小さなプログラムの読み込み速度については、これは大きな問題です。古くからパフォーマンスが重視されてきたので、私が遭遇した問題とその解決策について簡単に説明します

#まず、ネットワーク リクエスト ネットワークから始めましょう:

これは基本的にフロントエンドに関するものではありませんが、これは、小さなプログラムを最適化する際の主要な要素でもあります。重要な点は、バックエンドがデータのリクエストに応答する速度がページ全体の速度に影響を与えるということです。したがって、まず第一に

リクエストが 300 ミリ秒を超えると遅いとみなされ、全体の速度に影響します。

提案: バックエンドを呼び出してインターフェイスを最適化し、応答を高速化します。

また、不要なリクエストを減らし、データを 1 つのインターフェイスにマージするようにしてください。これにより、操作が容易になり、リソースが節約されます (バックエンドから叱られない限り)

2 番目: 写真

写真については、ユーザーがアップロードした写真のサイズを確認します。500K を超える写真は拒否してください。アップロード サーバーで圧縮してみてください。テキストが次の場合は、多数の画像が含まれている場合は、base64 を使用して変換し、リソースを削減してください。

画像が多数ある場合は、遅延読み込みテクノロジを使用するのが最善です。 。 。いくつかの大きな画像リソースをオンライン リソースに変更します。具体的な方法は、まず素材をCDNにアップロードし、その後ミニプログラムでオンライン画像アドレスを直接使用します。

サイズを圧縮する方法がわからない場合は、https://blog.csdn.net/Young_Gao/article/details/88183442 既製のものを参照してください

3 番目: 小さなプログラム パッケージのサイズを制御するリソース パッケージのサイズを削減する

サードパーティの依存関係を合理化するサードパーティ パッケージを使用するサードパーティのパッケージには、より大きな参照モジュールが含まれる場合があるため、できる限り保存し、不要なコードを減らすようにしてください...コメントアウトされたコードも含めて、パッケージ化されているように見えるため、削除するのが最善です。

4 番目: サードパーティ インターフェイスの呼び出しの問題について

サードパーティ インターフェイスの呼び出し速度は非常に遅くなります。たとえば、 , Tencent の測位取得を呼び出すと応答に 1 秒かかる場合があります。社内の場合は独自のインターフェイスとアルゴリズムがある場合は、独自に呼び出した方がよいです。Tencent の API であっても、応答速度が 300ms を超える場合があります。それを使用してみてください。

#5 番目: setData

5.1. 頻繁に setData

##私たちが分析したいくつかのケースでは、一部の小さなプログラムは

setData を非常に頻繁に (ミリ秒レベルで) 実行し、次の 2 つの結果をもたらします:

• ユーザーAndroidではスライド時に引っかかりを感じたり、操作のフィードバックが大幅に遅れたりする JSスレッドがコンパイルしてレンダリングを実行しているため、ユーザーの操作イベントをロジック層に間に合わせることができず、ロジック層が操作の処理結果を渡すことができません
• WebView の JS スレッドが常にビジー状態になり、ロジック層からページ層への通信時間が増加するため、レンダリングに遅延が発生します。レイヤーがデータ メッセージを受信し、送信時から数百ミリ秒が経過し、レンダリング結果はリアルタイムではありません;

5.2. setData が渡されるたびに大量の新しいデータ

は、

setData の基礎となる層によって駆動されます。実装から、データ送信が実際には evaluateJavascript であることがわかります。 スクリプト プロセス。データ量が大きすぎると、スクリプトのコンパイルと実行時間が増加し、WebView JS スレッドを占有します。

#5.3. setData を実行します。バックグラウンド状態ページページがバックグラウンド状態 (ユーザーには表示されない) になったとき、バックグラウンド状態ページをレンダリングするために

setData

を実行し続ける必要はありません。さらに、バックグラウンド ページの setData に移動すると、フォアグラウンド ページの実行がプリエンプトされます。

6 番目: 変数各ページにはライフ サイクルの破棄フェーズがあり、このフェーズではデータ内に存在するすべての変数が削除されます。リリースです (このページに戻らない場合にこれを行うことができます)。2 回目の入力は前回よりも少し速くなりますが、明らかではありません。変数が特に大きい場合は、特に大きくなります。現時点では明らかです I すべては 20 または 30 の変数を使用して行われます。 。 。これは無視してかまいません。

#7 番目: キャッシュ#すべてのページには多かれ少なかれ再利用されたものが含まれていると思います。再利用された変数がある場合は、次の変数が使用されます。直接ローカルに保存され、ミニ プログラムが閉じられた後にローカル ストレージから削除されます。

ホームページが多くのものを読み込む場合、ページ全体をキャッシュすることができ、ページが再度入力されると、レンダリング キャッシュはインターフェイス データが要求されるのを待機し、その後サイレント レンダリングが実行されます。

推奨チュートリアル: 「WeChat ミニ プログラム 」

以上がミニプログラムの読み込み速度の問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。