Written by nodejs-style
on 2021-10-16

고급 프런트 엔드 개발자, 인터뷰 필수 사항 - 1부

반응형

임계 경로 렌더링

당신은 왜 그것을 이해해야 합니까?

중요한 렌더링 경로를 최적화하면 페이지를 처음 렌더링하는 시간을 크게 단축할 수 있습니다. 또한 중요한 렌더링 경로를 이해하면 성능이 우수한 대화형 애플리케이션을 구축할 수 있는 기반이 됩니다.

성능을 최적화하는 것은 HTML, CSS 및 자바스크립트 바이트를 수신하는 중간 단계와 렌더링된 픽셀로 변환하는 데 필요한 처리 사이에 어떤 일이 일어나는지 이해하는 것입니다. 이것이 중요한 렌더링 경로입니다.

임계 렌더링 경로는 아래 이미지에 언급된 바와 같이 5가지 단계를 거칩니다.

각 단계를 한 번에 하나씩 이해하도록 노력합시다.

1.HTML과 DOM 연결

브라우저가 HTML을 받을 때, 그것은 HTML을 Document Object Model로 변환할 필요가 있습니다. 그것은 DOM Tree - 변환, 토큰화, 렉싱 그리고 DOM 구성을 구성하기 위해 4개의 작은 단계를 거칩니다.

변환: 브라우저는 디스크나 네트워크에서 HTML의 원시 바이트를 읽고 인코딩(Ex : UTF-8)을 기반으로 개별 문자로 변환합니다.

