콘텐츠 가시성: 렌더링 성능을 향상시키는 새로운 CSS 속성

화면 밖 콘텐츠 렌더링을 건너뛰어 초기 로드 시간을 개선합니다.

Una Kravets

Jeremy Wagner

Vladimir Levin

이 content-visibility 드림 속성은 Chromium 85에서 출시되며 가장 영향력 있는 신규 CSS 중 하나일 수 있습니다 속성을 사용하여 페이지 로드 성능을 향상할 수 있습니다. content-visibility는 사용자 에이전트가 레이아웃 및 페인팅을 포함한 요소의 렌더링 작업을 건너뛰도록 할 수 있습니다. 사용할 수 있습니다 렌더링을 건너뛰므로 이미지의 상당 부분이 콘텐츠가 화면에 표시되지 않을 때 content-visibility 속성을 활용하면 초기 사용자 로드 속도가 훨씬 빨라졌습니다. 또한 더 빠르게 표시됩니다. 꽤 깔끔하네요.

이 도움말 데모에서는 content-visibility: auto를 청크 콘텐츠 영역에 적용하면 초기 로드 시 렌더링 성능이 7배 향상됩니다. 자세한 내용은 계속 읽어보세요.

브라우저 지원

브라우저 지원

• 85
• 85
• 125명
• 18일

소스

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를 추가하지 않습니다. 요소 콘텐츠를 페인팅하고 히트 테스트를 시작합니다. 이 사용자가 볼 수 있도록 적시에 렌더링 작업을 완료할 수 있습니다.

주의: 건너뛴 하위 트리 중 하나에서 일부 렌더링이 강제로 발생하는 DOM API를 호출하지 않도록 주의하는 경우에만 브라우저가 렌더링 작업을 건너뛸 수 있습니다. content-visibility를 사용하여 성능을 개선하는 경우 코드를 감사하여 이러한 API가 호출되지 않는지 확인하세요. content-visibility:hidden가 있는 요소의 하위 트리에 관해 이러한 API 중 하나를 호출하면 Chromium에서 이러한 API를 찾는 데 도움이 되도록 콘솔 메시지를 출력합니다. 메시지를 보려면 상세 로깅을 사용 설정하세요.

접근성 관련 참고사항

content-visibility: auto의 기능 중 하나는 화면 밖 콘텐츠가 문서 객체 모델 및 접근성 트리에서 계속 사용할 수 있다는 점입니다(visibility: hidden와 달리). 즉, 콘텐츠가 로드될 때까지 기다리거나 렌더링 성능을 희생하지 않고도 페이지에서 콘텐츠를 검색하고 탐색할 수 있습니다.

하지만 이와 반대로, display: none 또는 visibility: hidden와 같은 스타일 기능이 있는 랜드마크 요소는 화면 밖에 있을 때 접근성 트리에도 표시됩니다. 브라우저가 이러한 스타일을 표시 영역에 들어갈 때까지 렌더링하지 않기 때문입니다. 이러한 요소가 접근성 트리에 표시되지 않도록 하려면 aria-hidden="true"도 추가해야 합니다.

주의: Chromium 85-89에서는 content-visibility: auto 내의 화면 밖 하위 요소가 보이지 않는 것으로 표시되었습니다. 특히 제목과 랜드마크 역할은 접근성 도구에 노출되지 않았습니다. Chromium 90에서는 노출되도록 업데이트되었습니다.

예: 여행 블로그

이 예시에서는 오른쪽의 여행 블로그의 기준을 정하고 왼쪽의 덩어리로 표시된 영역에 content-visibility: auto을 적용합니다. 결과는 초기 페이지 로드 시 232ms에서 30ms 사이의 렌더링 시간을 보여줍니다.

여행 블로그는 일반적으로 사진 몇 장과 설명 텍스트입니다. 일반적인 브라우저에서 여행 블로그:

1. 페이지의 일부가 네트워크에서 다운로드되고 필요한 리소스를 배포합니다
2. 브라우저는 페이지의 모든 콘텐츠를 사용자가 콘텐츠를 볼 수 있는지 고려해야 합니다
3. 브라우저는 모든 페이지와 리소스가 다운로드되었습니다.

2단계에서 브라우저는 모든 콘텐츠를 처리하여 확인할 수 있습니다 새 업데이트로 인해 이동했을 수 있는 요소와 함께 새 요소의 스타일과 레이아웃을 업데이트합니다. 렌더링 중입니다. 있습니다 시간이 걸립니다.

