Chrome의 메모리 및 에너지 절약 모드에 대해 개발자가 알아야 할 사항

Philip Walton

Chrome 108에서는 사용자가 Chrome에서 시스템 리소스를 활용하는 방식을 더 세밀하게 제어할 수 있도록 메모리 절약 모드와 에너지 절약 모드라는 두 가지 새로운 모드를 도입했습니다.

이러한 새로운 모드는 주로 사용자를 대상으로 하지만, 사이트의 사용자 환경에 잠재적으로 영향을 미칠 수 있으므로 웹 개발자가 알아두어야 할 중요한 영향이 있습니다.

이 게시물에서는 이러한 새로운 모드가 미칠 수 있는 잠재적 영향과 웹 개발자가 최상의 환경을 제공하기 위해 할 수 있는 일을 다룹니다.

메모리 절약 모드

메모리 절약 모드가 사용 설정되면 Chrome은 백그라운드에서 한동안 사용되지 않은 탭을 사전에 삭제합니다. 이렇게 하면 활성 탭과 실행 중인 기타 애플리케이션을 위한 메모리가 확보됩니다. 사용자는 Chrome에 특정 사이트의 탭을 삭제하지 않도록 지시할 수 있습니다. 하지만 이는 사용자 환경설정이며 개발자가 제어할 수 있는 것이 아닙니다.

탭이 삭제되면 제목과 파비콘은 탭 표시줄에 계속 표시되지만 페이지가 정상적으로 닫힌 것처럼 페이지 자체는 사라집니다. 사용자가 해당 탭을 다시 방문하면 페이지가 자동으로 새로고침됩니다.

순수한 콘텐츠 페이지의 경우 탭을 삭제하고 다시 로드해도 사용자 환경에는 영향을 미치지 않지만 사용자 플로우가 복잡한 대화형 사이트의 경우 흐름 중간에 새로고침하면 사이트에서 사용자가 중단한 바로 그 지점에 페이지를 복원할 수 없으면 매우 불편할 수 있습니다.

메모리를 절약하기 위해 탭을 삭제하는 것은 Chrome이 수년간 해왔던 일이지만 시스템이 메모리 압력을 받는 상황에서만 그렇게 했습니다. 하지만 비교적 드물게 발생하는 일이기 때문에 웹 개발자들은 그 사실을 깨닫지 못했을 수도 있습니다.

Chrome 108부터 탭 삭제가 더 보편화되므로 사이트에서 이러한 상황을 적절하게 처리할 수 있어야 합니다.

탭 삭제 처리 권장사항

탭 삭제는 웹 개발자에게 새로운 과제가 아닙니다. 사용자가 작업을 완료하기 전에 의도적으로 또는 실수로 페이지를 새로고침하는 것은 언제든지 가능합니다. 따라서 사이트에서 사용자 상태를 저장하여 사용자가 떠났다가 다시 돌아왔을 때 복원할 수 있도록 하는 것이 항상 중요합니다.

가장 중요한 고려사항은 사용자 상태를 저장할 때문이 아니라 저장할 시점입니다. 탭이 삭제될 때 발생하는 이벤트가 없으므로 개발자가 이러한 문제가 발생한다는 사실에 반응할 방법이 없으므로 이 점이 중요합니다. 대신 개발자는 이러한 가능성을 예상하고 미리 대비해야 합니다.

사용자 상태를 저장하는 데 가장 적합한 시기는 다음과 같습니다.

• 상태가 변경될 때 주기적으로 확인합니다.
• 탭이 백그라운드로 전환될 때마다 (visibilitychange 이벤트)

상태를 저장하기에 최악의 시간은 다음과 같습니다.

• beforeunload 이벤트 콜백에서.
• unload 이벤트 콜백에서.

이는 상태를 저장하기에 최악의 시간입니다. 이러한 이벤트는 완전히 신뢰할 수 없고 탭이 삭제되는 경우를 포함하여 많은 상황에서 실행되지 않기 때문입니다.

