주요 렌더링 경로

Ilya Grigorik
Ilya Grigorik
X 홈페이지

게시일: 2014년 3월 31일

주요 렌더링 경로 최적화란 현재 사용자 액션과 관련된 콘텐츠입니다.

빠른 웹 환경을 제공하려면 브라우저가 많은 작업을 수행해야 합니다. 대부분 이런 작업은 웹 개발자에게 숨겨져 있습니다. 우리는 마크업을 작성하고 유용한 보이는 페이지가 화면에 표시됩니다. 그렇다면 브라우저는 정확히 어떻게 HTML, CSS, JavaScript를 사용하여 화면에 픽셀을 렌더링하면 어떻게 될까요?

실적을 최적화하려면 이러한 상황에서 어떤 일이 일어나는지를 이해해야 합니다. HTML, CSS 및 JavaScript 바이트를 수신하는 것 사이의 중간 단계와 렌더링된 픽셀로 변환하는 데 필요한 처리가 필요합니다. 주요 렌더링 경로에서 확인할 수 있습니다.

프로그레시브 페이지 렌더링

주요 렌더링 경로를 최적화하면 최초 페이지 렌더링에 걸리는 시간을 크게 개선할 수 있습니다. 또한, 주요 렌더링 경로에 대한 이해를 토대로 뛰어난 성능의 대화형 애플리케이션을 빌드할 수도 있습니다. 대화형 업데이트 프로세스도 이와 동일합니다. 연속 루프에서 실행되며 이상적인 속도는 초당 60프레임입니다. 그러나 먼저 브라우저에서 간단한 페이지를 표시하는 방법을 살펴봅시다.

추가 리소스

의견