여행 블로그의 예시. Codepen의 데모를 참고하세요.

이제 각 매개변수에 content-visibility: auto를 추가하면 어떤 일이 일어나는지 생각해 보세요. 개별 스토리를 블로그에 게시할 수 있습니다 일반적인 루프는 동일합니다. 즉, 브라우저의 페이지의 청크를 다운로드하여 렌더링합니다. 그러나 차이점은 작업량에 따라 달라집니다.

content-visibility를 사용하면 현재 사용자에게 표시되는 모든 콘텐츠(화면에 있음)의 스타일과 레이아웃을 지정합니다. 그러나 스토리가 화면에 완전히 표시되지 않으면 브라우저는 렌더링 작업을 건너뛰고 요소 상자 자체에만 스타일을 지정하고 레이아웃을 지정할 수 있습니다.

이 페이지를 로드하면 마치 페이지가 전체 화면에 포함된 것처럼 보일 것입니다. 빈 상자로 구성되어야 합니다. 이를 통해 50% 이상 절감할 수 있을 것으로 예상되는 결과 있습니다. 이 예에서는 렌더링 시간이 232ms에서 100밀리초로 렌더링 시간 30ms 성능이 7배 향상되었습니다.

이러한 이점을 누리려면 어떤 작업이 필요할까요? 먼저 콘텐츠를 여러 섹션으로 묶습니다.

content-visibility: auto 수신을 위해 story 클래스가 적용된 섹션으로 콘텐츠를 분할하는 예입니다. Codepen의 데모

참고

그런 다음 섹션에 다음 스타일 규칙을 적용합니다.

.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가 적용된 요소를 스크롤한 다음 화면 밖으로 다시 스크롤하면 요소가 자동으로 이상적인 너비와 높이를 유지하며 자리표시자 크기로 되돌아가지 않습니다. 이 기능은 특히 무한 스크롤러와 시간이 지남에 따라 사용자 수에 따라 크기 추정을 자동으로 개선할 수 있습니다. 사용자가 페이지를 탐색합니다.

참고: IntersectionObserver 및 MutationObserver를 사용하여 각 요소에 올바른 크기를 인라인으로 설정할 수 있습니다. 알렉스 러셀이 잡음 스크롤바가 없는 content-visibility와 크기 조절 복원력이 우수한 content-visibility 수정에서 이 기능이 작동하는 방식을 설명합니다.

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이(가) 적용되어 표시되지는 않지만 캐시된 상태입니다. 이렇게 하면 뷰가 다시 활성화될 때 빠르게 렌더링됩니다.

참고: 실험에서 Facebook 엔지니어는 이전에 캐시된 뷰로 돌아갈 때 탐색 시간이 최대 250ms 개선되는 것을 확인했습니다.

다음 페인트에 대한 상호작용 효과 (INP)

INP는 사용자 입력에 안정적으로 응답하는 페이지의 기능을 평가하는 측정항목입니다. 응답성은 렌더링 작업을 포함하여 기본 스레드에서 발생하는 과도한 양의 작업에 영향을 받을 수 있습니다.

특정 페이지에서 렌더링 작업을 줄일 수 있을 때마다 기본 스레드가 사용자 입력에 더 빠르게 응답할 기회를 갖게 됩니다. 여기에는 렌더링 작업이 포함되며, 적절한 경우 content-visiblity CSS 속성을 사용하면 렌더링 작업을 줄일 수 있습니다(특히 대부분의 렌더링 및 레이아웃 작업이 완료되는 시작 시).

렌더링 작업을 줄이면 INP에 직접적인 영향을 미칩니다. 사용자가 content-visibility 속성을 적절하게 사용하여 화면 밖 요소의 레이아웃과 렌더링을 지연시키려고 하는 페이지와 상호작용하려고 하면 기본 스레드가 사용자에게 표시되는 중요한 작업에 응답할 기회를 갖게 됩니다. 이렇게 하면 경우에 따라 페이지의 INP가 개선될 수 있습니다.

결론

content-visibility 및 CSS Containment Spec을 사용하면 놀라운 성능을 발휘할 수 있습니다. 부스트가 CSS 파일로 바로 들어옵니다. 이 기능에 대한 자세한 내용은 다음 항목을 확인하세요.

• CSS 포함 사양
• CSS 컨테이너에 관한 MDN 문서
• CSSWG 초안