페이지 가시성 API 소개

코어 포인트

Page Visibility API를 사용하면 웹 사이트 개발자가 페이지의 현재 가시성 상태를 결정하여 특히 자원이 제한된 모바일 장치의 강력하고 CPU 효율적인 웹 응용 프로그램을 개발할 수 있습니다.

API에는 "VisibilityChange"라는 이벤트와 "숨겨진"및 "VisibilityState"라는 두 개의 읽기 전용 속성이 포함되어 있으며, 이는 페이지가 표시되는지, 숨겨진, 사전 렌더링되었는지 또는 설치되지 않아야하는지 여부를 나타낼 수 있습니다.

Page Visibility API는 일반적으로 모든 브라우저에서 지원되는 것은 아니며, 종종 공급 업체 접두사를 사용하여 지원하는 브라우저는 잠재적 호환 문제를 초래합니다. Visipely.js 및 Isvis.js와 같은 폴리 플릴을 사용 하여이 API를 지원하지 않는 브라우저 간의 간격을 연결할 수 있습니다.
• Page Visibility API 실제 사용 사례에는 다음이 포함됩니다. 사용자가 CPU 및 대역폭을 저장하기 위해 데이터 수집 또는 애니메이션을 중지 할 때;
• 모바일 장치는 시원하며 모바일 앱은 더 시원합니다. 불행히도, 모바일 연결은 대부분의 경우 대역폭이 느려지거나 제한적이기 때문에 나쁘다. 특히 사용자가 페이지를 보지 않는 경우 사용자 리소스를 낭비하지 않는 풍부한 웹 애플리케이션이있는 것이 좋습니다. 이 기사에서는 페이지 가시성 API를 사용 하여이 문제와 다른 문제를 부분적으로 해결하는 방법을 보여줍니다. 지난 몇 년 동안 Geolocation API, Navigation Timing API 및 Full Screen API와 같은 일상 업무를 수행하기 위해 몇 가지 새롭고 훌륭한 API가 도입되었습니다. Page Visibility API [
웹 사이트 개발자가 강력하고 CPU 효율적인 웹 응용 프로그램을 개발하기 위해 페이지의 현재 가시성 상태를 프로그래밍 방식으로 결정할 수있는 메소드를 정의합니다.] 2012 년 7 월 26 일 이후 W3C 후보 권고가되었으므로 안정적으로 간주됩니다. 궁금한 점은 성능을 향상시키고 대역폭을 절약하는 방법입니다. 5 초마다 데이터를 앞뒤로 전송하는 훌륭한 Ajax 기반 웹 응용 프로그램이 있다고 상상해보십시오. 응용 프로그램이 실행중인 동안 브라우저 태그를 배경으로 전송하는 경우 5 초마다 데이터를 전송하며 사용자가 10 분 후에 태그를 전경에 넣는 경우에도 마찬가지입니다. 응용 프로그램이 업데이트가 느려 지거나 사용자가 페이지를 다시 확인할 때까지 업데이트를 중지하면 좋지 않습니까? 이것은 리소스 최적화가있는 곳과 페이지 가시성 API가 핵심 역할을하는 곳입니다.
페이지 가시성 구성 api
의 구성이 API는 매우 간단합니다. 실제로 VisibilityChange라는 하나의 이벤트와 두 개의 읽기 전용 속성이 숨겨져 있고 가시성은 문서에 속합니다. "Hidden"은 부울 값이며, 페이지가 표시되지 않는 경우 (가장 작은 부분) 태그가 백그라운드에있을 때 또는 브라우저가 최소화 될 때 발생합니다. 이 규칙에는 전체 화면 모드에서 실행되는 접근성 도구에 대한 예외가 있습니다. 자세한 내용은 숨겨진 사양을 읽을 수 있습니다. "VisibilityState"는 문서의 현재 상태를 지정하고 다음 값을 포함하는 열거입니다.

<:> 숨겨진 : 문서는 완전히 보이지 않습니다 가시 : 문서 또는 일부가 표시 입니다 <:> Prerender : 문서가 화면에서로드 중이며 표시되지 않음 <:> 언로드 : 문서가 제거 될 예정입니다

