웹 앱 관찰 - 빠른 정리

웹 개발자로서 우리는 웹 앱의 변경 사항을 감지하고 이러한 변경 사항을 기반으로 조작을 수행하기 위해 많은 코드를 작성합니다. 오늘날 웹에는 다양한 유형의 변경 사항에 대해 웹 앱을 "관찰"하고 이를 기반으로 작업을 수행할 수 있는 많은 API가 있습니다.

다음은 빠른 정리입니다.

1. 이벤트 리스너를 통한 DOM 관찰

addEventListener 를 사용하여 변경 사항을 감지하는 가장 고전적인 방법입니다. 이것은 네이티브 및 사용자 정의 이벤트를 수신하는 데 사용할 수 있습니다.

window.addEventListener('scroll', e => { ... });  // user scrolls the page.

el.addEventListener('focus', e => { ... });  // el is focused.

img.addEventListener('load', e => { ... });  // img is done loading.

el.addEventListener('custom-event', e => { ... });  // catch custom event fired on el.

2. DOM 트리 수정 확인

MutationObserver 인터페이스는 DOM 트리에 대한 변경 사항을 감시하는 기능을 제공합니다.

var target = document.querySelector('#div_id');

var observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        console.log(mutation.type);
    });
});

var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
} 
observer.observe(target, config);

3. 요소가 언제 표시되는지 확인

Intersection Observer API은 페이지의 요소가 표시될 때 트리거되는 콜백을 보고 등록하는 쉬운 방법을 제공합니다.

const images = document.querySelectorAll('.animate');

observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      console.log('in the view');
    } else {
      console.log('out of view');
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

이 API를 사용하여 애니메이션, 지연 로드 이미지 등이 표시될 때 트리거할 수 있습니다.

4. DOM의 요소 크기가 조정되는지 확인

ResizeObserver을 사용하면 요소의 크기가 변경될 때 알림을 받을 수 있습니다.

const myObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log('width', entry.contentRect.width);
    console.log('height', entry.contentRect.height);
  });
});

const el = document.querySelector('.some-element');
myObserver.observe(el);

각 항목에서 contentRect 및 target 속성이 있는 객체를 얻습니다. 대상은 DOM 요소 자체이고 contentRect는 다음 속성을 가진 객체입니다.

5. 웹 앱이 전체 화면 모드인지 확인

Fullscreen API을 사용하면 가능합니다.

var el = document.getElementById("myvideo");
if (el.requestFullscreen) {
  el.requestFullscreen();
}

전체 화면 모드 감지뿐만 아니라 이 API를 통해 전체 화면 모드를 켜고 끌 수도 있습니다.

6. 탭에 포커스가 있는지 확인

document.addEventListener('visibilitychange', e => {
    if(document.hidden) {
        // .... do something
    } else {
        // .... dome something else
    }
});

나는 이것이 새로운 API가 아니라 오히려 기술이더라도 이것을 목록에 포함하고 있습니다. 한 가지 사용 사례는 사용자의 주의를 버려진 탭으로 다시 끌어들이는 것입니다.

7. 장치 방향 변경 확인

Screen Orientation API이 이것을 가능하게 합니다.

window.addEventListener('orientationchange', e => {
  console.log(screen.orientation.angle, screen.orientatio.type)
});

또한 현재 방향이 특정 방향과 일치하는지 확인할 수 있습니다.

const media = window.matchMedia('(orientation: portrait)');
media.addListener(mql => console.log(mql.matches));

8. 네트워크 상태 및 변경 사항 확인

Network Information API은 사용자의 네트워크 연결에 대한 정보를 제공합니다. 이 정보를 사용하여 이미지, 비디오, 글꼴 및 기타 리소스를 조건부로 로드할 수 있습니다.

navigator.connection.addEventListener('change', e => {
  console.log(navigator.connection.effectiveType, navigator.connection.downlink);
});

위에서 언급한 속성 width 및 height 외에도 x , y , top , bottom 도 제공합니다.

9. 기기 배터리 상태 확인

이것은 Battery Status API.을 사용하여 가능합니다.

navigator.getBattery().then(battery => {
  console.log(
    battery.level * 100 + '%',
    battery.charging,
    battery.chargingTime,
    battery.dischargingTime
    ); 
});

10. 웹 앱이 더 이상 사용되지 않는 API를 사용하거나 브라우저 개입에 도달했는지 확인

Reporting API은 이를 가능하게 합니다.

const observer = new ReportingObserver((reports, observer) => {
  reports.map(report => {
    console.log(report);
    // ..... send report to analytics etc..
  });
}, {buffered: true});

observer.observe();

현재 left 최신 Chrome에서만 배송되었다고 생각합니다.

11. 웹 앱의 성능 확인

PerformanceObserver 인터페이스는 성능 측정 이벤트를 관찰하고 브라우저의 성능 타임라인에 기록되는 새 성능 항목에 대한 알림을 받는 데 사용됩니다.

const observer = new window.PerformanceObserver(list => {
    list.getEntries().forEach(({name, startTime}) => {
        console.log({name, startTime});
    });
});
observer.observe({
    entryTypes: [{'paint', 'resource', 'mark', 'measure'}]
});

웹에 우리가 사용할 수 있는 훌륭한 API가 많다는 사실이 정말 놀랍습니다. 이를 사용하여 더 나은 성능과 더 나은 사용자 경험을 제공하는 웹 앱을 만들 수 있습니다.

참고: 최신 API를 사용하기 전에 항상 브라우저 지원을 확인하십시오.

유용한 리소스

Lazy Loading Images for Performance Using Intersection Observer

Use Network Information API to Improve Responsive Websites

ResizeObserver Sample

PerformanceObserver and Paint Timing API