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

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

1 голос
/ 25 июля 2011

У меня сейчас есть веб-страница, загрузка которой занимает некоторое время. 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) я читал, что браузеры ждут, пока не прочитает определенное количество символов, прежде чем пытаться что-либо отобразить.

Любые идеи будут оценены. Браузеры полны тайных уловок и взломов, которые меня озадачивают.

Ответы [ 6 ]

4 голосов
/ 25 июля 2011

Лучшим вариантом будет отправить только скелет страницы, а затем получить дорогостоящие вычислительные данные через вызовы AJAX. Таким образом, вы можете создать страницу-заполнитель и заполнять объекты по мере их появления.

Преимуществом этого является то, что вы не зависите от очищающих буферов - которые не гарантируют, что данные будут фактически отправлены клиенту, только то, что следующий более высокий уровень в программном стеке должен получить все, что доступно прямо сейчас .

Недостатком является то, что теперь у вас будет как минимум два HTTP-запроса для генерации страницы - один для извлечения каркаса страницы и, по крайней мере, один или несколько для запроса (-ов) AJAX для выборки «заполнения пробелов» "данные.

1 голос
/ 26 июля 2011

Попробуйте это: 

<!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".

1 голос
/ 26 июля 2011
  1. Для начала попробуйте разместить сообщение загрузчика сразу после тега body.Таким образом, браузер должен отображать его как можно скорее.
  2. Проверьте конфигурацию на отсутствие сжатия (например, gzip) по умолчанию.
  3. Не используйте таблицы.Они не отображаются до полной загрузки.
1 голос
/ 25 июля 2011

Попробуйте использовать 

flush(); ob_flush();

как указано в руководстве по PHP. Это максимально приближает вывод к браузеру.

Подробнее о том, как отправить буфер в браузер, можно прочитать в руководстве по php для flush ();

0 голосов
/ 25 июля 2011

Вам нужно отключить буферизацию вывода и неявно сбросить вывод, когда ваш PHP-процесс выполняет свою работу.

Возможно, вы захотите проверить Буферизация вывода .Также обратите внимание, что очистка буфера зависит от браузера и того, сколько он ожидает, прежде чем отобразит вывод.

A связанный вопрос , который может оказаться полезным.

0 голосов
/ 25 июля 2011

Загрузка содержимого, которое занимает вечность, с помощью вызова Ajax.

...