웹 성능 마스터하기: 픽셀 파이프라인 이해

웹 개발자로서, 특히 프런트엔드 개발을 전문으로 하는 우리에게는 브라우저 작동 방식, 웹 통신 프로토콜, 웹 접근성 등을 이해하는 것이 중요합니다.

이번에는 웹사이트 성능을 개선하여 사용자 경험을 향상시키기 위해 명심해야 할 사항을 공유하고자 합니다. 픽셀 파이프라인에 관한 내용입니다.

픽셀 파이프라인이란 무엇입니까?

픽셀 파이프라인은 웹 브라우저가 HTML, CSS, JavaScript를 화면에 표시되는 시각적 요소로 변환하는 방법을 설명하는 프로세스입니다

웹 개발자로서 업무를 수행할 때 알아야 할 5가지 주요 영역이 있습니다. 다음 다섯 가지 영역이 있으며 각 영역은 화면에 대한 픽셀 파이프라인의 핵심 지점을 나타냅니다.

JavaScript: JavaScript는 일반적으로 사용자 인터페이스에 시각적 변화를 가져오는 작업을 처리하는 데 사용됩니다. 예를 들어 jQuery의 애니메이션 기능, 데이터 세트 정렬 또는 페이지에 DOM 요소 추가 등이 될 수 있습니다

스타일 계산: 일치하는 선택기를 기반으로 어떤 HTML 요소에 어떤 CSS 규칙이 적용되는지 파악하는 프로세스입니다. 예를 들어, .headline은 headline 클래스를 포함하는 클래스 속성 값을 가진 모든 HTML 요소에 적용되는 CSS 선택기의 예입니다.

레이아웃: 브라우저가 요소에 어떤 규칙이 적용되는지 알게 되면 요소가 차지하는 공간, 화면에서 요소가 나타나는 위치 등 페이지의 기하학적 구조를 계산할 수 있습니다.

페인트: 페인팅은 픽셀을 채우는 과정입니다. 여기에는 페이지의 레이아웃이 계산된 후 텍스트, 색상, 이미지, 테두리, 그림자 및 기본적으로 요소의 모든 시각적 측면을 그리는 작업이 포함됩니다.

복합: 페이지의 일부가 여러 레이어에 그려질 가능성이 있으므로 페이지가 예상대로 렌더링되도록 올바른 순서로 화면에 적용해야 합니다.

위 내용을 알면 요소의 크기를 조정하는 애니메이션의 리소스 비용을 이해할 수 있습니다. 여기에는 레이아웃 프로세스, 페인트 프로세스, 마지막으로 구성 프로세스로 돌아갑니다.

반면에 요소의 텍스트 색상이나 배경색 변경이 포함된 애니메이션을 만들려면 페인트 프로세스로 이동한 다음 작성 프로세스로 이동하면 됩니다.

웹사이트 성능을 개선하고 사용자 경험을 향상하기 위한 권장 사항

i) 가능하면 너무 많은 애니메이션을 만들지 마세요.
ii) 애니메이션을 원하는 경우 애니메이션을 적용할 때 변환 및 불투명도 속성으로 제한하세요. 이러한 속성은 픽셀 파이프라인의 마지막 단계인 작성 프로세스만 거치면 되기 때문입니다. 예: hover 의사 클래스를 사용하여 버튼에 애니메이션을 적용할 때 배경색을 변경하는 것보다 불투명도를 사용하는 것이 좋습니다.
iii) 애니메이션의 일부로 요소를 이동하려면 번역 값과 함께 'will-change' 또는 'transform' 속성을 사용하는 것이 좋습니다.

이 게시물의 출처:
https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count?hl=es
https://web.dev/articles/rendering-performance

성능과 관련된 모든 분야의 전문 엔지니어이자 Lighthouse(Google Lighthouse는 웹 페이지 품질을 측정하기 위한 오픈 소스 자동화 도구)의 창시자인 Paul Lewis가 가르치는 브라우저 렌더링 최적화에 대한 무료 강좌입니다. Chrome DevTools:
https://www.udacity.com/course/browser-rendering-optimization--ud860

위 내용은 웹 성능 마스터하기: 픽셀 파이프라인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!