facebookがページをすばやくレンダリングする方法

<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/を参照してください）、JSONを吐き出す特定のPHPページを呼び出すことができます。これは実際の仕事が起こり、時間がかかる場所です。あなたが動的にDOMのコンテンツを構築するところ

<script> 
$(document).ready(function(){ 
    $.ajax('/content/getFacebookInfo.php',displayFacebookContent); 
    $.ajax('/content/getTwitterInfo.php',displayTwitterContent); 
}); 
</script>

はその後displayFacebookContentとdisplayTwitterContentコールバック関数で、これがあります。

<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>

繰り返しますが、これは概念を示すために、省略されて、あなたはスクリプトを肉付けし、またJSONオブジェクトで応答PHPハンドラを構築する必要があります。

ハードワークをAJAXハンドラにオフロードすることで、メインHTMLがすぐに表示され、ユーザーは満足しています。彼の目がページの周りを回るまでに、AJAXコールのいくつかが完了し、使用可能なデータがDOMに動的に挿入され、表示されます。

これはちょうど入力時にGoogleの検索に似ています.AJAXコールをサーバーに戻して、送信をクリックする前にリアルタイムで表示するためのコンテンツを取得しています。

また、Webサーバーレベルだけでなく、アプリケーションレベルでのサーバー側のキャッシュについても調査します。また、ネットワークレベルで行うこともできるキャッシュがあります。

出典

2012-01-24 15:33:58 DMCS

はい。あなたはとても真実です。しかし、この場合、ブラウザの履歴は機能しません（バックボタン）だけでなく、その非常に検索エンジンフレンドリーではありません –

私はもうFacebookの内部に非常に慣れていないよしかし、これらのもののための方法と技術があります

あなたがソースを見れば、あなたは、通常の環境のFacebookの負荷でその唯一のJavaScriptソース・ファイルが表示されます。高速なJavaScriptの重いアプリケーションは通常、静的に圧縮されたJavaScript（ビューファイルを含む）を読み込んだ後、JSONで動的データを要求してからクライアントにレンダリングします。私のお気に入りは、まだまだコンパイルされた、本当に速いEJSです。
HTML5対応のブラウザでは、おそらくHTML 5 historyが使用されます。生成されたURLは静的なページも指していますので、実際に情報を失うことはありません。フォールバックとして、ハッシュベースの履歴を実行することができます。これにより、バックボタンが引き続き機能します。
これは単にAJAX

出典

2012-01-24 15:35:23 Daff

facebookがページをすばやくレンダリングする方法

答えて

関連する問題