자 바스 크 립 트 를 사용 하여 남 은 브 라 우 저 옵션 을 검사 하 는 방법

어떤 상황 에서 사용자 가 우리 의 최종 제품 이나 응용 프로그램 과 상호작용 을 할 때 우 리 는 자신 이 많은 밀집 적 이 고 대량의 CPU 를 차지 하 는 임 무 를 수행 할 것 이라는 것 을 알 게 되 었 다.폴 더 를 시작 하고 웹 소켓 연결 을 구축 하 며 동 영상 이나 그림 등 미디어 를 불 러 오 는 것 도 성능 장애 가 될 수 있 습 니 다.특히 이 작업 들 이 필요 없 이 자원 을 소모 할 때.
사용자 가 주동 적 으로 인터페이스 와 상호작용 을 하지 않 는 동시에 불필요 한 작업 부하 나 네트워크 요청 에서 메 인 스 레 드 를 방출 하 는 것 은 매우 좋 고 의미 있 는 실천 이다.다른 방식 으로 대부분의 호스트 제공 업 체 가 할당량 을 바탕 으로 하 는 가격 책 정 모델 을 도입 하 는 업계 에서 네트워크 요 구 를 줄 이 는 것 도 응용 프로그램 이나 서 비 스 를 운영 하 는 원 가 를 낮 출 수 있다.

페이지 가시 성(페이지 가시 성)API
모든 현대 웹 브 라 우 저 는 페이지 의 가시 적 API 를 추 가 했 습 니 다.브 라 우 저의 탭 페이지 가 언제 숨겨 졌 는 지 확인 할 수 있 습 니 다.또한,가시 적 인 변 화 를 감지 하기 위해 이벤트 감청 기 를 등록 할 수 있 습 니 다.
document.visibilityState
페이지 가 프론트 에 있 을 때 document.visibility State 는 visible 일 수 있 습 니 다.창의'태그'를 최소 화하 거나 숨 길 수 있 습 니 다.
우 리 는 다음 과 같은 방식 으로 document.visibility State 를 직접 방문 할 수 있 습 니 다.

console.log(document.visibilityState); 
// =>     “visible” “hidden” 

visibilitychange Event
우 리 는 또한 사건 탐지 기 를 사용 하여 가시 성 속성의 변경 사항 을 쉽게 검사 할 수 있다.

const onVisibilityChange = () => { 
 if (document.visibilityState === 'hidden') { 
  console.log('>         .'); 
 } else { 
  console.log('>         .'); 
 } 
}; 
document.addEventListener('visibilitychange', onVisibilityChange, false); 

폴 링 예시
이러한 상황 에서 저 희 는 API 에 문의 하여 업 데 이 트 를 받 고 있 으 며,남 은 사용자 에 게 불필요 한 호출 을 피하 기 를 바 랍 니 다.간단 한 예 는 다음 과 같다.

const poll = () => { 
 const interval = 1500; 
 let _poller = null; 
 const repeat = () => { 
  console.log(`~ Polling: ${Date.now()}.`); 
 }; 
 
 return { 
  start: () => { 
   _poller = setInterval(repeat, interval); 
  }, 
  stop: () => { 
   console.log('~ Poller stopped.'); 
   clearInterval(_poller); 
  } 
 }; 
}; 
 
const poller = poll(); 
poller.start(); 
 
const onVisibilityChange = () => { 
 if (document.visibilityState === 'hidden') { 
  poller.stop(); 
 } else { 
  poller.start(); 
 } 
}; 
 
document.addEventListener('visibilitychange', onVisibilityChange, false); 

배경 에서 비동기 로 불 러 오기
그러나 때때로 우 리 는 그 반대 방향 을 통 해 사용자 의 단말기 체험 을 가속 화 할 수 있다.모든 작업 과 요청 을 취소 하 는 것 이 아니 라 외부 의존 이나 자산 을 비동기 로 불 러 올 수 있 습 니 다.이렇게 하면 사용자 가 돌아 올 때 그들의 최종 체험 은 더욱 충실 하고 풍부 해 질 것 이다.

/ Webpack /
ES 2015 동적 가 져 오기 제안 과 적당 한 Webpack 설정 목록 을 사용 하면 배경 에 추가 모듈 이나 자산 을 쉽게 불 러 올 수 있 습 니 다.

let loaded = false; 
const onVisibilityChange = () => { 
 if (document.visibilityState === 'hidden') { 
  // Aggresively preload external assets ans scripts 
  if (loaded) { 
   return; 
  } 
  Promise.all([ 
   import('./async.js'), 
   import('./another-async.js'), 
   import(/* webpackChunkName: "bar-module" */ 'modules/bar'), 
   import(/* webpackPrefetch: 0 */ 'assets/images/foo.jpg') 
  ]).then(() => { 
   loaded = true; 
  }); 
 } 
}; 
 
document.addEventListener('visibilitychange', onVisibilityChange, false);

/ Rollup /
Rollup 은 상 자 를 열 때 사용 하 는 동적 가 져 오기 도 지원 합 니 다.

let loaded = false; 
const onVisibilityChange = () => { 
 if (document.visibilityState === 'hidden') { 
  // Aggresively preload external assets ans scripts 
  if (loaded) { 
   return; 
  } 
  Promise.all([ 
   import('./modules.js').then(({default: DefaultExport, NamedExport}) => { 
    // do something with modules. 
   }) 
  ]).then(() => { 
   loaded = true; 
  }); 
 } 
}; 
 
document.addEventListener('visibilitychange', onVisibilityChange, false); 

/자 바스 크 립 트 로 미리 불 러 오기/
묶음 기 를 사용 하 는 것 외 에 정적 자원(예 를 들 어 그림)을 미리 불 러 오 는 데 몇 줄 의 JavaScript 만 사용 할 수 있 습 니 다.

let loaded = false; 
const preloadImgs = (...imgs) => { 
 const images = []; 
 imgs.map( 
  url => 
   new Promise((resolve, reject) => { 
    images[i] = new Image(); 
    images[i].src = url; 
    img.onload = () => resolve(); 
    img.onerror = () => reject(); 
   }) 
 ); 
}; 
const onVisibilityChange = () => { 
 if (document.visibilityState === 'hidden') { 
  // Aggresively preload external assets ans scripts 
  if (loaded) { 
   return; 
  } 
  Promise.all( 
   preloadImgs( 
    'https://example.com/foo.jpg', 
    'https://example.com/qux.jpg', 
    'https://example.com/bar.jpg' 
   ) 
  ) 
   .then(() => { 
    loaded = true; 
   }) 
   .catch(() => { 
    console.log('> Snap.'); 
   }); 
 } 
}; 
document.addEventListener('visibilitychange', onVisibilityChange, false); 

작은 상호작용
마지막 으로 사용자 의 주 의 를 끄 는 교묘 한 방법 은 아이콘 을 동적 으로 바 꾸 는 것 이다.몇 개의 픽 셀 만 사용 하면 상호작용 을 유지 할 수 있다.

const onVisibilityChange = () => { 
 const favicon = document.querySelector('[rel="shortcut icon"]'); 
 if (document.visibilityState === 'hidden') { 
  favicon.href = '/come-back.png'; 
 } else { 
  favicon.href = '/example.png'; 
 } 
}; 
 
document.addEventListener('visibilitychange', onVisibilityChange, false); 

총결산
자 바스 크 립 트 를 사용 하여 남 은 브 라 우 저 옵션 카드 를 검색 하 는 방법 에 대한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 js 브 라 우 저 옵션 카드 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!