Lewandのミニプログラムのパフォーマンスを最適化する方法

この記事は約10分です。Lewan Allianceの小規模なプログラム開発者はすべて乾燥品です〜

アプレットの背景

昨年、プレイミニプログラムを立ち上げて以来、「アプリのような絶妙な体験」を目標に掲げましたが、これは間違いなく、人がミニプログラムを開発する上での課題です。

この目標を達成するために、「ページのパフォーマンス」、「フレンドリーな製品体験」、「安定したシステムサービス」が、私の最も基本的な実装原則になっています。

ホームページはミニアプリの顔であり、そのパフォーマンスはユーザーの定着率と密接に関連しています。そのため、2020年の初めに、小さなプログラムのパフォーマンスの柔軟性をロード、レンダリング、その他の次元から掘り下げ、Lewanホームページの全面的なアップグレードと改修を行いました。

また、研究開発の効率を高めるために、新たなニーズを追加しながら、常に最適化、変革を行っており、今日のルワンアライアンスアプレットは、まったく新しいものと言えます。

高性能とは何ですか？

高性能になると、「ページは十分に速く読み込まれます」と誰もが言うでしょう。読み込み速度はハイパフォーマンスの標準になっているようですが、高速に読み込むには十分ではありません。

考えてみてください。ページはすぐに読み込まれますが、カルーセル画像がフリーズし、検索ボックスが無効になり、ページレイアウトが均一ではなく、見た目が美しくなくなります。Latonを引き上げて、ユーザーが失うことができるように十分考えてください。したがって、読み込み速度を考慮するだけでは十分ではありません。

アプレットのバックグラウンドパフォーマンス分析

WeChat Miniプログラムには、パフォーマンス指標もあります。

最初のスクリーン時間は5秒を超えません。
レンダリング時間は500ミリ秒を超えません。
1秒あたりの呼び出し回数は setData 20回を超えません。
setDataJSON.stringify 将来のデータは 256kbを超えません。
ページWXMLノードが1000未満、ノードツリーの深さが30レイヤー未満、子ノードの数が60以下。
すべてのネットワーク要求は1秒以内に結果を返します。

これらのデータは、開発者ツールエクスペリエンススコアリングツール（ `監査`パネル）を使用して、与えられた最適化の提案、ターゲットを絞った調整に従ってスコアを体験できます

第二に、アプレット管理プラットフォーム、アプレットアシスタント、ネットワークパフォーマンスの3つの側面に従ってデータを分析することもできます

これらの補助ツールを通じて、クライアントシステム、モデル、ネットワーク環境、およびアクセスソースの状態に基づいて詳細な分析を行うことができます。

Lewan Allianceのミニプログラムのパフォーマンス分析

1.アプレットの起動が遅すぎる

まず、理由を分析します。

この段階では、小さなプログラム（起動の前後のタイミングを含む）で、WeChatは次のタスクを静かに完了します。

1.動作環境を準備します。

2.アプレットコードパッケージをダウンロードします。

3.アプレットコードパッケージをロードします。

4.ミニプログラムホームページの初期化：

このステップで重要なのは、小さなプログラムパッケージのサイズを制御することです。これにより、ダウンロード時間を効果的に短縮できます（パッケージのサイズを制御すると、小さなプログラムのパフォーマンスを直感的に感じることができます）。

次に、パッケージのサイズを制御するための通常の方法は次のとおりです。

1.不要なファイル、関数、スタイルの削除：

2.コードパッケージ内の静的リソースファイルを減らします。写真やビデオなどの静的リソースをCDNに配置することをお勧めします

3.後方ロジック、ビジネスロジックの合理化：一般に、フロントエンドコンピューティングを含まないプレゼンテーションロジックは、適切に後方に移動できます。バックエンドのクラスメートと話し合い、変換の要件を与え、毎分打たれるように注意する（ジョーク）かどうかはあなた次第です...しかし、これは実際に多くのフロントエンドコードを節約し、多くの場合、オンラインに移行した後に見つかるものを節約できます問題です。また、レビューなしでバックエンドで直接解決し、リリースすることもできます

4.テンプレートプラグインを再利用します。

5.外注の読み込み、ページの一部はh5

