このトピックでは、Taobao Mobileおよびminiプログラムのフロントエンド最適化でEdgeRoutine (ER) を使用する方法について説明します。
背景情報
ERは、Alibaba Cloud CDNポイントオブプレゼンス (POP) で実行されるコンピューティングサービスです。 JavaScriptコードをERにアップロードしてデプロイした後、世界中のPOPでコードを実行できます。 このようにして、世界中に多数のマイクロサーバーがあり、近くにいるユーザーにサービスを提供できます。
従来のCDNサービスは、キャッシュされた静的ファイルのみを近くのクライアントに配信します。 Alibaba Cloud CDNを使用すると、POPにバックエンドコンピューティングサービスをデプロイできます。 このようにして、コンピューティングサービスはクライアントに近くなり、レイテンシが低くなります。 CDNは、大きな弾性ネットワークである。 サーバーを購入したり、コンピューティングリソースをスケールする必要はありません。 Alibaba Cloud CDNは、ワークロードの急増に対処するための自動スケーリングをサポートしています。
メリット
ERは次の利点を提供します:
Eコマースウェブサイトやミニプログラムは通常、CDNを使用してコンテンツ配信を加速します。 ERを使用すると、ビジネスに影響を与えることなく、Alibaba Cloud CDNを通過するデータに論理操作を低コストで追加できます。 これにより、back-to-originリクエストの数が減り、リクエストによる潜在的なレイテンシーのリスクがなくなります。
ERはAlibaba Cloud CDN POPで実行され、Alibaba Cloud CDNのすべての機能を使用できます。 例えば、要求は、処理のためにクライアントに最も近い最適なPOPにリダイレクトすることができる。 さらに、リクエストスパイクがリージョンで発生した場合、リクエストは、離れているが使用可能なコンピューティングリソースを持つPOPに自動的にリダイレクトされます。
この自動ルーティングメカニズムにより、冗長なリソースを予約することなく、トラフィックの急増に対応できます。 リソースの分散とスケーリングは、Alibaba Cloud CDNのインテリジェントルーティングシステムによって処理されます。
淘宝網モバイルのフロントエンド最適化におけるERの応用
フロントエンドレンダリングの特徴
Taobao Mobileには何億ものeコマースウェブページが含まれており、多数のリクエストを受け取ります。 eコマースWebページ上のほとんどのコンテンツは静的で、頻繁に変更されません。 この場合、CDNを使用して、eコマースウェブページの配信を高速化する必要があります。 CDNのキャッシュおよび配布機能により、オリジンサーバーの負荷を軽減できます。
ウェブページには、画像やテキストを含む多数の要素が含まれており、これらは携帯電話にレンダリングされて表示されます。
フロントエンドレンダリングの解析
フロントエンドレンダリングの効率は、顧客保持および取引と正の相関がある。 ほとんどの場合、次の一般的なレンダリング手法が使用されます。In most cases, the following common rendering techniques are used
クライアント側レンダリング (CSR): クライアントは、動的リソースおよび静的リソースを取得する非同期要求を開始し、リソースをHTMLファイルにレンダリングします。
CSRは、要求スパイク中に高いクライアント負荷および高い待ち時間を引き起こす。
サーバー側レンダリング (SSR): クライアントがリクエストを開始すると、サーバーは動的リソースと静的リソースを取得してレンダリングし、レンダリングされたHTMLファイルをクライアントに返します。 クライアントは、HTMLファイルをロードする。
SSRを使用するには、レンダリング専用のサーバークラスターをデプロイする必要があります。 この結果、コストが高くなる。 サーバは、クライアントからの多数のレンダリング要求に応答する必要がある。 さらに、クライアントはレンダリングされたページが返されるまで待機する必要があり、これはユーザーエクスペリエンスに影響します。 Eコマースアプリは、ページ読み込みの遅延に敏感です。 読み込み速度が速いと、顧客はより多くの製品を閲覧でき、購入する可能性が高くなります。 反対に、遅いローディング速度は、顧客のチャーンを引き起こす可能性がある。
Alibaba Cloud CDNを使用すると、POPでコンピューティングを実行できます。 この方法では、エッジサイドレンダリング (ESR) を使用して、ユーザーの近くのPOPにフロントエンドページをレンダリングできます。 ESRは、クライアントまたはサーバーのコンピューティングリソースを消費しません。
Taobao Mobileのフロントエンドレンダリングの実践
画像とテキストを含むWebページをレンダリングできます。 ページレンダリングのコードがERにデプロイされます。 クライアント要求がERに送信された後、ERはドキュメントオブジェクトモデル (DOM) を生成し、レンダリングのためにソースデータを取得します。 ほとんどのソースデータは、画像などの静的ファイルです。 静的ファイルはPOPにキャッシュされ、リクエストを開始する必要なしに直接読み取ることができます。 ページ上のフォロワー数や商品価格など、少量のデータのみをオリジンサーバーからリアルタイムで取得する必要があります。
ページがレンダリングされた後、HTMLファイルがクライアントに返されます。 クライアントはHTMLファイルをロードするだけでよい。 加えて、レンダリングされたHTMLファイルはまた、POP上にキャッシュされ、特定の期間内の後続の要求において使用され得る。 これにより、不要な繰り返しレンダリングが削減され、顧客の待ち時間が短縮されます。
申請結果
2020で開催されたDouble 11 Shopping Festivalの期間中、Taobao Mobileは初めてAlibaba Cloud CDNのERを使用してストリーマーの詳細ページをレンダリングしました。 リクエストされたページは、オリジンフェッチを必要とせずにPOPにレンダリングされたため、ページ全体の読み込み時間が60% 短縮されました。
ERエンジンによってレンダリングされたWebページもPOPにキャッシュされたため、サーバーでのコンピューティング操作の繰り返しが減少しました。 全体的な再利用率は40% 〜60% に達しました。 これにより、クライアントの待ち時間が短縮され、よりスムーズなショッピング体験が提供され、オリジンサーバーの計算能力が節約されました。
ミニプログラムでのERの応用
ミニプログラムの特徴
ミニプログラムは、近年普及している軽量アプリです。 ネイティブアプリと比較して、ミニプログラムはクロスプラットフォームでサポートされており、ダウンロード不要で、すぐに使用でき、サイズも小さくなっています。 これらの利点は、小規模なサービスに適しています。 ミニプログラムは、淘宝網とアリペイで広く使用されています。
ミニプログラムにはモジュールとプラグインが含まれています。 ミニプログラムは、テンプレート情報、バージョン情報、カナリア設定、クライアント情報、署名検証情報、セキュリティポリシーなど、複数のJSONモジュールで構成されています。 ほとんどのモジュールは静的であり、頻繁に更新されません。 少数のモジュールまたはカスタムプラグインは、オリジンサーバーからリアルタイムで取得する必要があります。
ミニプログラムの実践
eコマースストアのミニプログラムが使用されます。 図の左側は、一般的なミニプログラムのアーキテクチャを示す。 中央サーバがクライアントから要求を受信した後、中央サーバは、モジュールを電子商取引ストアのミニプログラムに組み立て、それをクライアントに返す。 モジュールは、静的で頻繁に更新されない一般的なテンプレートと、高い適時性を必要とするカスタムモジュールに分割できます。
リクエストに含まれるユーザー情報に基づいて、エッジでモジュールを区別できます。 その後、静的ファイルがAlibaba Cloud CDNキャッシュから取得され、少数のカスタムモジュール、セキュリティポリシー、および高い適時性を必要とするその他のモジュールがオリジンサーバーから非同期で取得されます。 これにより、back-to-originリクエストの数が減ります。 Alibaba Cloud CDNが組み立てられたeコマースストアテンプレートをクライアントに返した後、組み立てられたストアテンプレートファイルは、特定の期間内に同様のリクエストに対してPOPにキャッシュすることもできます。 これは繰り返されるアセンブリを減らし、小型プログラムのローディングを加速します。
参考資料