옵서버(observer)는 관찰자 또는 감시자라는 의미이며 웹 클라이언트에서 지정된 대상을 감시하는 기술을 나타낸다.
사실 이 기술이 소개되기 전까지는 이벤트 기반으로 기능을 구현하였고 그것이 당연한 듯 하였다. 하지만 이벤트 기반의 구현은 이벤트 범주 내에서 기능을 설계해야 하고 효율성 측면에서도 성능 저하를 만드는 요인이 되었다.
오늘날의 웹은 매우 동적인 UI 구현을 요구하고 있다. 높은 하드웨어 성능으로 인한 소프트웨어적인 퍼포먼스는 어느 정도까지는 기대할 수 있지만 그 한계를 넘게 되면 소프트웨어 성능이 매우 나빠진다.
옵서버 기술은 이러한 근본적인 문제를 해결하고자 제시되었으며 현재 다음의 API를 제공하고 있다.
Intersection Observer API는 상위 요소 또는 최상위 문서의 뷰포트(viewport)와 대상 요소 사이의 변화를 비동기적으로 관찰할 수 있는 수단을 제공한다.
지정된 루트(root) 내에서 설정된 가시성 비율이 자신의 주시 대상 중에서 나타나는지 감지하는 수단을 제공한다.
객체의 인스턴스(instance)를 생성하기 위한 생성자 함수를 지원한다.
새로운 IntersectionObserver 객체를 생성한다.
관찰 대상의 요소를 포함하는 컨테이너(루트)의 실제 교차 사각형 영역을 나타낸다.
관찰 대상 요소가 가시적인 범위 내에 보여지는 비율인 임계값을 나타낸다.
관찰자의 모든 가시성 변화 감지 대상을 해제한다.
가시성 관찰 대상으로 요소를 추가한다.
마지막 교차 알림(명시적 takeRecords() 메소드 호출 또는 감지에 따라 자동 콜백 함수 호출) 이후 교차 영역에 변화가 생긴 요소들의 집합을 반환한다.
지정된 요소를 관찰 대상에서 제거한다.
가시성 전환이 발생하는 순간에 대상 요소와 루트 컨테이너 사이의 교차점을 설명한다.
직접적인 생성자는 없으며 관찰자에 의해서 가시성 변경이 관찰되면 콜백 함수에게 전달되거나 IntersectionObserver.prototype.takeRecords() 메소드에 의해 반환받는다.
감지 대상 요소를 포함하는 사각형을 설명하는 DOMRectReadOnly 객체를 반환한다.
가시성 감시 대상 요소가 가시성 변화가 감지될 때 현재 루트 교차로 비율 내에서 0.0에서 1.0 사이의 값으로 얼마나 많이 보이는지를 조회한다.
현재 교차되는 투르 내에서 볼 수 있는 대상 요소의 전체 부분을 포함하는 가장 작은 사각형을 설명하는 DOMRectReadOnly 객체를 참조한다.
가시성 감시 대상 요소가 루트와 교차여부를 나타낸다.
루트 교차 사각형에 해당하는 DOMRectReadOnly 객체를 참조한다.
어떤 가시성 감시 대상 요소가 루트와 교차 정도를 변경했는지 나타낸다.
문서가 생성된 시간을 기준으로 교차 변경이 발생한 시간을 나타내는 DOMHighResTimeStamp 객체를 나타낸다.
