[온라인 쇼핑몰 속도 최적화] 언로드 이벤트 리스너 피하기

 

✍️ 목 차

1. 언로드 이벤트 리스너를 피하면 페이지 성능에 미치는 영향
2. 언로드 이벤트 리스터를 수정하는 방법

 

 

 

unload 이벤트 리스너는 웹 페이지가 닫히거나 다른 페이지로 이동할 때 실행되는 JavaScript 코드 조각입니다. 

이 코드는 주로 일부 정리 작업을 수행하거나 사용자에게 추가적인 메시지를 표시하는 데 사용됩니다. 그러나 이벤트 리스너를 지나치게 사용하면 웹 페이지의 성능과 사용자 경험이 저하될 수 있습니다.

"BFCache"는 "Back-Forward Cache"의 약자로, 브라우저의 뒤로 및 앞으로 버튼을 사용할 때 페이지를 빠르게 로드하기 위해 사용되는 메모리 내 브라우저 캐시입니다. 이렇게 하면 뒤로 가기 또는 앞으로 가기 버튼을 클릭할 때 이전 페이지 또는 다음 페이지가 거의 즉시 로드됩니다.

페이지의 JavaScript가 unload 이벤트 리스너 를 사용 하는 경우 bfcache가 비활성화 됩니다. 즉, 즉각적인 앞뒤 탐색이 불가능하여 방문자의 페이지 경험이 저하됩니다.

 

 

---

 

💡 언로드 이벤트 리스너를 피하면 페이지 성능에 어떤 영향을 줍니까?

 

unload 이벤트 리스너를 피해야 메모리 내 브라우저 캐시(bfcache)를 이용하여 페이지(JavaScript 힙 포함)의 전체 스냅샷을 저장하고 탐색하는 이점을 얻을 수 있습니다.

간단히 말해서, 이것은 페이지를 "중지"하고 다른 곳으로 이동한 후 다시 "재개"하는 것과 유사합니다.

 

우리는 모두 한 페이지를 방문한 후 링크를 클릭하여 다른 페이지로 이동하는 상황에 처했습니다. 그러나 그 페이지가 우리가 진정으로 원하는 페이지가 아니라는 것을 깨닫고, 뒤로 버튼을 클릭하여 첫 번째 페이지로 돌아갑니다.

 

 

자세한 사항은 아래 링크를 참고하시기 바랍니다.                                                                          <출처 : 유튜브>
https://www.youtube.com/watch?v=cuPsdRckkF0&t=10s

위의 예에서 bfcache를 사용하는 페이지는 사용하지 않는 페이지보다 훨씬 빠르게 로드됩니다.bfcahce에 대해서 더 자세히 내용을 원하시면 참조하세요

 

브라우저가 unload 이벤트 핸들러를 만나면, 해당 핸들러에 저장된 JavaScript가 bfcache로 복원된 후 페이지에 문제가 발생할 수 있습니다. 이를 방지하기 위해 bfcache를 비활성화합니다.

즉, 브라우저는 페이지가 앞뒤 상태 사이에서 기능을 유지하도록 하기 위해 unload 이벤트 핸들러를 발견하면 bfcache를 활성화하지 않도록 선택합니다.

1. 빠른 페이지 로딩 (Faster Page Loading)

언로드 이벤트 리스너를 피하면 웹 페이지가 더 빨리 로드됩니다. 이유는 이벤트 리스너가 페이지 닫힘 또는 다른 페이지로 이동할 때 추가 작업을 수행하지 않기 때문입니다.

2. 사용자 경험 향상 (Improved User Experience)

빠른 페이지 로딩은 사용자 경험을 향상시킵니다. 사용자는 페이지를 더 빨리 볼 수 있고, 느린 로딩 시간으로 인한 답답함을 경험하지 않습니다.

3. 최적화된 성능 (Optimized Performance)

언로드 이벤트 리스너를 사용하지 않으면 페이지의 성능이 최적화됩니다. 페이지가 더 빨리 실행되고 반응성이 향상됩니다.

4. 낮은 리소스 사용 (Lower Resource Usage)

