주요 렌더링 경로

Ilya Grigorik
Ilya Grigorik

주요 렌더링 경로 최적화란 현재 사용자 작업과 관련된 콘텐츠 표시의 우선순위를 정하는 것을 말합니다.

빠른 웹 환경을 제공하려면 브라우저가 많은 작업을 해야 합니다. 이러한 작업의 대부분은 웹 개발자에게 숨겨져 있습니다. 즉, 개발자가 마크업을 작성하면 멋진 페이지가 화면에 표시됩니다. 그렇다면 브라우저는 정확히 어떻게 HTML, CSS, JavaScript에서 화면에 렌더링된 픽셀로 전환할까요?

성능을 최적화하려면 HTML, CSS, 자바스크립트 바이트를 수신하고 필요한 처리 과정을 거쳐 렌더링된 픽셀로 변환하는 사이의 중간 단계, 즉 주요 렌더링 경로에서 어떤 일이 일어나는지 이해해야 합니다.

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

주요 렌더링 경로를 최적화하면 페이지의 최초 렌더링 시간을 크게 단축할 수 있습니다. 또한 성능이 뛰어난 대화형 애플리케이션을 빌드하려면 주요 렌더링 경로를 이해하는 것이 기초가 됩니다. 대화형 업데이트 프로세스도 동일합니다. 연속 루프로 실행되며 이상적인 속도는 초당 60프레임입니다. 하지만 먼저 브라우저에서 간단한 페이지를 표시하는 방식을 개괄적으로 살펴보겠습니다.

추가 리소스

의견