화면 밖 콘텐츠 렌더링을 건너뛰어 초기 로드 시간을 개선합니다.
이
content-visibility
드림
속성은 Chromium 85에서 출시되며 가장 영향력 있는 신규 CSS 중 하나일 수 있습니다
속성을 사용하여 페이지 로드 성능을 향상할 수 있습니다. content-visibility
는
사용자 에이전트가 레이아웃 및 페인팅을 포함한 요소의 렌더링 작업을 건너뛰도록 할 수 있습니다.
사용할 수 있습니다 렌더링을 건너뛰므로 이미지의 상당 부분이
콘텐츠가 화면에 표시되지 않을 때 content-visibility
속성을 활용하면
초기 사용자 로드 속도가 훨씬 빨라졌습니다. 또한 더 빠르게
표시됩니다. 꽤 깔끔하네요.
브라우저 지원
content-visibility
는 CSS 포함 내의 프리미티브를 사용합니다.
사양. content-visibility
는
Chromium 85에서 현재 지원되고 있으며 '
프로토타입 제작'을
Firefox의 경우, 격리 사양은 가장 최신 버전인
브라우저를 참조하세요.
CSS 포함
CSS 포함의 중요하고 중요한 목표는 렌더링을 사용 설정하는 것입니다. 웹 콘텐츠의 성능 개선을 예측할 수 있는 격리 방법으로 DOM 하위 트리를 제거합니다.
기본적으로 개발자는 페이지의 어떤 부분이 캡슐화되어 있는지 브라우저에 알려줄 수 있습니다. 를 콘텐츠 집합으로 제공하여 브라우저가 하위 트리 외부의 상태를 고려해야 합니다. 격리된 콘텐츠가 포함된 콘텐츠(하위 트리)를 알면 브라우저가 페이지 렌더링을 위한 최적화 결정을 내릴 수 있습니다.
CSS에는 네 가지 유형이 있는데
격리,
각각은 contain
CSS 속성에 사용할 수 있는 값으로, 다음과 같이 조합할 수 있습니다.
공백으로 구분된 값 목록으로:
size
: 요소의 크기 포함을 통해 요소의 상자가 하위 요소를 검사할 필요 없이 배열됩니다. 즉, 레이어의 크기만 필요한 경우에는 하위 요소의 레이아웃을 요소가 포함됩니다.layout
: 레이아웃 포함은 하위 요소가 요소에 영향을 주지 않음을 의미합니다. 페이지에 있는 다른 상자의 외부 레이아웃입니다. 이렇게 하면 잠재적으로 다른 상자를 배치하기만 하면 하위 요소의 레이아웃을 지정합니다.style
: 스타일 격리는 하위 요소 외에도 영향을 줄 수 있는 속성이 요소를 벗어나지 않도록 합니다(예: 카운터). 이 하위 요소의 스타일 계산을 건너뛸 수 있습니다. 다른 요소의 스타일을 계산하는 것입니다.paint
: 페인트 격리를 통해 포함 상자의 하위 요소가 경계 밖에 표시되지 않습니다. 어떤 것도 시각적으로 요소를 오버플로할 수 없습니다. 요소가 화면을 벗어나거나 보이지 않는 경우 하위 요소가 또한 표시되지 않습니다. 이렇게 하면 요소가 화면 밖에 있으면 자손의 페인팅을 건너뛸 수 있습니다.
content-visibility
를 사용하여 렌더링 작업 건너뛰기
어떤 포함 값을 사용해야 할지 판단하기 어려울 수 있습니다.
적절한 세트가 지정된 경우에만 최적화가 시작될 수 있습니다. 다음을 수행할 수 있습니다.
가치를 실험하면서 가장 효과적인 것이 무엇인지
가장 좋은 결과를 얻은 경우
content-visibility
라는 다른 CSS 속성을 사용하여 필요한
격리시킬 수 있습니다 content-visibility
를 사용하면
웹 브라우저로서 사용자의 노력이 거의 들지 않고 성능이 향상됩니다.
있습니다.
콘텐츠-공개 상태 속성에는 여러 개의 값이 허용되지만, 값이 auto
입니다.
즉각적으로 성능을
개선하는 기능을 제공합니다 요소가
content-visibility: auto
는 layout
, style
, paint
를 억제합니다. 만약
요소가 화면 밖에 있고 사용자와 관련이 없는 경우
하위 트리에 포커스 또는 선택 영역이 있는 요소)
또한 size
를 억제합니다.
페인팅
및
히트 테스트
합니다.
무슨 의미인가요? 요약하자면 요소가 화면 밖에 있으면 하위 요소가 렌더링되지 않습니다. 브라우저는 요소의 크기를 고려하지 않고 거기서 멈춥니다 요소의 하위 트리의 스타일 지정 및 레이아웃과 같은 대부분의 렌더링은 건너뜁니다.
요소가 표시 영역에 가까워지면 브라우저에서 더 이상 size
를 추가하지 않습니다.
요소 콘텐츠를 페인팅하고 히트 테스트를 시작합니다. 이
사용자가 볼 수 있도록 적시에 렌더링 작업을 완료할 수 있습니다.
접근성 관련 참고사항
content-visibility: auto
의 기능 중 하나는 화면 밖 콘텐츠가 문서 객체 모델 및 접근성 트리에서 계속 사용할 수 있다는 점입니다(visibility: hidden
와 달리). 즉, 콘텐츠가 로드될 때까지 기다리거나 렌더링 성능을 희생하지 않고도 페이지에서 콘텐츠를 검색하고 탐색할 수 있습니다.
하지만 이와 반대로, display: none
또는 visibility: hidden
와 같은 스타일 기능이 있는 랜드마크 요소는 화면 밖에 있을 때 접근성 트리에도 표시됩니다. 브라우저가 이러한 스타일을 표시 영역에 들어갈 때까지 렌더링하지 않기 때문입니다. 이러한 요소가 접근성 트리에 표시되지 않도록 하려면 aria-hidden="true"
도 추가해야 합니다.
예: 여행 블로그
여행 블로그는 일반적으로 사진 몇 장과 설명 텍스트입니다. 일반적인 브라우저에서 여행 블로그:
- 페이지의 일부가 네트워크에서 다운로드되고 필요한 리소스를 배포합니다
- 브라우저는 페이지의 모든 콘텐츠를 사용자가 콘텐츠를 볼 수 있는지 고려해야 합니다
- 브라우저는 모든 페이지와 리소스가 다운로드되었습니다.
2단계에서 브라우저는 모든 콘텐츠를 처리하여 확인할 수 있습니다 새 업데이트로 인해 이동했을 수 있는 요소와 함께 새 요소의 스타일과 레이아웃을 업데이트합니다. 렌더링 중입니다. 있습니다 시간이 걸립니다.
이제 각 매개변수에 content-visibility: auto
를 추가하면 어떤 일이 일어나는지 생각해 보세요.
개별 스토리를
블로그에 게시할 수 있습니다 일반적인 루프는 동일합니다. 즉, 브라우저의
페이지의 청크를 다운로드하여 렌더링합니다. 그러나 차이점은
작업량에 따라 달라집니다.
content-visibility를 사용하면 현재 사용자에게 표시되는 모든 콘텐츠(화면에 있음)의 스타일과 레이아웃을 지정합니다. 그러나 스토리가 화면에 완전히 표시되지 않으면 브라우저는 렌더링 작업을 건너뛰고 요소 상자 자체에만 스타일을 지정하고 레이아웃을 지정할 수 있습니다.
이 페이지를 로드하면 마치 페이지가 전체 화면에 포함된 것처럼 보일 것입니다. 빈 상자로 구성되어야 합니다. 이를 통해 50% 이상 절감할 수 있을 것으로 예상되는 결과 있습니다. 이 예에서는 렌더링 시간이 232ms에서 100밀리초로 렌더링 시간 30ms 성능이 7배 향상되었습니다.
이러한 이점을 누리려면 어떤 작업이 필요할까요? 먼저 콘텐츠를 여러 섹션으로 묶습니다.
그런 다음 섹션에 다음 스타일 규칙을 적용합니다.
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}
contain-intrinsic-size
를 사용하여 요소의 자연 크기 지정
content-visibility
의 잠재적인 이점을 활용하려면 브라우저에서
크기 포함을 적용해야 콘텐츠의 렌더링 결과가
요소의 크기에 어떤 식으로든 영향을 미치지 않습니다. 즉, 요소가
빈 것처럼 표시됩니다. 요소에 높이가 지정되지 않은 경우
0이 됩니다.
스크롤바의 크기가 달라지므로 이는 이상적이지 않을 수 있습니다. 각 스토리의 높이가 0이 아니어야 하기 때문입니다.
다행히 CSS는 요소가 크기 제한의 영향을 받는 경우 요소의 자연 크기를 효과적으로 지정하는 또 다른 속성 contain-intrinsic-size
를 제공합니다. 이 예에서는 다음과 같이 1000px
로 설정합니다.
섹션의 높이와 너비에 대한 추정치입니다.
즉, '내장 크기'의 단일 하위 요소가 있는 것처럼 배치됩니다.
크기가 조정되지 않은 div가 여전히 공간을 차지하도록 합니다.
contain-intrinsic-size
는 렌더링된 콘텐츠 대신 자리표시자 크기로 작동합니다.
Chromium 98 이상에는 새로운 auto
가 있습니다.
contain-intrinsic-size
의 키워드 지정된 경우 브라우저는 마지막으로 렌더링된 크기(있는 경우)를 기억하고 개발자가 제공한 자리표시자 크기 대신 이를 사용합니다. 예를 들어 contain-intrinsic-size: auto 300px
를 지정한 경우
요소는 각 크기에서 300px
고유 크기로 시작하지만 한 번
요소의 콘텐츠가 렌더링되더라도 렌더링된 고유 크기를 유지합니다.
이후의 모든 렌더링 크기 변경도 저장됩니다. 실제로는 content-visibility: auto
가 적용된 요소를 스크롤한 다음 화면 밖으로 다시 스크롤하면 요소가 자동으로 이상적인 너비와 높이를 유지하며 자리표시자 크기로 되돌아가지 않습니다. 이 기능은 특히 무한 스크롤러와
시간이 지남에 따라 사용자 수에 따라 크기 추정을 자동으로 개선할 수 있습니다.
사용자가 페이지를 탐색합니다.
content-visibility: hidden
로 콘텐츠 숨기기
렌더링 여부에 상관없이 콘텐츠를 렌더링하지 않은 상태로 유지하려면
어떤 이점이 있나요? 입력:
content-visibility: hidden
content-visibility: hidden
속성을 사용하면 다음과 같은 이점이 있습니다.
content-visibility: auto
와 같은 방식으로 렌더링되지 않은 콘텐츠와 캐시된 렌더링 상태
표시됩니다. 그러나 auto
와 달리 화면에 자동으로 렌더링되지는 않습니다.
이렇게 하면 보다 세밀하게 제어하여 요소의 콘텐츠를 숨기고 나중에 빠르게 숨기기를 해제할 수 있습니다.
요소의 콘텐츠를 숨기는 다른 일반적인 방법과 비교해 보세요.
display: none
: 요소를 숨기고 렌더링 상태를 소멸합니다. 이 즉, 요소의 숨기기 해제는 단일 레이어로 새 요소를 렌더링하는 것만큼 비용이 듭니다. 동일한 콘텐츠일 수 있습니다.visibility: hidden
: 요소를 숨기고 렌더링 상태를 유지합니다. 이 요소와 하위 트리이므로 문서에서 요소를 실제로 삭제하지는 않습니다. 여전히 페이지의 기하학적 공간을 차지하며 여전히 클릭할 수 있습니다. 그것은 숨겨진 경우에도 필요할 때마다 렌더링 상태를 업데이트합니다.
반면 content-visibility: hidden
는 렌더링 상태를 유지하면서 요소를 숨기므로 변경해야 할 사항이 있는 경우 요소가 다시 표시될 때만 변경사항이 적용됩니다(즉, content-visibility: hidden
속성이 삭제됨).
content-visibility: hidden
의 좋은 사용 사례로는
고급 가상 스크롤러, 측정 레이아웃 등이 포함됩니다. 단일 페이지 애플리케이션(SPA)에도 적합합니다. 비활성 앱 뷰는
content-visibility: hidden
이(가) 적용되어 표시되지는 않지만
캐시된 상태입니다. 이렇게 하면 뷰가 다시 활성화될 때 빠르게 렌더링됩니다.
다음 페인트에 대한 상호작용 효과 (INP)
INP는 사용자 입력에 안정적으로 응답하는 페이지의 기능을 평가하는 측정항목입니다. 응답성은 렌더링 작업을 포함하여 기본 스레드에서 발생하는 과도한 양의 작업에 영향을 받을 수 있습니다.
특정 페이지에서 렌더링 작업을 줄일 수 있을 때마다 기본 스레드가 사용자 입력에 더 빠르게 응답할 기회를 갖게 됩니다. 여기에는 렌더링 작업이 포함되며, 적절한 경우 content-visiblity
CSS 속성을 사용하면 렌더링 작업을 줄일 수 있습니다(특히 대부분의 렌더링 및 레이아웃 작업이 완료되는 시작 시).
렌더링 작업을 줄이면 INP에 직접적인 영향을 미칩니다. 사용자가 content-visibility
속성을 적절하게 사용하여 화면 밖 요소의 레이아웃과 렌더링을 지연시키려고 하는 페이지와 상호작용하려고 하면 기본 스레드가 사용자에게 표시되는 중요한 작업에 응답할 기회를 갖게 됩니다. 이렇게 하면 경우에 따라 페이지의 INP가 개선될 수 있습니다.
결론
content-visibility
및 CSS Containment Spec을 사용하면 놀라운 성능을 발휘할 수 있습니다.
부스트가 CSS 파일로 바로 들어옵니다. 이 기능에 대한 자세한 내용은
다음 항목을 확인하세요.