HTML&CSS Quiz - CRP, id/class selector, script async/defer

1. CRP(Critical Rendering Path)에 대해 설명해주세요.

• Critical Rendering Path는 브라우저가 HTML, CSS, JavaScript를 화면의 픽셀로 바꾸는 단계별 과정을 말합니다.
• critical rendering path는 DOM, CSSOM, render tree, layout을 포합니다.
  1. HTML을 파싱하여 DOM을 만듭니다.
  2. JavaScript를 파싱하여 DOM을 변경할 수 있습니다.
  3. CSS를 파싱하여 CSSOM을 만듭니다.
  4. DOM과 CSSOM을 결합하여 Render Tree를 만듭니다.
  5. Layout이 페이지의 모든 크기와 위치를 결정합니다.
  6. Layout이 결정되면, 픽셀이 화면에 그려집니다.

1.1 CRP 최적화 방법에 대해 설명해주세요.

• CSS는 문서 최상단에 작성해 브라우저가 빠르게 CSSOM을 생성하게 합니다.
• JavaScript는 script 태그를 body 태그 최하단에 작성하거나 async, defer 속성을 활용해 JavaScript 로드가 HTML 파싱을 막지 않도록 합니다.
• JavaScript 애니메이션보다 CSS 애니메이션을 사용합니다.
• 불필요한 공백과 주석은 제거합니다.

2. id와 class selector의 차이점에 대해 설명해주세요.

• id selector는 중복될 수 없는 유일한 값이고, class selector는 중복될 수 있는 값입니다.
• id selector는 중복될 수 없는 값이므로 요소를 특정할 때 주로 사용합니다.
• class selector는 중복될 수 있으므로 여러 개의 요소에서 스타일을 재사용할 수 있습니다.
• class selector는 공백으로 구분하여 여러 개 지정할 수 있으므로 한 요소에 여러 스타일을 적용할 수 있습니다.

3. HTML script 태그의 async와 defer 속성의 차이에 대해 설명해주세요.

• async 속성과 defer 속성 모두 HTML 파싱과 외부 JavaScript 로드가 비동기적으로 동시에 진행됩니다.
• 단, script 태그에 async 속성을 주면, JavaScript의 파싱과 실행은 JavaScript 파일의 로드가 완료된 직후에 진행되며, 이때 HTML 파싱이 중단됩니다.
  • 또한 여러 개의 script 태그에 async 속성을 주면 script 태그의 순서와 상관없이 먼저 로드가 완료된 script 태그부터 실행되므로 순서가 보장되지 않습니다.
• 반면에, script 태그에 defer 속성을 주면 HTML 파싱이 끝나고 DOM 생성이 완료된 후에 JavaScript의 파싱과 실행이 진행됩니다.
  • 따라서 DOM 생성이 완료된 이후에 실행되어야 할 JavaScript에 유용합니다.

참고

• MDN - Critical Rendering Path
• PoiemaWeb - CSS Selector
• 모던 자바스크립트 Deep Dive Chap 38. 브라우저의 렌더링 과정