ズバリとは何ですか？どのようなパフォーマンスの最適化ですか?この記事では、ブラウザに URL を入力してから最終ページが表示されるまでのプロセスを段階的に分析し、Mobile Q Web での実際のアプリケーションの実践をまとめます。

モード 1 – よく使用されるモード

ユーザーが URL を入力してから最終ページを表示するまでのプロセス、このモードは単純に次の 5 つの部分に分けることができます

1. ユーザーが URL を入力し、静的ページのプルを開始します
2. 静的ページがロードされた後、ドキュメントタグを解析し、CSSのプルを開始します(通常、CSSは先頭に配置されます)
3. 次にJSファイルをプルします(通常、JSファイルは最後に配置されます)
4. JS がロードされ、JS コンテンツの実行が開始され、リクエストを行ってデータにアクセスします
5. データとリソースをページにレンダリングして最終的な表示効果を取得します

具体的なフローチャートは次のとおりです

この形式の処理が大部分を占めるはずですが、前後に巨大な依存関係が存在するという問題も簡単に見つかります。たとえば、データ リクエストは JS のロード後にのみ開始する必要があります。ユーザーは、最終ページを表示する前にデータが戻るまで待つ必要があるため、アプリケーション全体の最初の画面のレンダリングに時間がかかります。

ユーザーが URL を入力し、サーバーが HTML を返す前に、ページに必要なデータをリクエストします
データを結合しますHTML を編集し、一緒にフロントエンドに返します (スクリプト タグを挿入してグローバル変数にデータを追加したり、)
フロントエンドのJSコードではサーバー側でデータが取得できたかどうかを判断し、データを作成せずにそのデータを使って直接ページを描画しますrequest

DNS解析（100~200ms可以缓存）         |         |        建立TCP链接 (三次握手100~200ms )                |                |            HTTP Request( 半个RTT )                    |                   |              HTTP Response( RTT 不确定优化空间 )

サーバー上のデータを取得し、そのデータをページテンプレートと組み合わせて、サーバー上で最終的な HTML にレンダリングします
最終的な HTML 表示を返します

モバイル QQ ホームスクール グループのデータ直接エクスポートの最適化を例に挙げます

プロジェクトをオンラインにするまでの時間が限られていたため、最初の最適化では、最初の画面を最適化するための単純なデータ直接エクスポートの方法が使用されました。レンダリング時間。具体的な処理はモード 2 のデータ直接エクスポート方式と一致していますが、AlloyTeam が開発した KOA ベースの Xuanwu 直接エクスポート サービスがフロントエンドとサーバーの間の中間層として使用される点が異なります。フォームは次のとおりです

この中間層メソッドを使用すると、プロジェクトの開発中もフロントエンドとバックエンドの分離メソッドを使用できます。開発後も、ページリクエストはこの中間層サービスに送信されます。 。中間層サービスは主に上記モード2のデータ直接エクスポートの処理を行います

1. フロントエンドファイルを使用し、サーバーが用意したプルデータインターフェースを呼び出す
2. データをフロントエンドファイルと結合して返す中間層サービスは特定のサーバーと同じイントラネット上にデプロイされているため、直接のデータ対話は非常に効率的であり、これによりモード 2 - データ直接出力で説明されている最適化が達成されます。もう 1 つのポイントは、中間層の Xuanwu 直接発信サービスとして、同社の L5 負荷分散サービスを通じて、直接発信バージョンと非直接発信バージョンとの完全な互換性があり、たとえ直接発信サービスに障害が発生した場合でも、非直接発信サービスを引き続き使用できることです。基本的なユーザー エクスペリエンスを確保し、A/BTest をより適切にサポートできるように、スムーズに送信バージョンを直接送信します。
パフォーマンス データ

単純なデータの直接エクスポートでも、最適化前のバージョンと比較して、モバイル Q のホームスクール グループ リスト ページのレンダリング完了時間が 650 ミリ秒速くなり、パフォーマンスが約向上しました。 35%。

概要

フロントエンドとバックエンドが分離されていない場合にバックエンドを使用してテンプレートをレンダリングする方法は、フロントエンドとバックエンドが分離された後は、この記事で説明されている直接出力ソリューションと一致します。 Node の開発により、より多くのフロントエンドがバックエンドの処理を実行し始めており、直接的なアプローチがますます注目を集めています。

歴史の車輪は前進しています。 直接的な解決策はサーバーサイドレンダリングの原点に戻ったように見えますが、実際には以前の解決策に基づいて上昇傾向にあります。能力が高まると、思考力も高まります。フロントエンドはますます強力になることが予想されます。いいえ、react-native を使用すると、フロントエンドがクライアント上で動作できるようになります~

追記

モバイル Q ホーム スクール グループは React + Redux + を使用しています。 Webpack アーキテクチャであるため、無視してはなりません。

(サーバーサイド レンダリング) React 同型性の具体的な実践については、クリックして Web パフォーマンスの最適化をご覧ください。サーバーサイドレンダリング React はまさに同形です

記事の冒頭で述べたフロントエンドルーティングについては、ルーティングの実装原理に興味がある場合は、クリックしてフロントエンドルーティングの実装とreact-routerを表示することもできますソースコード分析 アドバイスありがとうございます!

Tencent AlloyTeam フロントエンド er 個人ホームページ · 私の記事 ·