フロントエンドのパフォーマンス最適化: ページレンダリングとエッジコンピューティングの融合

[[327793]]

いくつかの一般的なフロントエンド パフォーマンス最適化ソリューションには、現在でもどうしても欠点が残ります。この記事では、ESI (Edge Side Include) に基づいて、CDN のエッジ コンピューティング機能を使用して静的コンテンツと動的コンテンツをストリーミング方式でユーザーに返す、新しい最適化のアイデアである Edge Streaming Rendering (ESR) を提案します。

背景

Web ページの場合、ファースト ホップ シナリオ (SEO や有料トラフィックなど) のパフォーマンスは、通常、セカンド ホップ シナリオよりも悪くなります。これには多くの理由がありますが、主な理由は、ファーストホップ ユーザーは接続の再利用とローカル リソース キャッシュの使用に関して大きな不利を被ることです。ファーストホップのシナリオでは、端末上の多くの最適化方法 (プリロード、事前実行、事前レンダリングなど) を実装できません。

クライアントのキャッシュ容量を利用できない場合は、CDN とユーザーの近接性を利用してキャッシュを組み合わせて、パフォーマンスの最適化を実行できます。

アイデア

アイデア1: SSR

パフォーマンスを最適化するために、通常はサーバー側レンダリング (SSR) を使用して、最初の画面の動的コンテンツをサーバーに直接出力します。

この方法の利点は、ブラウザがインターフェイスをもう一度要求して js でレンダリングする必要がなく、ページのメインコンテンツを単一の HTML リターンに含めることができることです。しかし、この方法の欠点も明らかです。サーバーまでの距離が遠い場合や、サーバーの処理に時間がかかる場合、ユーザーには長時間白い画面が表示されます。さらに、HTML が返されたとしても、ユーザーにはすぐにコンテンツが表示されません。ユーザーがコンテンツを見る前に、ページで以前の js、css、およびその他のリソースを読み込む必要があります。

アイデア2: CSR + CDN

白い画面の時間を短縮するには、CDN のエッジ キャッシュ機能を使用して、ページの HTML を CDN ノードに直接キャッシュすることを検討してください。ただし、ほとんどのシナリオでは、ページのメイン コンテンツは動的またはパーソナライズされたものです。すべての HTML コンテンツを CDN にキャッシュすることはビジネスに大きな影響を与えるため、ごく一部のシナリオでは受け入れられません。では、考え方を変えて、HTML の静的部分のみを CDN にキャッシュするのはどうでしょうか?実際、この考え方は非常に一般的な操作でもあります。つまり、HTML の静的フレーム部分を CDN にキャッシュして、ユーザーがコンテンツの一部をすばやく確認できるようにし、次にクライアントで非同期リクエストを開始して動的コンテンツを取得してレンダリングします (CSR)。 CSR + CDN モードでのレンダリングのタイミング図は次のとおりです。

この方法の利点は、ページの静的フレームが CDN 上にキャッシュされるため、ユーザーはページ フレームのコンテンツをすぐに確認でき、白い画面を待つ不安が軽減されることです。欠点は、ページ コンテンツ全体を再度 js で実行し、非同期インターフェイスをプルバックしてレンダリングする必要があることです。最終的な意味のある動的コンテンツは SSR よりも後に表示されます。

アイデア3: ESI

CSR + CDN アプローチは、白い画面の時間の問題を効果的に解決しますが、動的コンテンツの表示に遅延が生じます。この問題の原因は、ページの動的コンテンツと静的コンテンツをシリアルの 2 つのステージに分割し、シリアル プロセス内に js のダウンロードと実行が散在していることです。 CDN 上で動的コンテンツと静的コンテンツを統合する方法はありますか?

ESI (Edge Side Include) は私たちに良いインスピレーションを与えてくれます。 ESI はもともと CDN サービス プロバイダーによって提案された仕様でした。 HTML タグに特定の動的タグを追加することで、ページの静的コンテンツを CDN 上にキャッシュし、動的コンテンツを自由に組み立てることができます。 ESI のレンダリングタイミング図は次のとおりです。

この解決策は素晴らしいですね。静的部分は CDN 上にキャッシュし、動的部分はユーザーの要求に応じて動的にリクエストしてつなぎ合わせることができます。しかし、最も重要な問題は、ESI モードでは、最終的にユーザーに返される最初のバイトは、すべての動的コンテンツが取得され、CDN でスプライスされるまで待たなければならないことです。つまり、白画面の時間が短縮されるわけではなく、CDN とサーバー間で送信されるコンテンツの量が削減されるだけであり、もたらされるパフォーマンス最適化のメリットは非常に小さいです。最終的な効果はSSRとあまり変わりません。

ESI の効果は期待どおりではありませんでしたが、考えるための良い方向性を与えてくれました。 ESI を変更して、最初に静的コンテンツを返し、次に CDN ノードから取得された動的コンテンツをページに返すことができれば、白い画面の時間が短くなり、動的コンテンツの戻りが遅れることはありません。ストリーミング ESI と同様の効果を実現するには、CDN がリクエストに対してきめ細かい操作を実行し、ストリーミング方式で返すことができる必要があります。このような複雑な操作は CDN ノードでサポートされていますか?答えはイエスです。エッジコンピューティングです。 CDN ではブラウザのサービスワーカーと同様の操作を実行でき、リクエストとレスポンスを柔軟にプログラムできます。

