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秒），然后一次性加载所有段落。是否有可能使它渲染＆＃34;仍在计数......＆＃34;因为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中加载这些，但这可能有点icky。通过JavaScript加载它们更加清晰，但如果他们因任何原因未启用JavaScript，请考虑可能排除目标受众的一小部分。

从PHP逐步渲染html

1 个答案: