Рендеринг веб -страницы до получения всех данных

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