pile·
프론트엔드·카테노이드카테노이드·

크롬 브라우저 unload 이벤트 지원 중단

Chrome 120(2023년 말)부터 시작된 unload 이벤트 지원 중단이 웹 개발에 미치는 영향과 대체 전략을 정리한다. 카테노이드 HTML5 미디어 플레이어의 unload 사용 여부 검증 결과도 포함한다.

핵심 포인트
  • Chrome 120부터 unload 이벤트 단계적 폐기 시작, 2025년 중반 완전 제거 예정
  • 보안(악성 스크립트 실행 벡터), 성능(페이지 전환 지연), 모바일 미실행 문제로 폐기 결정
  • sendBeacon() API가 analytics/로그 전송의 공식 대체 수단으로 권장됨
  • pagehide와 visibilitychange 이벤트가 페이지 이탈 감지의 대체 이벤트로 제시
  • jQuery 등 레거시 라이브러리에 사용되지 않는 unload 코드가 남아 있어 향후 제거 대상
상세 정리
  • unload 이벤트는 사용자가 페이지를 떠날 때 발생하는 전통적인 JS 이벤트로, 데이터 저장·정리·analytics 전송에 사용됐다
  • 폐기 배경 1: unload 핸들러가 악의적 스크립트의 추가 공격(무단 데이터 전송, 클릭재킹) 실행 경로로 악용됨
  • 폐기 배경 2: 브라우저가 unload 핸들러를 실행하기 위해 추가 작업을 수행해 페이지 전환 속도 저하(Doherty Threshold 0.4초 기준 위반)
  • 폐기 배경 3: 현대 웹 표준(비동기/점진적 업데이트 패턴)과 충돌
  • 폐기 배경 4: 모바일 환경에서 백그라운드 프로세스로 전환 시 unload가 실행되지 않아 신뢰성 없음
  • pagehide: 사용자가 페이지를 떠날 때 트리거, unload와 유사한 시점이나 보안 프로파일 개선
  • visibilitychange: 탭 전환·백그라운드 전환 포함 가시성 상태 변화 감지
  • sendBeacon(): 비동기 네트워크 전송 보장, 페이지 성능에 영향 없이 analytics 전송 가능
  • Microsoft Edge(동일 엔진)는 다른 타임라인으로 동일 변경 예정, Firefox/Safari는 현재 유지
  • 카테노이드 HTML5 미디어 플레이어는 unload 이벤트를 사용하지 않음을 내부 테스트로 확인
왜 읽나unload 이벤트에 의존하는 analytics나 cleanup 로직을 운영 중인 팀이 Chrome 폐기 전에 sendBeacon()과 pagehide로 마이그레이션하기 위한 실용적 가이드다.
카테노이드
카테노이드 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·여기어때 (GC컴퍼니)여기어때 (GC컴퍼니)·

    항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다

    여기어때 항공 서비스 프론트엔드가 웹과 앱 웹뷰 두 환경에서 동일한 함수 호출로 동작하는 앱 브릿지 추상화 레이어를 설계한 과정을 다룬다. iOS·안드로이드 규약 차이와 "웹에 존재하지 않는 브릿지를 어떻게 호출하나"라는 문제를 단일 추상화 층으로 해결한 구현 사례다.

    요약 이어보기
    #react#typescript#webview+2