웹엔진 라이프사이클 예시

WebEngine 라이프사이클 예제에서는 WebEngineView 의 lifecycleState 및 recommendedState 속성을 사용하여 탭 브라우저에서 백그라운드 탭의 CPU 및 메모리 사용량을 줄이는 방법을 보여줍니다.

라이프사이클 기능에 대한 개요는 페이지 라이프사이클 API를 참조하세요.

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행하기를 참조하세요.

예제의 UI 요소

이 예제에서는 Qt Quick Controls 2를 사용하여 머티리얼 스타일 (어두운 변형)에서 전통적인 탭 브라우저를 구현합니다. 기본 애플리케이션 창(WebBrowser.qml)은 상단의 헤더 표시줄과 창의 나머지 부분을 채우는 기본 보기 영역으로 나뉩니다. 헤더에는 탭 바(WebTabBar.qml)와 탭당 하나의 버튼(WebTabButton.qml)이 있습니다. 메인 영역은 탭 스택(WebTabStack.qml 및 WebTab.qml)으로 구성됩니다. 각 탭에는 차례로 상단에 도구 모음과 웹 페이지를 표시하는 WebEngineView 이 있습니다. 마지막으로 기본 창에는 설정을 변경할 수 있는 Drawer 도 있습니다. 도구 모음에서 '⋮' 버튼을 클릭하면 서랍을 열 수 있습니다.

예제의 라이프사이클 상태

이 예에서는 수명 주기 상태를 변경하는 두 가지 방법, 즉 수동과 자동을 구현합니다. 수동 방식은 lifecycleState 속성을 직접 사용하여 웹 보기 수명 주기 상태를 변경하는 반면, 자동 방식은 타이머 기반이며 recommendedState 도 고려합니다.

탭 표시줄의 탭 제목은 색상으로 구분되며 고정된 탭은 파란색으로 표시되고 폐기된 탭은 빨간색으로 표시됩니다.

수동 수명 주기 제어

수동 제어는 탭 표시줄 버튼의 상황에 맞는 메뉴(WebTabButton.qml)를 통해 제공됩니다. 메뉴에는 각 수명 주기 상태에 대해 하나씩 3개의 라디오 버튼이 있으며 현재 상태가 체크되어 있습니다. 일부 버튼은 잘못된 상태 전환을 나타내거나(예: Discarded 보기에서 Frozen 상태로 바로 전환할 수 없음) 다른 전제 조건이 충족되지 않아서(예: 보이는 보기는 Active 상태에만 있을 수 있음) 비활성화될 수 있습니다.

자동 수명 주기 제어

자동 제어는 WebTab 컴포넌트(WebTab.qml)의 Timer 로 구현됩니다. 타이머는 웹 보기의 lifecycleState 이 recommendedState 과 일치하지 않을 때마다 시작됩니다. 타이머가 실행되면 보기의 수명 주기 상태가 권장 상태로 설정됩니다.

시간 지연은 사용자가 탭 간에 전환할 때 수명 주기 상태가 너무 빨리 변경되는 것을 방지하기 위해 사용됩니다. 고정 및 삭제 지연은 툴바의 '⋮' 버튼을 통해 액세스하는 설정 서랍에서 변경할 수 있습니다.

이것은 자동 수명 주기 제어를 위한 다소 간단한 알고리즘이지만 lifecycleState 속성을 기반으로 더 정교한 알고리즘을 구상하고 구현할 수도 있습니다. 예를 들어, 크롬 브라우저는 실험적으로 사전 학습된 심층 신경망을 사용하여 사용자의 다음 탭 활성화 시간을 예측하고, 기본적으로 사용자에게 얼마나 흥미로운지에 따라 탭의 순위를 매깁니다. 이러한 알고리즘을 구현하는 것은 현재로서는 독자의 몫으로 남겨져 있습니다.

예제 프로젝트 @ code.qt.io