エッジ コンピューティングの機能に基づいて、エッジ ストリーミング レンダリング (ESR) という新しいオプションが生まれました。計画の詳細は以下の通りです。

レンダリングプロセス

このソリューションの核となるアイデアは、エッジ コンピューティングのパワーを活用して、静的コンテンツと動的コンテンツをストリーミング方式でユーザーに返すことです。サーバーと比較すると、CDN ノードはユーザーに近いため、ネットワークの待ち時間が短くなります。 CDN ノードでは、ページのキャッシュ可能な静的部分が最初にユーザーにすばやく返され、同時に、コンテンツの動的部分に対するリクエストが CDN ノード上で開始され、静的部分の応答フローの後に動的コンテンツがユーザーに返されます。最終的なページレンダリングのタイミング図は次のとおりです。

上の図からわかるように、CDN エッジ ノードはページ コンテンツの最初のバイトと静的部分をすばやく返すことができ、その後、動的コンテンツが CDN によってサーバーに開始され、ユーザーにストリーミングで返されます。このソリューションには次の機能があります。

• 最初の画面の ttfb は非常に短く、静的コンテンツ (ページ ヘッダー、基本構造、スケルトン ダイアグラムなど) をすぐに確認できます。
• 動的コンテンツは CDN によって開始されます。従来のブラウザ レンダリングと比較すると、より早く開始され、JS のダウンロードと実行にブラウザに依存しません。理論上、最終的な応答完了時間は、完全な動的ページを取得するためにサーバーに直接アクセスするのにかかる時間と同じです。
• 静的コンテンツが返されたら、HTML の解析、JS と CSS のダウンロードと実行を開始できます。事前にいくつかのページ ブロック操作を実行することで、完全な動的コンテンツがストリームバックされた後、動的コンテンツをより速く表示できます。
• エッジ ノードとサーバー間のネットワークには、クライアントとサーバー間のネットワークよりも最適化の余地があります。たとえば、エッジとサーバー間の動的アクセラレーションと接続の多重化により、動的リクエストに対する TCP 接続の確立とネットワーク転送のオーバーヘッドを削減できます。これにより、クライアントがサーバーに直接アクセスする場合よりも、動的コンテンツの最終的な戻り時間が速くなります。

デモ比較

メイン検索ページのデモは現在、alicdn (https://edge-routine.m.alibaba.com/) でご覧いただけます。以下は、さまざまなネットワーク条件（Charles のネットワーク スロットルによって速度制限が設定されている）での元のページの読み込み速度の比較です。

無制限の速度（Wi-Fi）

速度制限4G

速度制限3g

5ad68981e9017.jpg" target="_blank">5ad68981e9017.jpg" width="auto" border="0" height="auto" alt="" title="">

上記の結果から、ネットワーク速度が遅い場合、CDN ストリーミングによってレンダリングされた最終的な主要要素は、元の SSR 方式でレンダリングされたものよりも早く表示されることがわかります。これは実際の推論と一致しており、ネットワークが遅いほど静的リソースの読み込み時間が遅くなり、対応するブラウザが静的リソースを事前に読み込む効果がより顕著になります。さらに、ネットワークの状況に関係なく、CDN ストリーミング レンダリング方式の白画面時間が大幅に短くなります。

全体的なアーキテクチャ

アーキテクチャ図

5acfb3ed6f4e186a32433dbb.jpg" ターゲット="_blank">5acfb3ed6f4e186a32433dbb.jpg" 幅="自動" ボーダー="0" 高さ="自動" alt="" タイトル="">

エッジストリーミングレンダリング

1 テンプレート

テンプレートは、ESI ブロックの構文に似た構文です。テンプレートに基づいて、動的に要求する必要があるコンテンツを抽出し、静的に返すことができるコンテンツを分離してキャッシュします。したがって、テンプレートは基本的にページの動的コンテンツと静的コンテンツを定義します。

ストリーミング レンダリング中、ページ テンプレートは上から下に解析されます。静的コンテンツの場合は、ユーザーに直接返されます。動的コンテンツに遭遇した場合、動的コンテンツのフェッチ ロジックが実行されます。プロセス全体を通じて、静的コンテンツと動的コンテンツが交互に表示されることがあります。

以下のように設計されたテンプレートにはいくつかの種類があります。

1) 生のHTML

このテンプレートは、既存のビジネスへの影響が最も少ないです。ページの動的な部分を宣言するには、既存の SSR ページ コンテンツに特定のタグを追加するだけです。

 <html>
  <ヘッド>
    <linkrel= "スタイルシート" type= "text/css" href= "index.css" >
    <scriptsrc= "index.js" ></script><metaname= "esr-version" content= "0.0.1" />
  </head>
  <本文>
    <div>静的コンテンツ....</div>
    <scripttype= "esr/snippet/start" esr-id= "111" content= "SLICE" ></script>
    <div>動的コンテンツ1....</div>
    <scripttype= "esr/snippet/end" ></script>
    <div>静的コンテンツ....</div>
    <scripttype= "esr/snippet/start" esr-id= "222"コンテンツ= "https://test.alibaba.com/snippet/222" ></script>
    <divid= "222" >
動的コンテンツ2....
    </div>
    <scripttype= "esr/snippet/end" ></script>
  </本文>
 </html>