2.白いスクリーン時間

この期間の白い画面は、主に次の2つの要素で構成されています。

まず、理由を分析します。

1.ネットワークリソースの読み込み時間：

2.レンダリング時間：

次に、解決策は何ですか？

1.ローカルキャッシュを開始します。ユーザーがページにアクセスすると、最後のインターフェイス要求から返されたデータが最初にキャッシュから取得され、ネットワーク要求が完了すると上書きされます（ただし、一部のタイムリーなデータは機能しないことに注意してください。使用シナリオ）、Lewandはまだこれを使用していません。wx.getBackgroundFetchDataを使用して、WeChatが提供するクライアント側のキャッシュデータソリューションを提供します。公式ドキュメントhttps://developers.weixin.qq.com/miniprogram/dev/api/storage/background-fetch/wx.getBackgroundFetchData.html

2.タイムシェアリングレンダリング：非キー要素のレンダリング時間を遅らせることで、キーレンダリングパスのリソースを解放します。

今日の新しいボードは意図的にレンダリングが延期されているため、リソースはバナー画像を自由にレンダリングできます（Lewanアライアンス小規模プログラムには多くのバナー画像があります）。

3.画像はwebP形式を使用します： Googleが導入した画像ファイル形式で、非可逆/可逆圧縮をサポートしており、リソースを持つ学生が使用できます

4. 画像の切り抜きと劣化： LewanにはAlibaba Cloud OSSが使用されています

5. 画像の遅延読み込み、CSS Spriteの最適化： Leplayのホームページの2番目のレベルのメニューは、Sprite画像を使用することです。遅延画像読み込みプログラムのimgタグには、 lazy-load = "true"があります。

6. 大きな画像リソースのダウングレードと読み込み： Leplayでは、ほとんどすべての大きな画像がこの方法を使用します（ホームページのバナーを参照）（最初に高度に圧縮されたぼやけた画像をレンダリングし、非表示のノードを使用して元の画像を読み込むことができます。元の画像が読み込まれた後、レンダリングのために実際のノードに転送されます <image>。）

<！- banner.wxml- > 
< image src = "{{url}}"  /> 

<！- 图片加载器-> 
< image
   style = "width：0; height：0; display：none" 
  src = "{{preloadUrl}}" 
  bindload = "onImgLoad" 
  binderror = "onErrorLoad" 
/>

メソッド：{ 
    onImgLoad（）{ 
      this .setData（{ 
        url：this .originUrl                        // 元の画像を読み込む
      }）
    } 
  }

上記は、画像をダウングレードおよびロードするための重要なコードです（スタイル付きのタグは、画像リソースのみをロードし、レンダリングはしないことに注意してください）。 display: none <image>

バックグラウンドページタイマーのリサイクル

この手順は、setInterval、setTimeoutを使用するためのページ要件がかなり多いLeplayアプレットで特に重要です。

ピーク時に、ページは同時に10個のタイマーを実行する必要があるため、手動でページ（コンポーネント）をクリーンアップし、そのときにタイマーを復元する必要があります。タイマーのコールバックは重要ではありませんが、無視することはできません。onHideonShowsetData

頻繁なイベントで繰り返されるメモリ操作を回避する

1. onPageScroll イベントコールバックのスロットリング：関数スロットルの参照 Throttle

2.複雑な計算など、CPU集中型の操作を避けます。

3.の呼び出しやデータ量の削減は避けてください： setData setDatadelete 役に立たないデータ

4. SelectorQuery ^[25]の 代わりに IntersectionObserver^[24]を使用してみてください。前者はパフォーマンスへの影響が少ないです。

まとめ

上記の問題の分析と解決により、Lewand Mini Programのパフォーマンスが大幅に向上しました。Jingxiの小さなプログラムチームによる技術的な共有のおかげで、リンクhttps://mp.weixin.qq.com/s/nXModRImp4H7iisMQSc2Wgを参照してください。

アプレットの基本的なアーキテクチャの原則に基づいて、アプレットのパフォーマンスを研究する道のりはまだ長い道のりですが、私は引き続きパフォーマンスの研究と経験の向上の道に懸命に取り組みます。

最後に、この共有が少しの参考値になることを願っています。