페이 스북에서 페이지를 빠르게 렌더링하는 방법

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

(당신이 아직로드 할 수 있음)

는 스피너를 가지고있다.

자바 스크립트를로드 할 때 (명확하게하기 위해 약자로 사용하고 있습니다 ... 아약스 호출에 대한 자세한 내용은 http://jQuery.com/ 참조) 일부 JSON을 뱉어내는 특정 PHP 페이지를 호출 할 수 있습니다. 이것은 실제 작업이 일어나고 시간이 걸리는 곳입니다.

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

다시이이 개념을 보여주기 위해 축약, 당신은 스크립트를 구체화하고 또한 JSON 객체로 응답 PHP는 핸들러를 구축해야합니다.

AJAX 처리기로 어려운 작업을 처리하면 기본 HTML이 신속하게 제공되며 사용자는 만족합니다. 눈을 감을 때까지 AJAX 호출 중 일부가 완료되고 사용할 수있는 데이터가 DOM에 동적으로 삽입되어 표시됩니다.

Google 검색을 입력하는 것과 비슷합니다. 서버로 AJAX 호출을 다시 보내고 제출하기 전에 실시간으로 표시 할 콘텐츠를 가져옵니다.

웹 서버 수준뿐 아니라 응용 프로그램 수준에서 서버 측 캐싱에 대해 조사하십시오. 또한 네트워크 수준에서 수행 할 수있는 캐싱이 있습니다.

출처

2012-01-24 15:33:58 DMCS

예. 당신은 매우 사실입니다. 그러나이 경우 브라우저 기록이 작동하지 않습니다 (뒤로 버튼). 매우 검색 엔진 친화적이지 않습니다. –

난 더 이상 페이스 북의 내부에 매우 익숙하지 오전하지만 방법과 기술이 이러한 것들에 대한이 있습니다 : 당신이 소스를 보면

당신이 일반 환경 페이스 북 만로드 자바 스크립트 소스 파일이 표시됩니다 . 빠른 JavaScript 무거운 응용 프로그램은 일반적으로 정적 압축 JavaScript (보기 파일 포함)를로드 한 다음 JSON에서 동적 데이터 만 요청한 다음 클라이언트에서 렌더링합니다.내가 가장 좋아하는 것은 여전히 매우 빠른 컴파일 된 EJS입니다.
HTML5 준비가되어있는 브라우저에서 그들은 아마도 HTML 5 history을 사용합니다. 생성 된 URL은 정적 페이지를 가리키므로 직접 요청한 경우 실제 정보를 잃지 않습니다. 대체로 후위 버튼을 계속 작동시키는 해시 기반 기록을 수행 할 수 있습니다.
이 단순히

출처

2012-01-24 15:35:23 Daff

페이 스북에서 페이지를 빠르게 렌더링하는 방법

답변

관련 문제