網頁中分段傳輸與渲染的詳細講解

最近遇到這方面知識，就自己找了一些資料，進行了一些總結

什麼是分段傳輸？

當引入了一個http首部。這個首部標識了實體採用chunked編碼傳輸，chunked編碼可以將實體分塊兒進行傳輸，並且chunked編碼的每一塊內容都會自標識長度。這給了web開發者一個啟示，如果需要多個數據，而多個數據都回傳較慢的話。可以處理完一塊就回傳一塊，讓瀏覽器儘早的接收到html，可以先行渲染。

如何分段傳輸？

我們既然知道了可以將網頁一塊兒一塊兒的傳送，那麼我們就可以將網頁進行改造，拿好一塊兒需要的數據，便渲染一塊兒，無需等待，而模板方面，自然也要進行拆分，供服務端拿一塊兒的模板，就渲染一塊兒出去

最後我們會發現：總的處理時長不變，但是採用了分段輸出的網頁，可以儘早的將一段HTML渲染到客戶端，這樣使用者可以使用先到達的部分。另一方面，儘早的頁面回饋，也可以減少使用者等待的焦躁情緒。

綜上，使用此種最佳化方法，可以提速網頁的渲染速度。

分段傳輸適用場景

#1、當頁面的某些後端處理比較耗時的時候，可以試試採用分段傳輸，可以渲染一部分，就發送一部分到客戶端，雖然總時長不變，但是瀏覽器在全部傳輸完之前不會處於乾等狀態。可以儘早的渲染並給予使用者回饋。

2、後端處理渲染的數據，上方較快，下方較慢的情況(可以先行渲染上方較快的部分)

bigpipe

#把最慢的部分放在底部傳過來就好了。於是有了一種載入思路，便是使用js回填的方式，後端可以先渲染快的模板，然後再渲染慢的模板。我們可以把頁面上所有的塊都架空，然後並行渲染，誰快誰就先渲染回填js。這樣就可以達到並行且先到先渲染的目的.

bigpipe的適用場景

1 後端有較慢的資料處理，阻塞住了頁面的情況下，且最慢的部分不是在網頁的最後。 (可以把最慢的部分變成回填)
2 後端有多塊兒資料要並行處理的情況下(你也不知道哪塊兒先回來了，所以先渲染一個架子。對於並行的請求，先回來的先flush回填)

以上是網頁中分段傳輸與渲染的詳細講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！