'unload' 이벤트는 이제 사용하지마세요

Never use unload event

'unload' 이벤트는 이제 크롬에서 점차 실행되지 않도록 변경된다고 합니다. 도대체 왜 사라지는것이며, unload 이벤트를 대체할수있는 이벤트에는 무엇이 있을까요? 

1. Background 

unload 이벤트는 말그대로 페이지가 unload 될때 실행되도록 설계되었습니다. 이론적으로 사용자가 페이지에서 다른페이지로 이동할때마다 실행되었습니다. unload 이벤트가 가장 일반적으로 사용되는 시나리오는 다음과 같습니다. 

•  Saving user data: 페이지에서 나가기전에 데이터를 저장한다. 
•  Performing cleanup tasks: 페이지를 끝내기전에 열려있는 리소스를 제거한다. 
•  Sending analytics: 페이지 종료시 사용자 상호작용과 관련된 데이터를 전송한다. 

하지만 unload 이벤트는 매우 불안정합니다. 데스크탑 Chrome 및 firefox에서의 unload 이벤트는 안정적이지만, bfcache의 사용을 방지하여 사이트 성능에 부정적인 영향을 미칩니다.

또한 모바일 브라우저에서는 탭이 백그라운드에서 실행되다가 종료되는 경우가 많기때문에 unload 이벤트 자체가 실행되지 않는 경우가 많습니다. 이러한 이유때문에 모바일에서는 unload보다 bfcache의 우선순위를 높게 책정하여 더더욱 unload 이벤트를 불안정하게 만듭니다. 

따라서 크롬팀에서는 unload 이벤트를 완전히 제거하는것을 목표로 하고있습니다. 당장 이벤트를 없애는 것은 아니지만, unload 이벤트 자체를 명시적으로 다시 활성화하지않는한 unload 이벤트의 실행을 중지하도록 기본값을 변경하여 점진적으로 없애겠다고합니다. 

※ bfcache(Back/forward cache)
사용자가 이동하는 동안 페이지의 전체 스냅샷을 저장하는 in-memory 캐시. 전체페이지가 저장되어있기때문에 사용자가 다시 페이지로 돌아올경우에 빠르게 복원을 가능하게 한다. 

 

2. Page LifeCyle

그렇다면 unload 이벤트 대신에 사용할수있는 이벤트에는 무엇이 있을까요? 그전에 Page Lifecycle을 한번 간략하게 살펴보고 가도록 하겠습니다. 

Page Lifecycle

모든 페이지 상태는 개별적이고 상호배타적이기때문에, 한페이지에는 한번에 한가지의 상태에만 있을수 있습니다. 

• Active: 페이지가 표시되고, 입력이 활성화된 상태
• Passive: 페이지가 표시되어있지만, 입력포커스는 없는상태 
• Hidden: 페이지가 표시되지않고 숨겨진상태. 종료된것은 아닌상태
• Terminated: 페이지가 브라우저에서 사라지면서 메모리에서 지워진 상태. 

 

3. Alternatives to 'unload' events 

unload 이벤트를 대신해서 쓸 수있는 이벤트는 visibilitychange와 pagehide가 있습니다. 

• visibilitychange: 페이지의 가시성이 변경되는 시점을 파악합니다. 사용자가 탭을 전환하거나, 브라우저 창을 최소화하거나, 새 페이지를 열때 발생합니다. 숨겨진 상태를 마지막으로 신뢰할수있는 이벤트라고 할수있습니다. 
• pagehide: 사용자가 페이지에서 벗어난 시점을 파악합니다. 사용자가 페이지에서 다른곳으로 이동하거나, 페이지를 다시 로드하거나, 브라우저 창을 닫을때 발생합니다. 페이지가 단순히 최소화되거나 다른탭으로 전환된 경우에는 발생하지 않습니다. 

beforeunload event caution

beforeunload 이벤트도 페이지가 언로드되기 이전에 일어나기는하지만, unload이벤트와 마찬가지로 bfcache의 사용을 방지한다는 문제가 있습니다. 하지만 beforeunload는 unload와는 다르게 취소가능한 이벤트라는 점에 주목할 필요가 있는데요, 이때문에 저장되지않는 변경사항을 사용자에게 경고하는데에 사용됩니다. 크롬에서도 오직 이 용례에 한해서만 사용하라 라고 가이드하고있습니다. 

 

4. Detect usage of 'unload'

unload 이벤트핸들러를 사용하고있는지는 lighthouse와 chrome devtools를 통해 확인이 가능합니다. 

1) Lighthouse: 라이트하우스 테스트를 실행한후 결과를 보면, 페이지의 자바스크립트가 unload이벤트 리스너를 추가하는경우 경고문구를 확인할수있습니다. 

2) Chrome Devtools: Application tab의 "Test back/forward cache"를 이용하여 테스트를 하면, 경고문구를 확인할수있습니다. 

 

Reference.

- https://developer.chrome.com/blog/deprecating-unload/

Deprecating the unload event - Chrome for Developers

- https://developer.chrome.com/articles/page-lifecycle-api/

Page Lifecycle API - Chrome for Developers

- https://web.dev/articles/bfcache?hl=ko#never_use_the_unload_event

뒤로-앞으로 캐시  |  Articles  |  web.dev