의견 : HTML5는 매우 "특별한"API 페이지 가시성을 출시했습니다. 특별한 이유는이 API가 브라우저 태그 (탭)가 활성화되었는지 여부에 관계없이주의를 기울이는 기능에 중점을두기 때문입니다.
이 "활성화"는 태그가 사용자가 탐색하는지 또는 현재 태그인지 여부를 나타내는 것으로 설명해야합니다.
그렇다면이 API의 목적은 무엇입니까? 일반적으로 사용자가 활성화하지 않으면 많은 기존 페이지가 계속 작동합니다. 예를 들어, 사용자가 뉴스 포털을 탐색하고 이전에 열린 NBA 게임 페이지가 계속 새로 고침되고 최신 결과를 얻을 때 비디오 웹 사이트는 계속 대역폭 및로드 리소스를 점유합니다. 따라서 불필요한 작업이 너무 많으면 많은 자원 폐기물이 발생합니다. 따라서 이것은 매우 유용합니다.
1. 웹 프로그램은 사용자가시기 적절한 정보를 얻을 수 있도록 페이지 정보를 가끔씩 자동으로 업데이트합니다. 그러나 사용자가 다른 페이지를 탐색 할 때 업데이트를 일시 중지하도록 제어 할 수 있습니다.
2. 비디오 웹 사이트에서 온라인 비디오가 재생되면 비디오가로드 될 때까지 비디오를 지속적으로로드합니다. 그러나 사용자가 다른 페이지를 탐색 할 때 대역폭을 저장하기 위해 비디오 리소스로드를 일시 중지 할 수 있습니다.
3. 웹 사이트 홈페이지에는 자동으로 재생되는 큰 슬라이드가 있습니다. 사용자가 다른 페이지를 탐색하면 재생을 일시 중지 할 수 있습니다.
따라서 페이지 가시성을 통해 다음과 같은 이점 중 하나 이상을 달성 할 수 있습니다.
1. 서버 리소스를 저장합니다. Ajax 폴링은 종종 무시됩니다. 이 요청을 닫으면 리소스를 저장할 수 있습니다.
2. 메모리 소비를 저장하십시오.
3. 저장 대역폭 소비.
따라서 페이지 가시성을 사용하는 것은 사용자와 서버 모두에게 유리합니다.
다음 으로이 API를 공식적으로 소개하겠습니다. 페이지 가시성은 브라우저의 문서 개체에 숨겨진 두 가지 속성과 가시성을 추가합니다. 현재 태그가 활성화되면 Document.Hidden의 값은 false입니다. 그렇지 않으면 true. VisibilityState에는 4 가지 가능한 값이 있습니다.
1.hidden : 브라우저를 최소화하고 태그를 전환하고 컴퓨터 화면을 잠그면 가시성 상태 값이 숨겨져 있습니다.
2. Visible : 브라우저의 최상위 컨텍스트에 대한 문서가 하나 이상의 화면에 표시되면 가시를 반환합니다. 브라우저 창이 최소화되지 않지만 다른 응용 프로그램에 의해 브라우저가 차단되면 표시됩니다.
3. Prerender : 문서가 화면 외부에로드되거나 보이지 않을 때 Prerender를 반환합니다. 이것은 필수 부동산이 아닌 속성이며 브라우저는 선택적으로이를 지원할 수 있습니다.
4. 배치 : 문서가 남아있을 때 (언로드)로드되며 브라우저는이 속성을 선택적으로 지원할 수 있습니다.
또한, 가시성 체인지 이벤트는 문서에 추가되며, 문서의 가시성이 변경 될 때 트리거됩니다.
좋아, 속성을 도입 한 후, 사용 예제를 넣고 (코드를 복사하여 HTML 파일에 저장하고, 태그를 전환하여 열린 후 효과를 테스트하십시오).
<! doctype html>
<html lang = "zh-cn">
<헤드>
<meta charset = "utf-8" />
<title> 테스트 html5 페이지 가시성 API </title>
</head>
<body> </p> <p> <div> </div>
<cript>
기능 브라우처 (browserkernel) () {
var 결과;
[ 'webkit', 'moz', 'o', 'ms']. foreach (function (prefix) {</p> <p> if (typeof document [prefix + 'hidden']! = 'undefined') {
결과 = 접두사;
}
});
반환 결과;
}
함수 init () {
접두사 = Browserkernel ();
var showtip = document.getElementById ( 'showtip');
document.addeventListener (prefix + 'VisibilityChange', function onvisibilitychange (e) {
var tip = null;
if (document [prefix + 'VisibilityState'] == 'hidden') tip = '<p> 페이지 </p>';
else if (document [prefix + 'VisibilityState'] == 'visible') tip = '<p> 페이지를 입력하십시오 </p>';
showtip.innerhtml = showtip.innerhtml + 팁;
});
}
Window.onload = init ();
</스크립트>
</body>
</html>
이 예제의 목적은 태그의 가시성이 변경 될 때 태그의 가시성이 변경 될 때 프롬프트를 생성하는지 모니터링하는 것입니다.
현재 브라우저는 개인 속성을 통해 페이지 가시성을 지원한다는 점에 주목할 가치가 있습니다. 따라서 페이지 가시성에 따라 제공되는 속성을 감지하거나 활용할 때 브라우저 개인 접두사를 추가해야합니다. 예를 들어, Chrome에서 위의 VisibilityState 속성을 감지 할 때 Document.visabilityState 대신 Document.WebKitvisabilityState를 감지해야합니다. 따라서 데모는 먼저 브라우저 유형을 감지 한 다음 페이지 가시성 API를 사용합니다.