▲

Obs.js - Context-Aware 웹 성능 도구

 (github.com/csswizardry)
9P by xguru 3일전 | ★ favorite | 댓글과 토론
  • 브라우저 시그널(Navigator, Battery API 등)을 읽어 네트워크 연결 속도, 배터리 상태, RAM·CPU 성능을 추론하여,
    이를 CSS 클래스와 JS 객체로 노출해 컨텍스트의 전달을 어느정도로 해야할지 상황에 맞게 전환하는 도구
  • 즉, 저속 연결이나 저전력 모드에서는 웹폰트·이미지 해상도·비디오 자동재생·애니메이션 등을 제어하여 경량화된 경험 제공이 가능
  • 감지 결과는
    • <html>에 .has-* 형태의 CSS 클래스 제공 : .has-bandwidth-high.has-cpu-medium.has-ram-medium 같은 클래스가 추가됨
    • window.obs 객체에 세부 데이터 저장 : "batteryCharging": true, "cpuCategory": "high"
  • 설치는 반드시 <head> 최상단에 인라인 <script> 로 삽입해야 함
    • 패키지 매니저, 외부 JS 파일 형태로는 실행 불가
  • 데모 참고