[TIL] 면접 대비 질문 준비 (JS 렌더링 최적화)

[TIL]

면접 대비 질문 준비

Javascript 렌더링 최적화를 위해서 해보신 것이 있나요?

Critical Rendering Path 최적화

CSS 최적화

CSS는 CSSOM이 생성될 때까지 브라우저의 렌더링이 되지 않는 렌더링 차단 리소스이다.

따라서, 최초 렌더링 시간을 최적화하기 위해서 CSS를 간단하게 만들고, 최대한 빠르게 다운로드 되도록 해야한다.

• 간결한 selector 사용: .foo보다 .bar .foo가 더 느리다. 부모 객체를 찾아 DOM을 거슬러 올라가서 확인하기 때문

• 미디어 쿼리 사용: 미디어 쿼리를 기반으로 CSS를 여러 파일로 분할하면 사용하지 않는 CSS를 다운로드하고 렌더링은 차단하지 않는다.

Javascript 최적화

• async, defer

  Javascript는 parser blocking resourse이다. script 태그가 나오면 HTML 파싱이 중단되어 자바스크립트를 다운, 파싱, 실행한다.

  따라서, HTML이 파싱이 다 된 후에 JS가 실행되도록 해야한다.

  script 태그를 비동기적으로 다운 처리할 수 있도록 async, defer를 추가한다. 특히 실행이 자동적으로 HTML 파일이 끝난 후 처리되도록 하는 defer를 사용하도록 한다.

• preload 속성

  현재 페이지에서 빠르게 가져와야 하는 리소스에 적용하는 속성이다.

  as 어트리뷰트에 리소스 유형(script, style…)을 알려주어야 한다. 무조건 가져오는 것이므로 리소스가 중복되지 않게 주의해야 한다.

• prefetch 속성

  미래에 필요할 수 있는 리소스를 가져올 때 사용하는 속성.

  <link rel="prefetch" href="page-2.html" />
  

  라고 쓰면 현재 페이지의 로딩을 마치고, 사용 가능한 대역폭(즉, 다운로드할 여유가 생겼을 때) 가장 낮은 우선순위로 리소스를 가져온다.

  따라서, 사용자가 다음으로 넘어갈 페이지를 미리 준비함으로써 리소스 가져오는 시간을 조금 줄일 수 있다. 하지만 HTML만 가져오고, CSS 등은 가져오지 않는다.

---