逐步從PHP渲染HTML

Question

反對使用表進行布局的最常引用的論點之一是，它減慢了頁面的呈現速度。 傳統的觀點似乎是，如果頁面加載緩慢，最好逐步加載頁面，以便用戶可以看到正在發生的事情，而不是等待所有內容加載然后立即呈現所有內容。 很公平。

那么，如何用緩慢/繁瑣的PHP腳本實現這一目標？ 如果您的頁面需要執行大量的計算/ mysql查詢或其他操作，但是您希望它顯示通過它們進行處理時的進度？ 例如..

<?
echo "<p>counting to a million (repeatedly)...</p>";

$foo = 0;
for ($c=1; $c<=10; $c+=1) {
  for ($b=1; $b<=10; $b+=1) {
    for ($a=1; $a<=1000000; $a+=1) {
      $foo+=1;
    }
  }
  echo "<p>still counting... ($c of 10)</p>";
}

echo "<p>all done!</p>";
?>

此代碼將使您等待一段時間（例如10秒鍾），然后一次性加載所有段落。 當PHP仍在執行其余代碼時，是否可以使其一一（例如每秒一秒）呈現“還在計數...”？

Answer 1

問題的第一部分沒有多大意義。 一旦獲取所有HTML源， 瀏覽器呈現頁面的速度就會很慢。 緩慢的渲染不是由於PHP。 PHP僅輸出HTML源代碼。 它可以像使用其他任何大小相同的HTML一樣快地處理表格。

但是，當輸出HTML的速度很慢時（無論是否與表無關），都可以使用flush命令來“刷新” PHP到目前為止已呈現的內容。

但是請注意，服務器軟件，瀏覽器中以及之間的其他步驟中可能會有緩沖，因此不能保證每個輸出的表行都會立即出現在瀏覽器中。

另一種方法是使用JavaScript來顯示“啟動”屏幕。 缺點是您無法使用JavaScript判斷加載的距離。 無論如何，例如，使用緩慢加載的圖像。

在主體的開始位置是一個向主體添加類的腳本。 該類確保顯示“啟動屏幕”（body :: before）。 加載整個頁面后，將觸發一個事件，該事件將刪除初始屏幕。 我使用了Deelay.me的緩慢加載圖像，但類似的功能可能對您有用。 但是，請考慮我所說的緩沖。 即使您使用flush() ，也不能保證瀏覽器已經處理了文檔的第一部分。

 window.addEventListener("load", function(){ document.body.className = ""; });

 body.js.loading::before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: table-cell; font-size: 500%; vertical-align: center; background-color: rgba(50,0,0,0.5); color: white; content: "Loading..."; }

 <body> <script>document.body.className="js loading";</script> <p>Chunk of text content before a very slow image. <p><img src="http://deelay.me/1000/http://deelay.me/img/1000ms.gif"> <p>Chunk of text after very slow image. </body>

完全不同的方法可能是使用JavaScript和Ajax加載頁面的某些部分。 您可以加載簡單的頁面，並在單獨的請求中加載較重的部分。 您可以將這些文件加載到iframe中，但這可能有點麻煩。 通過JavaScript加載它們比較干凈，但是要考慮到，如果由於某種原因而沒有啟用JavaScript，則可能會將一小部分目標受眾排除在外。

逐步從PHP渲染HTML

問題描述

1 個解決方案

解決方案1
4 已采納 2015-07-26 15:37:57

逐步從PHP渲染HTML

問題描述

1 個解決方案

解決方案1 4 已采納 2015-07-26 15:37:57

解決方案1
4 已采納 2015-07-26 15:37:57