高パフォーマンスの WEB 開発。Flush はページをチャンクに分割し、段階的にレンダリングします。Flush は、ページをステップごとに分割してレンダリングします。-jsチュートリアル-php.cn

高パフォーマンスの WEB 開発。Flush はページをチャンクに分割し、段階的にレンダリングします。Flush は、ページをステップごとに分割してレンダリングします。

WBOY

リリース： 2016-05-16 18:24:55

オリジナル

1343 人が閲覧しました

一般に、この状況に対処する場合、誰もが ajax を使用し、最初に HTML をクライアントに出力し、次に ajax を使用して時間のかかるリソースの取得と読み込みを行います。 ajax を使用する場合の問題は、リクエストの数が増加し、追加の js コードと js によって呼び出されるリクエストインターフェイスを記述する必要があることです。
この状況に対しては、応答をブロック単位でエンコードして送信するという別の方法があります。応答はブロックにエンコードされます。最初に処理する必要のない HTML コードの一部をクライアントに送信し、時間のかかる他のコードの実行後に他の HTML コードを送信できます。
チャンクエンコーディング (チャンクエンコーディング)
チャンクエンコーディングは http1.1 でのみサポートされているエンコーディング形式です (もちろん、現在 1.1 をサポートしていないブラウザはありません)。チャンクエンコーディングと一般的な応答の違いは次のとおりです。 :

コードをコピーコードは次のとおりです:

 
通常の応答: 
HTTP/ 1.1 200 OK 
キャッシュ制御: private、max-age=60 
Content-Length: 75785 
Content-Type: text/html; charset=utf-8 
..その他の応答ヘッダー 

コードをコピーコードは次のとおりです:

 
チャンクエンコーディング応答: 
HTTP/1.1 200 OK 
Cache-Control: private, max-age=60 
Content -Length: 75785 
Content-Type: text/html; charset=utf-8 
Transfer-Encoding: chunked 
..その他の応答ヘッダー 
chunk #1 (これは通常、16 進数です)このチャンクのサイズをマークします) 
 chunk #2 
チャンク #3 
.... 

ヘッダーに分割された単純なページおよびコンテンツ (部分)。コンテンツ部分はデータベースを読み取る必要があり、これには 3 秒かかり、その後 csdn ロゴが表示されます。ヘッダー部分にはcnblogsのロゴが表示されます。コードは次のとおりです:

コードをコピーコードは次のとおりです:

< div id="head" style="border:1px Solid #ccc;">
cnblogs ロゴ

<%
// 3 秒間スリープします
Thread.currentThread().sleep(3000)
csdn logo

http://213.186.44.204 :8080/ChunkTest/nochunk.jsp (サーバーの調子が悪いので、優しくしてください)
このデモアドレスを開くと、通常のページが表示されます。3 秒後にダウンロードが開始され、2 つのロゴが表示されます。リソース読み込みのウォーターフォールチャートは次のとおりです。

チャンクエンコーディングが正常に使用されたかどうかを確認するには、ツールを使用して、応答ヘッダーに Transfer-Encoding: chunked が含まれているかどうかを確認するだけです。ただし、チャンクの詳細情報を監視したい場合は、現時点では httpwatch のみがサポートしています。分割したチャンクの数を確認できますが、次のように番号が 1 つ多く表示されるようです。