몽땅뚝딱 개발자

[성능최적화] 블록 차단 리소스 / media 속성 / defer & async 본문

Development/성능최적화

[성능최적화] 블록 차단 리소스 / media 속성 / defer & async

레오나르도 다빈츠 2023. 5. 2. 16:25

 

◽️ 블록 차단 리소스

HTML을 파싱할 때 CSS나 js를 만나게되면 HTML 파싱을 중단하고 해당 파일을 파싱하거나 다운로드 후 실행하게 되는데 이처럼 HTML 파싱을 차단하는 요소를 블록 차단 리소스라고 한다. HTML 파서는 인라인 스크립트 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에 제어 권한을 넘기고 스트립트 엔진이 모두 실행된 후에 DOM 생성을 재개한다.

 

이렇게 위치시킨다.

1) CSS는 <head> 태그 안에 임포트 해야하며

2) <script> 태그로 실행되는 js는 일반적으로 <body> 맨 하단에 위치시킨다.

 

<!DOCTYPE html>
<html>
  <head>
    <!-- css는 head 안에 위치시킨다. -->
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <div>
    </div>
    <!-- js는 body의 하단에 위치시킨다. -->
    <script>
    </script>
  </body>
</html>

 

 

 

 

◽️ media 속성

CSS와 js에 media attribute로 단말기 유형에 따라 해당 CSS를 적용할지를 명시해주면 블로킹을 방지할 수 있다.

media attribute는 연결된 HTML(리소스)이 최적화되는 미디어 또는 장치를 지정한다.

 

Operators: and, not 등

Devices: all, print, screen, speech(스크린리더기), aural(더 이상 지원되지 않음), handheld(더 이상 지원되지 않음) 등

Values: width, height, device-width, device-height, aspect-ratio, color, monochrome, scan, grid

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="width:780px" />
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)" />

 

 

 

 

 

 

◽️ defer & async

js의 경우 비동기로 다운로드하도록 명시한다면 DOM 트리나 Style 트리를 변경하지 않겠다는 의미이므로 defer attribute, async attribute를 활용한다. 둘 다 스크립트를 다운로드 하는 동안 HTML이 중단되지 않는다.

 

 

◽️ defer attribute를 활용

  • 병렬적으로 파일을 로드하고 다운로드한 뒤 모든 DOM이 로드된 후에(=</html>을 만났을 때) 다운받은 스크립트를 실행하므로 실행순서가 보장된다.
  • 정의된 순서대로 실행된다.
<script defer>
	// ...
</script>

 

 

◽️ async attribute를 활용

  • 스크립트 로드만 병렬적으로 실행하므로 실행순서를 보장할 수 없다. 파일간의 의존성을 해치지 않으면서 모든 DOM 요소에 접근할 수 있다.
  • 하지만 DOM이 모두 로드되기 전에 DOM 요소를 참조하고있는 스크립트가 있는 경우라면 오류가 생길 것 이다.
  • 다운로드가 완료된 순서대로 실행된다.
<script async>
	// ...
</script>

 

 

 

 

출처

https://www.w3schools.com/tags/att_a_media.asp

https://coffeeandcakeandnewjeong.tistory.com/34

https://dev.to/prototyp/improving-website-performance-by-eliminating-render-blocking-css-and-javascript-28ei

https://velog.io/@cherrycock/script-async%EC%99%80-defer%EC%9D%98-%EC%B0%A8%EC%9D%B4

https://webroadcast.tistory.com/15

 

 

저작자표시

'Development > 성능최적화' 카테고리의 다른 글

@font-face와 성능최적화  (0) 2023.12.15
SSR vs CSR vs SSG vs ISR  (1) 2023.05.02
성능 최적화하기 - (16) memoization 적용  (0) 2022.06.21
성능 최적화하기 - (14) 이미지 Preload  (0) 2022.06.14
성능 최적화하기 - (13) Layout Shift  (0) 2022.06.13
'Development/성능최적화' Related Articles more
Comments

티스토리툴바