페이지 표시 유형

참고  JavaScript로 작성된 Windows 8의 Windows 스토어 앱의 경우 표시 유형 API가 제대로 작동하지 않을 수 있습니다.

Internet Explorer 10은 페이지 표시 유형 API를 새롭게 지원합니다. 이 API를 통해 개발자는 프로그래밍 기술을 사용하여 문서의 현재 표시 유형을 확인하고 표시 유형이 바뀔 때 알림을 받을 수 있습니다. 페이지의 표시 상태를 모를 경우 웹 개발자는 항상 보인다는 가정 하에 웹 페이지를 디자인해야 합니다. 이 경우 시스템 리소스 사용량이 늘어나고 웹 개발자는 해당 웹 페이지를 사용자가 볼 수 있는지 여부를 토대로 런타임 의사 결정을 내릴 수 없게 됩니다.

페이지 표시 유형 API

웹 페이지를 디자인할 때 페이지 표시 유형을 알면 사용자 환경이 개선되고 사이트의 전력 효율이 좋아집니다. 페이지 표시 유형 API를 통해 다음이 가능해집니다. 페이지 표시 유형 API는 다음 두 가지 속성으로 구성됩니다.

속성설명

document.hidden

페이지가 표시되는지 여부를 설명하는 부울 값입니다.

document.visibilityState

페이지 표시 유형 상태를 반환합니다. 값은 PAGE_VISIBLE, PAGE_PREVIEW 등입니다.

 

또한 페이지 표시 유형 API는 다음 이벤트를 노출합니다.

이벤트설명

visibilitychange

페이지의 표시 유형 상태가 변경될 때마다 발생하는 이벤트입니다.

 

이 API를 사용하면 웹 응용 프로그램이 사용자에게 표시되는지 여부에 따라 동작을 변경할 수 있습니다. 페이지가 더 이상 표시되지 않는 경우 이 API를 사용하여 작업 크기를 축소할 수 있습니다. 예를 들어 웹 기반 메일 클라이언트가 표시되는 경우 몇 초 간격으로 서버에서 새 메일을 확인할 수 있습니다. 숨겨진 경우에는 몇 초가 아니라 몇 분 간격으로 메일을 확인하도록 작업 크기가 축소될 수 있습니다. 이 API를 사용하여 전원 관리와 관련 없는 상황에서 보다 효율적인 사용자 환경을 제공할 수도 있습니다. 예를 들어 사용자에게 더 이상 퍼즐 게임이 표시되지 않는 경우 해당 게임을 일시 중지할 수 있습니다. 마찬가지로, 광고주는 이 API를 사용하여 광고가 사용자에게 표시되지 않을 경우 요금이 부과되지 않도록 할 수 있습니다.

코드 예제

다음 JavaScript 예제는 페이지가 표시되는지 여부를 모르는 상태에서 메일을 확인하는 기술을 보여 줍니다. 이 코드는 페이지가 표시되지 않아 사용자가 페이지를 보지 않는 경우에도 항상 1초 간격으로 메일을 확인합니다. 이것은 비효율적인 리소스 관리의 예입니다.


<!DOCTYPE html>
<html>
<head>
  <script>
   var timer = 0;
   var PERIOD = 1000;   function onLoad() {
       timer = setInterval(checkEmail, PERIOD);
   }
   function checkEmail() { 
       // Check server for new emails
   }
  </script>
</head>
<body onload="onLoad()">
</body>
</html>


페이지 표시 유형을 알면 페이지가 표시되지 않을 경우 메일 확인 빈도를 줄일 수 있기 때문에 리소스 관리가 향상됩니다. 다음 코드는 페이지 표시 유형을 사용하여 페이지가 표시될 경우 1초 간격으로 새 메일을 확인하고 표시되지 않을 경우 1분 간격으로 확인하는 기술을 보여 줍니다.


<!DOCTYPE html>
<html>
<head>
  <script>
   var timer = 0;
   var PERIOD_VISIBLE = 1000;
   var PERIOD_NOT_VISIBLE = 60000;
   function onLoad() {
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
       if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
   }  
   function visibilityChanged() {
       clearTimeout(timer);
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
   }  
   function checkEmail() { 
       // Check server for new emails
   }
  </script>
</head>
<body onload="onLoad()">
</body>
</html>


API 참조

hidden
visibilitychange
visibilityState

Internet Explorer 테스트 드라이브 데모

페이지 표시 유형 API

IEBlog 게시물

W3C 웹 성능: 성능 투자 계속
웹 성능 API가 빠르게 W3C 후보 권고안으로 제안됨
연간 리뷰: W3C 웹 성능 작업 그룹
HTML5에서 보다 효율적인 PC 하드웨어 사용: 새로운 웹 성능 API, 2부

사양

페이지 표시 유형

 

 

표시:
© 2014 Microsoft