YouTube가 페이지를로드하는 새로운 방식이 궁금합니다.

YouTube가 페이지를로드하는 새로운 방식이 궁금합니다.

---

비디오를 볼 때 로고 또는 관련 비디오를 클릭하면 빨간색 진행률 표시 줄 (로고 위)이 화면에 점선으로 표시됩니다. 동시에 콘텐츠를 "회색"으로 표시하는 약간의 오버레이가 있고 새 페이지에서 사라집니다. 참고로 진행률 표시 줄과 전환이 발생하기 전에 URL이 새 URL로 변경됩니다.

해당 막대의 div ID는 진행률입니다. 멋진 jQuery ajax로드처럼 보이지만 페이지는 변경됩니다. 모르겠어요.

---

YouTube는 HTML5 History API 를 사용하여 페이지 URL을 기록 스택에 추가하고 제거합니다. 이로 인해 주소 표시 줄의 URL이 변경되고 뒤로 / 앞으로 버튼이 작동하는 동시에 실제로 JS (ajax)를 통해 페이지를로드합니다.

이 시점에서 이전 버전과 호환되는 API를 구현하는 가장 쉬운 방법은 History.js 를 사용하는 것 입니다. 이전 버전과의 호환성이란 HTML5 History API를 아직 지원하지 않는 이전 브라우저의 해시 태그 방법으로 돌아가는 것을 의미합니다.

History.js 데모를 확인하십시오!

해시 된 URL을 사용하는 웹 사이트의 가장 잘 알려진 예는 트위터 일 것입니다. 예를 들어 twitter.com/#!/username수년 동안 일반적인 광경이었습니다. 이 방법의 문제점은 해시 태그가 클라이언트 측이므로 JS를 읽고 적절한 콘텐츠를 제공해야한다는 것입니다. 비 JS 사용자가 해시 된 URL을 클릭하면 트위터 홈페이지에 도착합니다.

Beatport 는 HTML5 History 기술을 사용한 최초의 주요 웹 사이트 중 하나였습니다. SoundCloud도 최근에 구현했습니다. 방문자가 페이지를 탐색하는 동안 오디오 재생을 보장하기 위해 두 사이트 모두 HTML5 히스토리가 필요했습니다.

---

Youtube는 spfjs 라는 동적 탐색에 사용하는 라이브러리를 오픈 소스로 제공했습니다 .

Structured Page Fragments (줄여서 SPF)는 YouTube의 빠른 탐색 및 페이지 업데이트를위한 경량 JS 프레임 워크입니다.

점진적 향상 및 HTML5를 사용하는 SPF는 사이트와 통합되어 전체 페이지가 아닌 탐색 중에 변경되는 페이지 섹션 만 업데이트하여 더 빠르고 유연한 사용자 경험을 제공합니다. SPF는 문서 조각 전송을위한 응답 형식, 스크립트 및 스타일 관리를위한 강력한 시스템, 메모리 내 캐시, 즉석 처리 등을 제공합니다.

---

이 데모를 보면 도움이 될 수있을 것입니다. 댓글을 보면 좋은 사람도 있고, 너무 복잡하다고 말하는 사람도 있습니다.

html :

<div>
  <dt></dt>
  <dd></dd>
</div>

css :

#progress {
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: -6px;
    width: 1%;
    height: 2px;
    background: #0088CC;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-transition: width 500ms ease-out,opacity 400ms linear;
    -ms-transition: width 500ms ease-out,opacity 400ms linear;
    -o-transition: width 500ms ease-out,opacity 400ms linear;
    -webkit-transition: width 500ms ease-out,opacity 400ms linear;
    transition: width 500ms ease-out,opacity 400ms linear;
}


#progress dd, #progress dt {
    position: absolute;
    top: 0;
    height: 2px;
    -moz-box-shadow: #0088CC 1px 0 6px 1px;
    -ms-box-shadow: #0088CC 1px 0 6px 1px;
    -webkit-box-shadow: #0088CC 1px 0 6px 1px;
    box-shadow: #0088CC 1px 0 6px 1px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

#progress dt {
    opacity: .6;
    width: 180px;
    right: -80px;
    clip: rect(-6px,90px,14px,-6px);
}

#progress dd {
    opacity: .6;
    width: 20px;
    right: 0;
    clip: rect(-6px,22px,14px,10px);
}  

js :

$(document).ajaxStart(function() {
//only add progress bar if added yet.
  if ($("#progress").length === 0) {
    $("body").append($("<div><dt/><dd/></div>").attr("id", "progress"));
    $("#progress").width((50 + Math.random() * 30) + "%");
  }
});

$(document).ajaxComplete(function() {
//End loading animation
    $("#progress").width("101%").delay(200).fadeOut(400, function() {
      $(this).remove();
    });
});

참고 URL : https://stackoverflow.com/questions/15824909/curious-about-the-new-way-youtube-is-loading-pages