페이지가 삭제될 때 실행될 것으로 예상되는 이벤트를 확인하려면 페이지 수명 주기 이벤트 다이어그램을 참고하세요. 이 다이어그램에서 볼 수 있듯이 이벤트가 실행되지 않은 상태에서 탭을 '숨김' 상태에서 '삭제됨' 상태로 전환할 수 있습니다.

실제로 페이지가 '숨김' 상태가 될 때마다 브라우저에서 페이지가 삭제되거나 사용자가 종료하기 전에 다른 이벤트가 실행된다는 보장이 없습니다. 따라서 저장되지 않은 사용자 상태를 항상 visibilitychange 이벤트에 저장하는 것이 중요합니다. 다시 한 번 더 기회를 얻지 못할 수도 있습니다.

다음 코드는 현재 사용자 상태가 변경될 때마다 또는 사용자가 탭을 백그라운드로 이동하거나 다른 곳으로 이동하는 즉시 현재 사용자 상태를 유지하는 큐의 몇 가지 예시 로직을 간략히 설명합니다.

let state = {};
let hasUnstoredState = false;

function storeState() {
  if (hasUnstoredState) {
    // Store `state` to localStorage or IndexedDB...
  }
  hasUnstoredState = false;
}

export function updateState(newState) {
  state = newState;
  hasUnstoredState = true;
  requestIdleCallback(storeState);
}

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    storeState();
  }
});

탭이 삭제되었는지 감지

앞서 언급했듯이 탭이 곧 삭제되는 것을 감지할 수는 없지만 사용자가 탭으로 돌아와 페이지가 새로고침된 후에 탭이 삭제되었는지는 감지할 수 있습니다. 이러한 상황에서는 document.wasDiscarded 속성이 true가 됩니다.

if (document.wasDiscarded) {
  // The page was reloaded after a discard.
} else {
  // The page was not reloaded after a discard.
}

사용자가 이러한 유형의 상황을 얼마나 자주 경험하는지 파악하려면 애널리틱스 도구를 설정하여 이러한 정보를 수집할 수 있습니다.

예를 들어 Google 애널리틱스에서 탭 삭제로 인해 발생한 페이지 조회수의 비율을 확인할 수 있는 맞춤 이벤트 매개변수를 구성할 수 있습니다.

gtag('config', 'G-XXXXXXXXXX', {
  was_discarded: document.wasDiscarded,
});

애널리틱스 제공업체인 경우 이 측정기준을 제품에 기본으로 추가하는 것이 좋습니다.

메모리 절약 모드에서 사이트 테스트하기

페이지를 로드한 다음 별도의 탭 또는 창에서 chrome://discards를 방문하여 페이지가 삭제되는 방식을 테스트할 수 있습니다.

chrome://discards UI에서 목록에서 삭제할 탭을 찾은 다음 작업 열에서 긴급 삭제를 클릭합니다.

이렇게 하면 탭이 삭제되고 탭을 다시 방문하여 페이지를 떠났을 때와 동일한 상태로 다시 로드되었는지 확인할 수 있습니다.

현재 webdriver 또는 Puppeteer와 같은 테스트 도구를 통해 탭 삭제를 자동화할 수 있는 방법은 없습니다. 그러나 탭 삭제 및 복원은 페이지 새로고침과 거의 동일하므로, 사용자 플로우 중간에 새로고침 후 사용자 상태가 복원되는지 테스트하는 경우, 삭제/복원에도 효과가 있을 것입니다. 두 이벤트의 주요 차이점은 beforeunload, pagehide, unload 이벤트는 탭을 삭제할 때 실행되지 않는다는 것입니다. 따라서 사용자 상태를 유지하기 위해 이러한 이벤트에 의존하지 않는 한 새로고침을 사용하여 삭제/복원 동작을 테스트할 수 있습니다.

에너지 절약 모드

