[CH38]브라우저의 렌더링 과정

[yuzunsang]

[퀴즈 예시] Q. 여기에 퀴즈 설명을 적으세요.

적을 코드가 있다면 밑에 적어주세요. (백틱 3개로 코드를 감싸면 코드 양식을 적을 수 있습니다.)

// 예시 코드
const arr = [1, 2, 3];
console.log("Hello");

아래 코드를 복붙해서 정답을 적어주세요.

<details>
    <summary>정답</summary>
    <div markdown="1">    
    정답 설명
    </div>
</details>

[yuzunsang]

Q1. 렌더 트리에 포함되지 않고 제외되는 노드는 무엇인가요? (주관식)

Q2. 외부 JS 파일을 로드하는 script 태그가 body 태그 맨 바닥에 위치해야 하는 이유는 무엇일까요? (주관식)

1번 정답

화면에 렌더링되지 않는 노드(meta 태그. script 태그 등)
CSS에 의해 비표시되는 노드(display: none;)

2번 정답

script 태그의 위치에 따라 HTML 파싱이 블로킹되어 DOM 생성이 지연될 수 있기 때문

[bo-eun]

Q. 렌더 트리 생성 시 생성되지 않는 노드의 특징을 설명하세요.

정답

렌더 트리 생성 시 생성되지 않는 노드는 display: none 스타일이 요소이다.