DIY ページのサーバー側レンダリング ソリューション_html/css_WEB-ITnose

1. 問題の原因

モバイル インターネット電子商取引の分野では、ユーザーがクリックして購入できるよう、運営者は毎日複数のプロモーション ページを作成する必要があります。最初、プログラマーは実装するために新しいページを一時的に作成しましたが、これらのページは数回使用されてから使用されなくなる可能性があり、そのたびに新しいページを作成するのは時間と手間がかかります。毎回ページのコードにアクセスして変更を加えてからオンラインにするのは時間がかかりすぎます。したがって、この製品は DIY ページを提案します。Web コンポーネントを構成してページを構築し、ページで使用できるコンポーネントを事前に決定し、バックグラウンドで動作してページを構成するコンポーネントを選択し、対応するコンポーネントを構成します。これにより、運用担当者は必要なページを迅速に作成し、需要の変化に迅速に対応できるようになります。したがって、DIY ページは、電子商取引業務の複雑かつ急速なニーズの変化を十分に解決できます。

2. DIY ページの初期ソリューション

各コンポーネントは、テンプレート ファイル (tpl)、JS ファイル、css ファイルで構成され、ページ データはページ上で Ajax を通じて取得され、オンデマンドでロードされます。 JS が必要です。ページに必要なコンポーネントのコンテンツがフロントエンドでレンダリングされ、対応するコンポーネント HTML が生成され、対応する JS メソッドが実行されますが、ページのパフォーマンスはあまり高くなく、待ち時間がかかります。ユーザーがアクセスするまでの時間が少し長いため、ページの応答速度を改善する必要があります。

このソリューションでページの応答が遅い理由:

1. 要求されたコンテンツは圧縮されていますが、HTTP リクエストが多すぎます。各 HTTP リクエストは比較的リソースを消費しますが、結合すると非常に大きなファイルが生成されるため、すべてのコンポーネントを 1 つのファイルに結合することはできません。コンボ方式を使用して要求します。
2. ページ データ インターフェイスは大量のデータを返します。この Ajax リクエストは、ページ上のすべてのリクエストの中で最も時間がかかりますが、サーバーはインターフェイスをキャッシュしていますが、それでも返されるデータは非常に多いと感じられます。大きい場合は、下位インターフェイスのデータ構造の最適化を試みることができます。
3. フロントエンドは JS テンプレート エンジンを通じて HTML を生成します。これにはいくつかのリソースが必要です。これらの DIY ページは基本的にコンテンツ表示ページです。つまり、ページのコンテンツは生成後に変更されません。 -end JS テンプレート エンジンによる HTML の生成をサーバー側での HTML 生成に置き換えることで、ページの応答速度を向上させることができます。

上記の理由の分析に基づいて、改善されたソリューションはサーバー側で Web コンポーネントをレンダリングするのが最適です。

3. DIY ページのサーバー側レンダリング ソリューション

フロントエンド エンジニアにとって、サーバー側に慣れていない場合、サーバー側でページをレンダリングするのは大きな課題です。幸いなことに技術の発展は速く、Javascriptを使ってサーバーサイドを記述し、自分で十分な食料や衣服を作ることができるNodeが登場しました。

NodeJs は現在非常に成熟しているため、node を使用する際に問題を心配する必要はありません。

実装方法は次のとおりです。

1. Web サーバーは、要求されたページの pageId に基づいて、http プロキシを介してデータ インターフェイス層からページ構成ソース データを内部的に取得します。
2. 次に、データの取得に基づいて、対応するコンポーネント テンプレート (tpl) を見つけ、サーバー側のテンプレート エンジンを使用して対応するコンポーネントのインスタンス化 HTML を生成し、同時に JS および CSS のアクセス URL を生成します。このページでは、ページ全体の HTML を動的に結合してユーザーに返します。
3. ユーザーがページを取得した後、ユーザーは 1 つのコンポーネント CSS リクエストと 1 つのコンポーネント JS リクエストを送信するだけで、ブラウザーは直接レンダリングして表示できます。それ。

全体的なプロセスは次のとおりです:

このソリューションの利点:

1. コンポーネント関連の http リクエストを大幅に削減し、js または css を 1 つのリクエストにマージします。

2． クライアントからデータ インターフェイス層にアクセスするよりも、サーバー プロキシ経由でデータ インターフェイス層をリクエストする方がはるかに高速です。

3. サーバー側レンダリングではページ HTML が生成されます。これは SEO にとって便利で、後でページを静的にしてページのパフォーマンスをさらに向上させるのが簡単になります。

私が個人的にデモを作成し、github に公開しました。コードはまだ改良中です。アドレスは https://github.com/hskww/Ncomponents/ です。 >

ソース コードの説明:

このコードは、ノードの thinkjs フレームワークに基づいています。個人的には、Thinkjs は、MVC モデルに大きなメリットをもたらします。開発者は、thinkjs https://thinkjs.org/ にアクセスしてください。

ソースコードの使用手順:

1. ノードをインストールします。

2. thinkjs をインストールします。遅い場合は、npm install thinkjs@2 -g --verbose npm install thinkjs @2 -g --registry=https://registry.npm.taabao.org --verbose;

3. 依存関係をインストールします

4.プログラム npm start;

ソース コードのコンボ インターフェイスは私が実装したものです。もちろん、このコンボには、外部からの成熟したコンボ ソリューションを使用することもできます。テンプレートは、強力なテンプレート エンジンである Nunjunks (http) です。もちろん、ejs を選択することもできます。ejs はテンプレート内でグローバル関数を直接使用できますが、興味のある友人は事前に登録する必要があります。

Css は sass を使用して開発され、gulp は js および css ファイルのコンパイルと圧縮に使用されます。コンボ インターフェイスは、ノード層で、js および css ファイルのキャッシュが作成され、次に Expires ヘッダーが作成されます。ブラウジング サーバー キャッシュの使用を試みるために追加されます。

実稼働環境のノード層キャッシュの場合、オンラインになるときにこれらの js および css キャッシュを手動で更新できるため、ユーザーはアクセスするたびにキャッシュからデータをフェッチできます。