렌더링 성능을 7배 향상시키는 두 줄의 CSS!
3144 단어 performancecsswebdevhtml
{
content-visibility: auto;
contain-intrinsic-size: 1px 5000px;
}
왜 이것이 필요합니까?
오늘날 웹사이트는 최적의 성능을 발휘해야 하며 웹 사용자는 주의 집중 시간이 매우 짧습니다. Doherty threshold에 따르면 응답 시간은 400밀리초입니다.
이제 Facebook, Instagram 등과 같은 웹 사이트를 상상해보십시오. 임계 값보다 더 많은 시간이 소요됩니까? 아무도 이 사이트를 다시 방문하지 않을 것입니다.
이것을 언제 사용하시겠습니까?
이에 대한 가장 일반적인 사용 사례는 응용 프로그램 마운트에서 렌더링해야 하는 방대한 데이터 목록/그리드가 있는 경우입니다.
예: 사양, 문서 또는 여행 블로그 등과 같은 정적 웹사이트...
다른 사용 사례가 있으면 의견을 듣고 싶습니다.
어떻게 작동합니까?
브라우저는 적용한 클래스로 렌더링 작업을 건너뛰어 스마트하게 작동합니다
content-visibility: auto
.브라우저는 렌더링하기 위해 DOM의 레이아웃을 알아야 합니다. 뷰포트에 없는 요소는 렌더링되지 않으며 사실상 귀하가 제공한
contain-intrinsic-size
빈 상자가 있습니다.요약하면 모든 렌더링은 브라우저가 제공한 너비, 높이 및 스타일로 실제 레이아웃을 렌더링하는 뷰포트에 도달할 때까지 지연됩니다.
P.S: 뷰포트 외부에 있지 않은 레이아웃은
height: 0
를 가지므로 지연된 레이아웃이 뷰포트에 오면 서로 쌓이기 때문에 contain-intrinsic-size
가 필요합니다. 그러나 걱정할 필요는 없습니다. 폴백 값, 브라우저는 뷰포트에서 렌더링할 때 실제 값을 렌더링합니다.따라서 이것의 한 가지 단점은
contain-intrinsic-size
가 제대로 제공되지 않으면 스크롤 막대가 이상하고 제자리로 이동한다는 것입니다. :)브라우저 지원
content-visibility
는 CSS Containment Spec에 의존합니다. While content-visibility
은 현재 작성일 기준으로 대부분 크롬 기술에서 지원됩니다.그러나
content-visibility
지원은 고급 시스템에 좋은 기능을 제공하는 데 나쁘지 않습니다. 그러나 웹 개발이 진행됨에 따라 곧 모든 브라우저에서도 지원될 것입니다. 바라건대 :)대안
List virtualization 을 사용하는 것과 같이 JavaScript를 사용하여 성능을 향상시키는 대안이 있지만 누가
js
의 100줄을 작성하고 css
의 2줄로 할 수 있을 때 유지하고 싶습니까?추가 자료; js에서 할 수 있습니다.
react-window
react-virtualized
훌륭한 데모 및 설명:
추가 정보:
https://web.dev/content-visibility/#support
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
문안 인사,
Reference
이 문제에 관하여(렌더링 성능을 7배 향상시키는 두 줄의 CSS!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mnathani/two-lines-of-css-that-boosts-7x-rendering-performance-4mjd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)