ミニプログラムの応答速度が遅い問題の解決方法

目的:

ミニ プログラムの応答速度の遅さとユーザー エクスペリエンスの悪さの問題を解決します。

(学習ビデオ共有: プログラミングビデオ)

最適化方法は次のとおりです:

1. ページの読み込み速度の向上

In small このプログラム環境で、ページの読み込み速度を向上させるにはどうすればよいでしょうか?大きな質問ですので、もう少し具体的にお話しますと、ユーザーがリンクをクリックしてから新しいページを開くまでの時間を短縮するにはどうすればよいでしょうか?重要な点は次のとおりです:

ユーザーのクリック動作に応答してページがジャンプし始めてから、新しいページの onload イベントがトリガーされるまでに遅延があります。この遅延は約 100 ～ 300 ミリ秒です (Android の応答) iosよりも遅い）一部）。

この遅延は短くありません。この時間を利用して、新しいページに必要なネットワーク リクエストを事前に開始できます。このようにして、100 ～ 300 ミリ秒 (またはネットワーク要求の時間) が節約されます。

このギャップがあることを知った後、コードを実装するにはどうすればよいでしょうか?

端的に言えば、BページのデータをAページにプリロードする機能を実装することです。ただし、この種のページ間の呼び出しでは、ロジックが簡単に複雑になり、異なるページのロジックが結合される可能性があります。したがって、ページ間の結合や開発の複雑さを増すことなく、プリロード ロジックを目に見えないように隠したいと考えています。

以下では、Tencent Video アプレットを例として技術的な実装を説明します。

ミニ プログラムのホームページ:

ユーザーがポスター画像をクリックすると、次のコード (1 行のみ) が実行されます。

##プログラムは再生ページを読み込みます:

再生ページのメイン コード:

わかりました。ご覧のとおり、外部ページの呼び出しと実際のロジックの実装はどちらも非常に単純です。 2 ページ目では、Page ライフサイクル関数を拡張し、onNavigate メソッドを追加しました。このメソッドは、ページが作成されようとしているがまだ開始されていないときに実行されます。

古いドライバーはここで何か奇妙なことに気づくかもしれません。ホーム ページをクリックしても、再生ページはまったく作成されず、オブジェクトも存在しません。内部のメソッドにアクセスするにはどうすればよいでしょうか?

ここでは WeChat のページの仕組みについて説明します。

ミニ プログラムが開始されると、Page() メソッドを呼び出すすべてのオブジェクトがキューに格納されます (以下に示すように)。ページにアクセスするたびに、WeChat は新しいオブジェクト インスタンス (実際にはディープ コピー) を再作成します。

つまり、ページ A がクリック応答イベントを実行しているとき、ページ B のインスタンスはまだ作成されていません。このときに呼び出される onNavigate メソッドは、実際には Page オブジェクトのプロトタイプです (ページ A がクリック応答イベントを実行するときに作成されます)。アプレットが起動されます) それ)

そして、すぐに作成される B ページは別のオブジェクトです。したがって、onNavigate メソッドと onLoad メソッドでは、this ポインターは同じオブジェクトを参照せず、一時データを現在のオブジェクトに格納できません。したがって、グローバル キャッシュ メソッドのペアである $put() と $take() をカプセル化します。

汎用性を高めるために、$route、$put、$take など、Page で使用されるパブリック メソッドはすべて Page の基本クラスで定義されています。また、基本クラスはすべてのページのリストを同時に保存するため、ページ名に基づいて特定のページの onNavigate メソッドを呼び出すことができます。もちろん、すべてのページに onNavigate メソッドを実装する必要があるわけではありません。onNavigate メソッドを定義していないページの場合、$route 関数はプリロード手順をスキップして、そのページに直接ジャンプします。したがって、開発者にとって、他のページが何を実装しているかを気にする必要はなく、外部の世界に対して完全に透過的です。

2. ユーザーの行動予測

上記の例では、ユーザーが能動的にページをクリックし、次のページのデータを事前に読み込む方法を実装しました。一部のシナリオでは、ユーザーの行動を予測でき、ユーザーがクリックする前に次のページのデータをプリロードできます。次のページがすぐに開くようになり、操作性がさらに向上します。

引き続き Tencent Video ミニ プログラムを例に挙げます。メイン インターフェイスは 3 ページのカードに分かれています (ほとんどのミニ プログラムはこのように設計されています)。簡単なデータ分析を通じて、50% のホームページに入ったユーザーは 3 ページ目、つまり 2 ページのカードにアクセスします。したがって、2 ページ目のカードのデータをプリロードすると、ユーザーが次にクリックするページを開く速度が大幅に向上します。