언로드 이벤트 리스너가 없으면 페이지가 닫힐 때 메모리 및 CPU 리소스가 덜 사용됩니다. 이는 브라우저의 부담을 줄여주고 다른 탭 또는 애플리케이션에서 더 나은 성능을 제공할 수 있습니다.

5. 웹 사이트 평판 향상 (Improved Website Reputation)

빠른 페이지 로딩과 향상된 사용자 경험은 웹 사이트의 평판을 향상시킬 수 있습니다. 사용자들은 빠르고 신뢰할 수 있는 웹 사이트를 선호합니다.

 

 

요약하면, 
언로드 이벤트 리스너를 피하면 페이지가 더 빠르게 로드되고 사용자 경험이 향상되며 성능이 최적화됩니다. 따라서 웹 개발자는 이벤트 리스너를 필요한 경우에만 사용하고, 불필요한 작업을 피하여 웹 페이지의 빠른 로딩을 유지하는 것이 중요합니다.

 

 

최신 브라우저에서 unload 이벤트를 사용하면 거의 즉각적인 앞뒤 탐색이 중단됩니다.

 

bfcache는 브라우저의 HTTP 캐시보다 빠르게 전체 페이지를 검색할 수 있기 때문에 이러한 종류의 탐색(특히 모바일 장치에서)은 페이지 성능에 매우 유익합니다.
unload 이벤트를 페이지에 추가하면 방문자가 브라우저의 뒤로 및 앞으로 버튼을 사용할 때 거의 즉각적인 탐색을 경험할 수 있는 기회를 박탈할 수 있습니다.
또한 페이지에 unload 이벤트를 추가하면 Firefox에서 성능이 느려지고 코드가 Chrome 및 Safari에서 대부분의 시간 동안 실행되지 않을 수도 있습니다.
일반적으로 최신 브라우저에는 사용자가 페이지에서 다른 곳으로 이동할 때 더 나은 방법이 있으므로 unload 리스너를 사용해서는 안 됩니다.

 

---

 

 

💡  이 감사를 수정하는 방법은 무엇입니까?

이 코드를 수정하려면 페이지에서 모든 unload 이벤트 리스너를 제거해야 합니다. unload 이벤트 리스너 대신에는 다른 방법을 사용할 수 있습니다. 다음은 몇 가지 대안입니다

1. beforeunload 이벤트를 사용하는 방법

페이지가 닫히기 전에 작업을 저장하도록 유도할 수 있습니다. 이를 사용하면 사용자가 페이지를 떠날 때 작업을 저장 할  수 있습니다. 예를 들어, 사용자가 양식에 입력한 내용을 저장하거나 변경 내용을 저장하도록 요청할 수 있습니다.

 

 

2. pagehide 이벤트를 사용하는 방법

페이지가 사라지기 시작할 때 발생합니다. 이를 사용하면 페이지를 닫을 때 발생하는 문제를 해결할 수 있습니다. 예를 들어, 사용자가 페이지에서 내용을 삭제할 때 이를 저장하도록 요청할 수 있습니다.

 

3. visibilitychange 이벤트를 사용하는 방법

페이지가 보이지 않거나 사용자가 다른 탭으로 이동할 때 발생합니다. 이를 사용하면 백그라운드에서 페이지가 실행되는 문제를 해결할 수 있습니다. 
visibilitychange 이벤트를 사용하면 페이지가 백그라운드에서 실행될 때 자원을 절약하거나 중단할 수 있습니다. 예를 들어, 사용자가 다른 탭으로 이동할 때 애니메이션을 중지하거나 동영상을 일시 중지할 수 있습니다.

각각의 이벤트를 사용하여 페이지의 동작을 제어하고 사용자 경험을 개선할 수 있습니다. 이러한 방법은 사용자가 페이지를 닫거나 다른 탭으로 이동할 때 추가 작업을 수행하거나 변경할 때 매우 유용합니다.

pagehide 또는 visibilitychange 이벤트 사용에 대한 자세한 내용은 이 외부 리소스 를 참조하세요.