에너지 절약 모드를 사용 설정하면 Chrome은 화면 재생 빈도를 줄여 스크롤 및 애니메이션 충실도와 동영상 프레임 속도에 영향을 미쳐 배터리 전원을 절약합니다.

일반적으로 개발자는 에너지 절약 모드를 지원하기 위해 별도의 조치를 취할 필요가 없습니다. 이 모드를 사용 설정하면 애니메이션, 전환, requestAnimationFrame()용 CSS 및 JavaScript API가 디스플레이 새로고침 빈도의 변경사항에 맞게 자동으로 조정됩니다.

이 모드가 문제가 될 수 있는 주된 시나리오는 사이트에서 모든 사용자에게 특정 새로고침 빈도를 가정하는 JavaScript 기반 애니메이션을 사용하는 경우입니다.

예를 들어 사이트에서 requestAnimationFrame() 루프를 사용하고 콜백 간에 정확히 16.67밀리초가 경과할 것으로 가정하면 에너지 절약 모드가 사용 설정되면 애니메이션이 두 배 느리게 실행됩니다.

많은 현재 기기에서 60Hz가 아니기 때문에 개발자가 모든 사용자에 대해 기본 화면 재생 빈도를 60Hz라고 가정하는 것은 항상 문제가 되어 왔습니다.

디스플레이 새로고침 빈도 측정

디스플레이 새로고침 빈도를 측정하는 전용 웹 API는 없으며, 일반적으로 현재 API에서는 이를 측정하는 것은 권장하지 않습니다.

기존 API로 개발자가 할 수 있는 가장 좋은 작업은 연속된 requestAnimationFrame() 콜백 간의 타임스탬프를 비교하는 것입니다. 대부분의 경우 특정 시점의 새로고침 빈도를 대략적으로 계산할 수 있지만 새로고침 빈도가 변경되면 알려주지 않습니다. 이렇게 하려면 requestAnimationFrame() 폴을 지속적으로 실행해야 하며, 이는 사용자의 에너지 또는 배터리 수명 절약 목표를 무효화합니다.

에너지 절약 모드에서 사이트 테스트하기

에너지 절약 모드에서 사이트를 테스트하는 한 가지 방법은 Chrome 설정에서 모드를 사용 설정하고 기기의 연결이 끊겼을 때 실행되도록 구성하는 것입니다.

기기를 분리할 수 없는 경우 다음 단계에 따라 수동으로 모드를 사용 설정할 수도 있습니다.

1. chrome://flags/#battery-saver-mode-available 플래그를 사용 설정합니다.
2. chrome://discards로 이동하여 절전 모드 전환 링크를 클릭합니다 (중요: 링크가 작동하려면 #battery-saver-mode-available 플래그를 사용 설정해야 함).

사용 설정한 후에는 사이트와 상호작용하면서 모든 것이 제대로 표시되는지 확인할 수 있습니다. 예를 들어 애니메이션과 전환이 원하는 속도로 실행되는지 확인할 수 있습니다.

요약

Chrome의 메모리 절약 모드 및 에너지 절약 모드는 주로 사용자 대상 기능이지만, 제대로 처리하지 않으면 사이트 방문 환경에 부정적인 영향을 미칠 수 있으므로 개발자에게도 영향을 미칩니다.

일반적으로 이러한 새로운 모드는 기존 개발자 권장사항을 염두에 두고 설계되었습니다. 개발자가 오랜 기간 웹 권장사항을 따랐다면 사이트는 이러한 새로운 모드를 계속 문제없이 사용할 수 있습니다.

그러나 사이트에 이 게시물에서 명시한 권장사항이 포함되어 있는 경우 이 두 모드를 사용 설정한 경우에만 문제가 증가할 수 있습니다.

항상 그렇듯이 만족스러운 환경을 제공하고 있는지 확인하는 가장 좋은 방법은 사용자의 조건에 맞는 사이트를 테스트하는 것입니다.