사용자는 사이트와 앱이 제대로 실행되지 않으면 이를 알아차리므로 렌더링 성능을 최적화하는 것이 매우 중요합니다.
오늘날의 웹 사용자는 방문하는 페이지가 대화형이며 따라서 시간과 노력을 더 많이 집중해야 합니다. 페이지는 빠르게 로드될 뿐만 아니라 사용자 입력에 빠르게 반응해야 합니다. 사용할 수 있습니다 실제로 사용자 경험의 이러한 측면은 정확히 다음 페인트에 대한 상호작용 (INP) 측정항목이 측정합니다. 좋음 INP란 페이지가 사용자의 제공합니다
페이지를 보기 좋게 만들려면 사용자 상호작용에 대한 응답으로 실행하는 자바스크립트 사용자 인터페이스의 시각적 변화입니다. 사용자에게 표시되는 시각적 변화 인터페이스는 여러 유형의 작업(일반적으로 총칭)의 결과입니다. 렌더링해야 하며, 이 작업이 가능한 한 빨리 이루어져야 사용자 환경이 빠르고 안정적으로 느껴집니다.
사용자 상호작용에 빠르게 반응하는 페이지를 작성하려면 브라우저에서 HTML, JavaScript 및 CSS를 처리하는 방식을 지정하고 작성한 코드뿐 아니라 포함된 다른 서드 파티 코드도 효율적으로 사용할 수 있습니다
기기 새로고침 빈도 관련 참고사항
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">오늘날 대부분의 기기는 초당 60회의 화면을 새로 고칩니다. 새로고침할 때마다 생성된 시각적 출력을 생성하며 일반적으로 프레임으로 알려져 있습니다. 다음 동영상에서는 프레임의 개념을 보여줍니다.
<ph type="x-smartling-placeholder">기기의 화면은 항상 일관적인 속도로 새로고침되지만, 항상 충분한 프레임을 생성할 수 있는 것은 아닙니다 일치해야 합니다 예를 들어 애니메이션이나 전환이 있는 경우 브라우저가 기기의 새로고침 빈도와 일치해야 프레임을 새로고침할 수 있습니다.
일반적인 디스플레이가 초당 60회 새로고침된다는 점을 고려하면, 브라우저가 각 프레임을 생성하는 데 16.66밀리초가 걸린다는 것을 알 수 있습니다. 하지만 실제로는 브라우저에서 각 프레임에 대한 자체 오버헤드가 있으므로 작업이 10밀리초 내에 완료되어야 합니다. 다음에 실패하는 경우 프레임 속도가 떨어지고 화면에서 페이지 콘텐츠가 떨리게 됩니다. 이 이러한 현상은 종종 버벅거림이라고 합니다.
하지만 목표는 수행하려는 작업의 유형에 따라 달라집니다. 애니메이션의 경우 10밀리초 임계값을 충족하는 것이 매우 중요합니다. 두 범위 사이의 일련의 프레임에 보간된 화면의 객체 포인트 사용자 인터페이스의 개별적인 변경, 즉 그 사이에 어떠한 움직임도 없이 한 상태에서 다른 상태로 넘어가는 것은 즉각적으로 느끼는 시간 내에 이러한 변화를 달성하는 것이 좋습니다. 있습니다. 이와 같은 경우 100밀리초가 자주 인용되는 수치이지만 INP 측정항목의 '양호' 200밀리초 이하여야 합니다 다양한 기능의 더 광범위한 기기를 수용할 수 있습니다.
목표가 무엇이든 간에 애니메이션 효과를 주는 수많은 프레임을 버벅거림을 피하거나 단순히 프레임 속도에서 불연속적인 시각적 변화를 생성하기 위해 사용자 인터페이스를 최대한 빠르게 유지합니다. 작업에 필수적입니다
픽셀 파이프라인
비즈니스 환경에서 숙지하고 염두에 두어야 하는 다섯 가지 주요 영역이 있습니다. 웹 개발자로 일하는 것입니다. 이 다섯 가지 영역이 각각은 픽셀-화면 파이프라인의 핵심 포인트를 나타냅니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">- JavaScript: JavaScript는 일반적으로
사용자 인터페이스에
시각적인 변화를 주었습니다 예를 들어 jQuery의
animate함수, 데이터 세트 정렬, 페이지에 DOM 요소 추가 하지만 JavaScript가 시각적 변경을 실행하는 데 꼭 필요한 것은 아닙니다. CSS 애니메이션, CSS 전환, Web Animations API는 페이지 콘텐츠에 애니메이션을 적용할 수 있습니다. - 스타일 계산: 어떤 CSS 규칙을 적용할지 결정하는 프로세스입니다.
일치하는 선택기에 따라 어떤 HTML 요소에 적용될지를 지정합니다. 예를 들어
.headline는 모든 HTML 요소에 적용되는 CSS 선택자의 예입니다.headline클래스를 포함하는class속성 값으로 바꿉니다. 보낸 사람 규칙이 알려지면 규칙이 적용되고 각 규칙의 최종 스타일이 요소가 계산됩니다. - 레이아웃: 요소에 어떤 규칙을 적용할지 브라우저가 인식하면
페이지의 도형을 계산하기 시작할 때(예: 얼마나 많은 공간 요소가
화면의 어디에 표시되는지를 조정할 수 있습니다. 웹의 레이아웃 모델은
한 요소가 다른 요소에 영향을 줄 수 있습니다. 예를 들어
<body>의 너비는 요소는 일반적으로 하위 요소의 크기에 영향을 미칩니다. 트리 아래로 이동하므로 이 프로세스는 브라우저에 상당한 영향을 미칠 수 있습니다. - 페인트: 페인트는 픽셀을 채우는 프로세스입니다. 여기에는 그림 그리기와 텍스트, 색상, 이미지, 테두리, 그림자 등 기본적으로 모든 시각적 요소를 요소를 고려하는 것이 중요합니다. 그리기는 일반적으로 레이어라고 하는 여러 표면에서 수행됩니다.
- 복합: 페이지의 일부분이 올바른 순서로 화면에 적용해야 하므로 렌더링해야 합니다. 이것은 특히 오류가 있으면 하나의 요소가 다른 요소와 겹치지 않게 겹쳐서 표시되는 것을 말합니다.
픽셀 파이프라인의 이러한 각 부분은 애니메이션에서 버벅거림이 발생하거나, 불연속적인 시각적 요소가 있더라도 프레임 그리기가 지연됩니다. 사용자 인터페이스에 대한 변경사항을 살펴보겠습니다 따라서 Ad Exchange 계정의 코드가 파이프라인의 어떤 부분을 트리거하는지 알아보고, 필요에 따라 픽셀 파이프라인에서 렌더링해야 합니다.
'래스터화'라는 용어를 들어보셨을 것입니다. "페인트"와 함께 사용됩니다. 이 페인트가 실제로
- 그리기 호출 목록 생성
- 픽셀 채우기
후자를 '래스터화'라고 하며, DevTools를 사용할 때는 래스터화가 포함된 것으로 생각해야 합니다. 일부 그리기 호출 목록 생성, 래스터화는 API에서 실행됩니다. 이러한 스레드는 개발자가 제어할 수 없습니다.
모든 프레임에서 파이프라인의 모든 부분을 항상 터치할 필요는 없습니다. 주어진 주어진 주어진 상황에서 파이프라인이 정상적으로 자바스크립트, CSS 또는 웹을 통해 시각적으로 변경할 때 프레임 속도를 Animations API를 사용하는 것이 좋습니다.
1. JS / CSS > 스타일 > 레이아웃 > 페인트 > 복합
'레이아웃'을 변경하는 경우 속성(예: 요소의
도형(예: 너비, 높이, 위치)(예: left 또는 top CSS)
속성이 포함된 경우, 브라우저는 다른 모든 요소를 확인하고 '리플로우'해야 합니다.
있습니다. 영향을 받은 부분은 다시 페인트해야 합니다.
다시 합성해야 합니다.
2. JS / CSS > 스타일 > 페인트 > 복합
'페인트 전용'을 변경한 경우 속성(예:
속성(예: background-image, color, box-shadow): 레이아웃 단계
페이지에 시각적 업데이트를 커밋할 필요가 없습니다. 레이아웃 생략
가능한 경우 레이아웃 작업에 비용이 많이 드는 것을
다음 프레임을 생성하는 데 상당한 지연 시간이 발생했습니다.
3. JS / CSS > 스타일 > 복합
레이아웃과 페인트 모두 필요하지 않은 속성을 변경하면 브라우저에서 합성 단계로 바로 이동할 수 있습니다. 가격이 가장 저렴하고 바람직한 경로를 통로의 선로를 적절하게 페이지의 수명 주기에 적용됩니다. 재미있는 사실: Chromium은 컴포지터 스레드에서만 페이지가 스크롤될 때 따라서 페이지가 응답하지 않더라도 페이지를 스크롤하여 이전에 화면에 그려진 부분을 확인합니다.
<ph type="x-smartling-placeholder">웹 성능은 작업을 피하고 효율성을 높이는 기술입니다. 가능한 한 많이 수행하게 될 것입니다. 많은 경우 그것은 그것에 반대하지 않고 브라우저에서 움직일 수 있습니다. 한 가지 작업은 계산 비용 측면에서 다르다는 것을 알 수 있습니다. 일부 작업은 본질적으로 다른 작업보다 비용이 많이 듭니다!
파이프라인의 여러 부분을 자세히 살펴보겠습니다. 이제부터 일반적인 문제 진단 및 해결 방법을 배우실 수 있습니다.
브라우저 렌더링 최적화
성능은 사용자에게 중요합니다. 좋은 사용자 환경을 구축하기 위해서는 웹 개발자가 사용자 상호작용에 빠르게 반응하고 렌더링하는 웹사이트를 구축해야 함 부드럽게 움직입니다. 성능 전문가 폴 루이스가 버벅거림을 없애고 초당 60프레임 성능을 유지하는 웹 앱을 만들 수 있습니다. 나가기 이 과정에서 앱을 프로파일링하는 데 필요한 도구와 함께 이 과정을 수강하고, 렌더링 성능을 높일 수 있습니다. 또한 브라우저의 렌더링과 빠르고 쉽게 구축할 수 있는 패턴을 찾아내는 데 도움이 되는 사용자가 즐겁게 사용할 수 있습니다.