同様に、最初にコードの実装を見てみましょう。ホームページにチャンネル ページをプリロードする方法:

チャンネル ページを実装する方法:

最初の例と同様に、$preLoad() メソッドがここで定義され、onPreload イベントがページに拡張されます。ページが $preLoad() を呼び出した後、基本クラスはページに対応する onPreload 関数を自動的に見つけ、プリロード操作を実行するようにページに通知します。最初の例とは異なり、ここでプリロードされたデータはストレージに保存されます。これは、ユーザーがページにすぐにアクセスできない可能性があり、データをグローバル変数に保存すると、ミニ プログラムが占有するメモリが増加するためです。 WeChat は、メモリを大量に消費する小さなプログラムを躊躇なく強制終了します。

おそらく、アプリ開発経験のあるほとんどの学生にとって、より一般的なアプローチは、最初に最後にキャッシュされたデータをページに表示させ、次にリアルタイムで新しいデータを取得してから、ページを更新することです。ミニ プログラムのパフォーマンスとページ レンダリング速度はネイティブ アプリほど良くないため、この方法はミニ プログラムでは適切なエクスペリエンスではない可能性があります。大きなデータを UI 層に送信するのは重い操作です。したがって、この方法はお勧めできません。

3. デフォルト データのサイズを減らす

先ほど述べたように、WeChat は新しいページを開いたときにページ オブジェクトをディープ コピーするため、サイズを減らすように努める必要があります。デフォルト データを削除し、オブジェクトの数を減らします。その中のカスタム プロパティ。写真あり、真実あり:

# 100 個の属性を持つデータ オブジェクトをテスト ケースとして使用すると、iPhone 6 ではページの作成時間が 150 ミリ秒増加します。

4. コンポーネント化ソリューション

WeChat はミニ プログラムのコンポーネント化ソリューションを提供していません (実装する必要があると思います)。しかし、コンポーネント化について話さないと、いくらコードを書いても無駄になってしまいます。ここでは単純なコンポーネントの実装を示します。

Tencent のビデオ再生ページを例にとると、ページの定義は次のとおりです:

このうち、P() 関数はカスタム ベースです。クラス。これは非常に便利で、pv 統計、ソース統計、拡張ライフサイクル関数、コンポーネント化などを含むすべての一般的なロジックを基本クラスに記述することができます。

関数の最初のパラメータはページ名で、ページのキーとして使用されます。 2 番目はページ オブジェクトで、ロードされるすべてのコンポーネントを含む comps 配列を拡張します。

プレーヤーのコンポーネント/comps/player/index.js を例に挙げます:

コンポーネントの定義は通常のページとまったく同じです。 onLoad や onShow などのイベントには、ページ応答用のコールバック メソッドもあります。 wxml テンプレートで定義されたイベントは、js イベントに 1 対 1 で対応します。

基本クラスが行うことは、これらのコンポーネント オブジェクトのプロパティとメソッドを Page オブジェクトにコピーすることです (浅いコピー)。データ属性は結合されます。 WeChat の事前定義されたライフサイクル関数 (独自の拡張機能を含む) はキューにカプセル化され、順番に実行されます。たとえば、システムが onLoad メソッドを呼び出すと、実際にはすべてのコンポーネントの onLoad メソッドが実行され、最後にページの onLoad が実行されます。

上記はコード部分ですが、wxmlテンプレートとwxss部分については手動でインポートする必要があります。

wxml：

##wxss：

5. その他

ただし、アプレットは十分小さいですが、起動速度は依然として 2 ～ 3 秒であり、数秒で開くことはできません。作者はミニ プログラムの起動時間を最適化しようとしましたが、価値のある最適化ポイントはあまり見つかりませんでした。単一ページの初期化には 1 ～ 2 ミリ秒しかかかりません。おそらく、ほとんどの時間は WeChat とサーバー間の通信プロセスに費やされます。

幸いなことに、Tencent は独立したサーバー パフォーマンス テストのための環境を提供しています。ユーザーはドメイン名といくつかの簡単なパラメーターを入力するだけでサーバーのパフォーマンスを知ることができます。現在、Tencent WeTest プラットフォームで無料で利用できます。

関連する推奨事項:

ミニ プログラム開発チュートリアル

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