마지막 두 값 프레 렌더와 언로드는 선택 사항입니다. 또한 숨겨진 속성과 마찬가지로 보조 기술의 숨겨진 가치에 대한 예외가 있습니다.
호환성
현재, 이러한 API를 지원하는 브라우저는 많지 않으며 이러한 API를 지원하는 브라우저는 여전히 공급 업체 접두사를 사용합니다. 작업 코드가 있도록 모든 접두사를 관리해야하므로 지원 문제가 발생합니다. 현재 페이지 가시성 API를 지원하는 데스크탑 브라우저에는 Chrome 13, Internet Explorer 10, Firefox 10 및 Opera Beta 12.10이 포함됩니다. 이 API를 지원하는 모바일 브라우저에는 Android 4.0의 Chrome 및 Android 및 Symbian의 Opera Mobile 12.1 (Source MobileHtml5.org - Android 4.0에서 직접 테스트)이 포함됩니다. 약간 성가신 것은 Camelcase 컨벤션으로 인해 속성에 공급 업체 접두사가있는 경우 실제 속성 이름이 대문자이며 접두사, 소문자가 없으면 소문자가 없다는 것입니다. 명확성을 위해, 숨겨진 속성을 예로 들어 봅시다. 소문자로 시작하지만 접두사가있는 경우 대문자 "H"로 시작하므로 지원을 테스트하기 위해 다음과 유사한 코드를 작성할 수 없습니다.
• 아래 그림과 같이 케이스를 분할하거나 문자열에 대한 트릭을 사용해야합니다.
// refixed 버전을 테스트합니다 if (document.hidden! == 정의되지 않은) // 여기에 코드를 추가합니다 또 다른 { // 접두사 버전을 테스트합니다 var browserprefixes = [ "webkit", "moz", "ms", "o"]; for (var i = 0; i & lt; browserprefixes.length; i) { if (document [browserprefixes [i] "hidden"]! == undefined) { // 여기에 코드를 추가합니다 부서지다; } } } <.> 다른 API와 마찬가지로, 다른 API와 마찬가지로, 이들 API를 지원하지 않는 브라우저에서 이러한 API를 사용하기 위해 많은 폴리 ​​플릴이 해제되었습니다. 이 폴리 플릴 중 일부는 가시적입니다 .js 및 isvis.js.
(다음 내용은 원래 코드 스 니펫 및 예제를 다시 작성하여 함수를 변경하지 않고 코드 최적화 및 주석 향상)
입니다.
(원본 텍스트의 긴 코드 예제 및 설명은 여기에서이 부분이 의사 원리 목표와 일치하지 않고 너무 길기 때문에 여기서 생략됩니다. 필요한 경우 간소화 된 코드 예제가 제공 될 수 있습니다.) >

결론

이 기사에서는 페이지 가시성 API의 기능과이를 사용하는 방법을 보여줍니다. W3C 직원이 모바일 장치 (리소스 및 연결 대역폭을 절약하는 것뿐만 아니라)를 돕기위한 의도는 실제로 칭찬 할 수 있으며 곧 널리 사용할 수 있기를 바랍니다.

보시다시피,이 API는 두 개의 속성과 하나의 이벤트만으로 매우 간단하므로 웹 애플리케이션을 개선하기 위해 몇 분 안에 사용을 시작할 수 있습니다.

그러나 그러나 현재 브라우저에서 지원이 좋지 않기 때문에 신뢰할 수 없으므로 PolyFill을 사용해야합니다.

JavaScript API에 관심이 있으시면 Sitepoint Network의 최신 웹 사이트… JSPRO의 API 섹션을 확인하십시오.

(원본 텍스트의 긴 FAQ 부분은이 부분이 의사 원리 목표와 일치하지 않고 너무 길기 때문에 여기서 생략됩니다. 필요한 경우 간소화 된 FAQ 예제가 제공 될 수 있습니다.)

<.>

위 내용은 페이지 가시성 API 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!