토큰화: 브라우저는 문자열(예: "), " 및 꺾쇠괄호 안의 기타 문자열로 변환합니다. 각 토큰에는 특별한 의미와 고유한 규칙 집합이 있습니다.

렉싱: 내보낸 토큰은 속성 및 규칙을 정의하는 "개체"로 변환됩니다.

DOM 구성: 생성된 개체는 상위-하위 관계도 캡처하는 트리 데이터 구조에 연결됩니다.

참고: DOM 트리는 부분적으로 렌더링될 수 있으며 비차단 렌더링으로 간주됩니다.

2.CSSOM

CSSOM은 HTML과 DOM과 유사한 단계를 거친다.

CSS 바이트는 문자, 토큰, 노드, 마지막으로 "CSS 오브젝트 모델"이라고 하는 트리 구조로 변환됩니다.

태그 내에 포함된 텍스트(본문 요소 내에 배치됨)는 16픽셀의 글꼴 크기를 가지며 빨간색 텍스트(본문에서 범위까지 글꼴 크기 지시어가 계단식)를 갖는다. 그러나 범위 태그가 단락 (p) 태그의 하위 항목인 경우 해당 내용은 표시되지 않습니다.

참고: CSSOM은 부분적으로 렌더링될 수 없으며 렌더링 차단으로 간주됩니다. 우리는 CSS가 잘못된 스타일을 렌더링할 가능성이 높기 때문에 다양한 특수성을 가진 다른 선택자를 가질 수 있기 때문에 부분 CSSOM을 렌더링할 수 없습니다.

3. 렌더링 트리

CSSOM과 DOM 트리는 렌더링 트리로 결합되며, 렌더링 트리는 각 보이는 요소의 레이아웃을 계산하는 데 사용되며 화면에 픽셀을 렌더링하는 페인트 프로세스에 대한 입력 역할을 합니다. 이러한 각 단계를 최적화하는 것은 최적의 렌더링 성능을 달성하는 데 매우 중요합니다.

DOM 트리의 루트에서 시작하여 표시되는 각 노드를 이동합니다.

일부 노드(예: 스크립트 태그, 메타 태그 등)는 표시되지 않으며 렌더링된 출력에 반영되지 않기 때문에 생략됩니다.

일부 노드는 CSS를 통해 숨겨지고 렌더링 트리에서도 생략됩니다. 예를 들어 위의 예에서 스팬 노드는 렌더링 트리에 "display: none" 속성을 설정하는 명시적 규칙이 있기 때문에 렌더링 트리에서 누락됩니다.

일부 노드(예: 스크립트 태그, 메타 태그 등)는 표시되지 않으며 렌더링된 출력에 반영되지 않기 때문에 생략됩니다. 일부 노드는 CSS를 통해 숨겨지고 렌더링 트리에서도 생략됩니다. 예를 들어 위의 예에서 스팬 노드는 렌더링 트리에 "display: none" 속성을 설정하는 명시적 규칙이 있기 때문에 렌더링 트리에서 누락됩니다. 일부 노드(예: 스크립트 태그, 메타 태그 등)는 표시되지 않으며 렌더링된 출력에 반영되지 않기 때문에 생략됩니다.

표시되는 각 노드에 대해 적합한 CSSOM 규칙을 찾아 적용합니다.

콘텐츠 및 계산된 스타일이 있는 가시 노드를 내보냅니다.

참고: 간단히 말해, 숨김: 표시와 숨김: 없음은 다릅니다. 전자는 요소를 보이지 않게 하지만 요소는 여전히 레이아웃의 공간을 차지하고 있습니다(즉, 빈 상자로 렌더링됨). 후자(표시: 없음)는 요소가 보이지 않고 레이아웃의 일부가 되지 않도록 렌더링 트리에서 요소를 완전히 제거합니다.

4. 배치

지금까지 어떤 노드가 표시되어야 하고 어떤 노드가 계산되어야 하는지 계산했지만 장치의 뷰포트 내에서 정확한 위치와 크기를 계산하지 못했습니다. 즉, "리플로우"라고도 하는 "레이아웃" 단계입니다.

설명:

본문의 너비는 뷰 포트 너비를 기준으로 계산됩니다. 아래 언급하는 메타 태그에서 너비는 장치 ex의 화면 크기입니다. 모바일은 320px입니다. 따라서 너비:100%는 본문 320px입니다. 상위 항목의 50%, p는 160px의 50%입니다. 즉, 80px의 50%입니다.

장치 너비에 뷰포트가 언급되지 않으면 기본적으로 980px가 됩니다.

5. 도색 또는 래스터라이징

이것은 렌더링 트리의 각 노드를 화면에서 실제 픽셀로 변환하는 마지막 단계입니다.

렌더링 트리 구성, 레이아웃 및 페인트를 수행하는 데 필요한 시간은 문서의 크기, 적용된 스타일 및 실행 중인 장치에 따라 다릅니다. 문서가 클수록 브라우저가 더 많은 작업을 수행하며, 스타일이 복잡할수록 페인팅에 더 많은 시간이 소요됩니다(예: 단색은 페인팅에 "싸다"). 드롭 섀도는 계산 및 렌더링에 "상당"합니다.

요약:.

브라우저 단계에 대한 간단한 요약:

HTML 마크업을 처리하고 DOM 트리를 작성합니다.

CSS 및 JS 리소스 요청(이 게시물에서 설명되지 않음)

CSS 마크업을 처리하고 CSSOM 트리를 작성합니다.

JS 실행(이 게시물에서 설명되지 않음)

DOM과 CSSOM을 렌더링 트리로 결합합니다.

렌더링 트리에서 레이아웃을 실행하여 각 노드의 형상을 계산합니다.

화면에 개별 노드를 그립니다.참조:

나는 JS와 관련된 2단계와 4단계를 일부러 남겨두었습니다, 나는 다가오는 나의 게시물에 그 단계들을 설명할 것입니다 그리고 나는 여기서 그 게시물에 링크를 업데이트할 것입니다, 또한 나의 다음 게시물들은 CRP를 최적화하는 방법이 될 것입니다, 어떠한 건설적인 피드백을 받을 수 있어서 행복합니다.

https://developers.google.com/web/fundamentals/performance/critical-rendering-path

https://classroom.udacity.com/courses/ud884

https://www.freecodecamp.org/news/an-introduction-to-web-performance-and-the-critical-rendering-path-ce1fb5029494/

from http://information-bada.tistory.com/47 by ccl(A) rewrite - 2021-10-16 05:01:10

Top