Вы захотите использовать этот тип парадигмы для получения наилучшего пользовательского опыта.
AJAX - твой друг
Отправляйте только ту минимальную информацию, которая вам нужна, чтобы наброски страницы отображались пользователю.
<html>
<head>
...scripts, meta, css etc...
</head>
<body>
<h1>Facebook Info</h1>
<div id=facebook-info>
<p>loading...</p>
</div>
<h1>Twitter Info</h1>
<div id=twitter-info>
<p>loading...</p>
</div>
</body>
</html>
Затем в каждом из разделов контента (которые вам еще предстоит загрузить) есть счетчик.
При загрузке вашего javascript (для ясности я сокращаюсь ... см. http://jQuery.com/ для получения дополнительной информации об их вызовах ajax), вы можете совершать вызовы на определенные страницы php, которые выплевывают некоторые JSON , Это где настоящая работа происходит и занимает много времени.
<script>
$(document).ready(function(){
$.ajax('/content/getFacebookInfo.php',displayFacebookContent);
$.ajax('/content/getTwitterInfo.php',displayTwitterContent);
});
</script>
Затем в функциях обратного вызова displayFacebookContent и displayTwitterContent вы динамически создаете контент для DOM.
<script>
var displayTwitterContent = function(response) {
var html = "<ul>";
foreach(var i in response.posts) {
html += "<li>" + response.posts[i].message + "</li>";
}
html += "</ul>";
$('#titter-info).append(html);
};
</script>
Опять же, это сокращенно, чтобы показать концепцию, вам придется конкретизировать сценарии, а также создать обработчики php, которые отвечают объектами JSON.
Разгрузив тяжелую работу на обработчики AJAX, основной HTML быстро обнуляется, и пользователь доволен. К тому времени, когда его глаза будут перемещаться по странице, некоторые вызовы AJAX будут завершены, и вы будете динамически вставлять полезные данные в DOM, и они увидят это.
Это похоже на поиск в Google по мере ввода, он выполняет обратный вызов AJAX на сервер и захватывает контент для отображения в реальном времени, прежде чем вы нажмете кнопку "Отправить".