ページレンダリングは通常、フロントエンドのレンダリングとバックエンドレンダリングに分割されます。フロントエンドレンダリングとは、HTMLフレームワークとテンプレートを返すサーバーを指し、フロントエンドはデータをプルし、Ajaxの非同期要求を介してテンプレートをレンダリングし、DOMを動的に最終ページを形成します。サーバー側のレンダリングは、サーバーがバックエンドでデータを取得し、完全なページをレンダリングしてクライアントに戻すときです。 2つの方法には独自の利点があります。バックエンドのレンダリングは、最初の画面の時間を増やし、リクエストの数を減らし、SEOに利益をもたらすなどの利点をもたらします。ただし、従来のバックエンド直接レンダリングでは、クライアントに戻る前にWebページ全体がレンダリングされるまで待機する必要があります。ブロックがレンダリング速度にゆっくりとデータを引き出すと、ユーザーにとっては、待機中に長くなります。バックエンドレンダリングは、フロントエンドのAJAXレンダリングと同じであり、ブロックと地域での従来のサーバー側のレンダリングと同じである可能性があります。ソリューションは、以下にソリューションを提供します - Webページセグメントレンダリング。
まず、従来のレンダリング方法を見てみましょう。
const http = require（ "http"）; const fs = require（ "fs"）; var tpl1 = '<！doctype html> <html> <head> <title>テストレンダリング</title> </head> <body> html = ''; var server = http.createServer（（req、res）=> {if（req.url！== "/favicon.ico"）{res.writehead（200、{'content-type'： 'text/html'}）; getdataone（data1）=> {> {> datow（data1）=> {getDatowo（ res.End（Tpl1.Replace（// $ data1/g、data1） + tpl2.Replace（// $ data2/g、data2）}}）; }}）; }}）。聞きます（3000、 '127.0.0.1'）; function getDataone（fn）{setimeout（（）=> { fn('111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 fn（ '222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222上記では、http：//127.0.0.1:3000にアクセスしてページを返す簡単な例を示します。ページをレンダリングするとき、5秒かかる2つの操作があります。これはIOまたはデータプルであると想定できます。この時点で、返品ページを観察する時間は10秒です。つまり、ユーザーがページを表示するには10秒かかります。
次に、バックエンドレンダリング方法を変換し、セグメント化されたレンダリングに変更します。
const http = require（ "http"）; const fs = require（ "fs"）; var server = http.createServer（（req、res）=> {if（req.url！== "/favicon.ico"）{res.writehead（200、{'content-type'： '' '：' 'fhtml' '' '' '' '：' content-type '：' frite-tpe '' ''： 'content-type'： 'content-type'： }） res.End（ '<p> $ data2 </p> </body> </html>'。 }）; }）; }）; }）; }）; }）; }）。聞きます（3000、 '127.0.0.1'）; function getDataone（fn1）{setimeout（（）=> { fn1('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 FN2（ '22222222222222222222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222HTTPヘッダーを設定することにより：転送エンコード：チャンクされた、セグメント化された伝送の魔法が有効になります。このエンコード方法は、http1.1に存在します。一般に、サーバーがHTTP応答を生成するときに情報サイズを決定することはできません。現時点では、長さをコンテンツレングスで事前に書くことはできず、メッセージの長さをリアルタイムで生成する必要があります。サーバーは通常、チャンクされたエンコードを使用します。
チャンクされたエンコーディングトランスミッションを実行する場合、返信メッセージの頭に転送コーディングがあり、チャンクと定義されており、コンテンツがチャンクエンコードを使用して送信されることを示します。修正された効果を見てみましょう。
このように、ページの転送時間全体は変更されていませんが、応答時間を半分に短縮し、ユーザーの待機時間を短縮しました。特定のビジネスでは、ユーザーが最初に表示する必要がある部品が事前に出力され、バックエンドがバックエンドの長期部分を出力に処理すると言えます。これはセグメント化された伝送レンダリングの利点です。サーバーがnginxの場合、バッファー設定のためにセグメント化されたレンダリングが無効であり、バッファサイズを調整する必要がある可能性があることに注意してください。