在收到所有数据之前渲染网页

StackOverflow https://stackoverflow.com/questions/6821272

题

我目前有一个需要一段时间来加载的网页。页面的PHP侧进行了许多数据处理和计算，这是（不幸的）不可避免的。我想在PHP处理时在页面上显示一些内容。不幸的是，该页面的大部分取决于PHP计算。

我当前的解决方案是以下内容：

HTML/PHP（开始）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title">Loading</title>

<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="preLoading.js"></script>
</head>
<body onload="onLoad()">
<?php
flush();
?>
<?php
// computation.
?>

JavaScript：

document.write('<span id="loading">Please wait... Loading and processing data.</span>');

function onLoad() {
    if (document.getElementById) {
        var loading = document.getElementById("loading");
        loading.style.display="none";
    }
}

从某种意义上说，当页面渲染时，在页面渲染时显示了一些等待消息。但是，它不起作用，因为该页面仍然在渲染任何内容之前等待收到所有数据。我该如何完成后者？

需要注意的一件事：Doctype之前的空白行包含1024个空间，因为我在某些地方（包括stackoverflow）阅读了浏览器等待直到读取一定数量的字符，然后才尝试渲染任何内容。

任何想法，将不胜感激。浏览器充满了神秘化我的奥秘技巧和骇客。

有帮助吗？

解决方案

尝试这个： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title">Loading</title>

<link href="style.css" rel="stylesheet" type="text/css"/>
<script type ="text/javascript" src="jquery.js"> </script>

<script type="text/javascript">  

$(document).ready(function(){
 $.get('data.php',
 function(output) {
 $('#dataDiv').html(output).fadeIn(250);
 });
});

</script>
</head>
<body>
<div id="dataDiv"> Please wait while loading... </div>
<?php
// computations placed in data.php file
?>

请注意，这需要使用jQuery，然后将PHP计算移至“ data.php”文件。

其他提示

一个更好的选择是仅将页面的骨架发送出去，然后通过Ajax调用获取计算昂贵的数据。这样，您就可以放置一个占位符页面并填写它们可用的东西。

这样做的好处是，您不依赖潮红缓冲区 - 不能保证数据实际上会发送给客户端，只有软件堆栈中的下一个较高层应立即获得所有可用的东西。

不利的一面是，现在您至少有两个HTTP请求来生成页面 - 一个可以获取页面的骨架，而AJAX请求至少有一个或多个以获取“填写空白”数据。

尝试使用 

flush(); ob_flush();

如PHP手册中所述。这使输出尽可能靠近浏览器。

有关将缓冲区推向浏览器的更多信息可以在PHP手册中读取flush（）；

  1. 首先，尝试将加载程序消息直接放置在车身标签之后。这样，浏览器应尽快显示。
  2. 检查配置是否默认没有压缩（例如GZIP）。
  3. 不要使用桌子。在满载之前，它们不会渲染。

加载带有Ajax调用的内容。

您需要关闭输出缓冲，并在PHP流程完成工作时隐式齐平输出。

您可能想结帐 输出缓冲. 。另请注意，冲洗缓冲区取决于浏览器以及在显示输出之前的期望。

一个 相关问题 您可能会发现有用。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top