script 요소의 defer과 async 속성을 통한 효과적인 스크립트 로딩

JavaScript

script 요소의 defer과 async 속성을 통한 효과적인 스크립트 로딩

martinooo 2024. 3. 19. 13:34

🤷‍♂️ 본론에 들어가기 앞서

웹 개발을 하다 보면 <script> 요소를 이용해서 HTML 문서 안에 자바스크립트 코드를 삽입하는 경우가 필연적으로 생기기 마련이다. 자바스크립트에서 <script> 요소를 좀 더 효과적으로 사용하는 방법에 대해서 알아보자.

🤷‍♂️ script 요소의 위치

브라우저가 javascript <script> 요소를 어떻게 처리하는지 생각해 보신 적이 있나요? 다들 아시겠지만 브라우저가 HTML 문서를 처리하다가 <script> 요소를 만나면 src 속성에 명시된 경로의 파일이나 script 내부에 코드를 내려받아서 javascript 코드를 실행합니다.

* 여기서 <script> 요소가 HTML 문서에서 어디에 위치하는지가 웹 페이지의 로딩 속도에 영향을 미칠 수가 있다.

HTML은 동기식으로 한줄할줄씩 읽어나가는 특징을 가지고 있다.

EX: 아래와 같은 <script> 요소가 <body> 요소의 중간에 오게 되면 어떤 식으로 읽어나갈까?

<body>
    <h2>A</h2>
    <script src="./script.js"></script>
    <h2>B</h2>
</body>

위 HTML 문서는 브라우저에서 다음과 같이 순차적으로 처리가 됩니다.

<h2>A</h2>가 화면에 출력됨
script.js 파일을 내려받아 자바스립트 코드가 실행됨
<h2> B </h2>가 화면에 출력

* HTML은 동기식으로 한줄한줄 읽어나가는 특징을 가지고 있다.

🤷‍♂️ defer vs async 속성?

전통적으로 script 요소를 head 요소 안에 넣도록 배우는 경우가 많지만 실제 프로젝트 or UI & UX 측면에서 body 요소 제일 마지막에 script를 넣어서 사용자에게 최적화된 웹페이지 경험을 줄 수 있다.

미리 HTML 그려주고 script를 렌더 하는 방식이다.

Defer 속성 정의

defer 속성을 사용하면 HTML코드가 처리되면서 동시에 자바스크립트 파일도 내려받기 때문에 속도를 개선할 수 있다.

* script 파일이 클 경우 defer 속성에 효율적이다.

Async 속성 정의

🤷‍♂️ defer vs async 결론

그럼 결론적으로 어떤 상황에서 defer 속성을 사용하는 게 좋고, 언제 async 속성을 사용하는 게 나을까? 자바스크립트 파일의 다운로드 측면에서는 defer 속성과 async 속성은 큰 차이는 없다. 두 가지 방식에서 모두 브라우저는 HTML 요소를 화면에 그려주면서 백그라운드에서 자바스크립트 파일을 다운로드하기 때문이다.

하지만 자바스크립트 코드의 실행 측면에서 있을 때는 defer 속성과 async 속성 간에는 의미있는 차이가 생긴다. 서로 연관이 있는 여러 개의 스크립트 파일을 순차적으로 실행해야 하는 경우에는 defer 속성을 사용하는 편이 안전하다. 왜냐하면 defer 속성은 자바스크립트 코드를 HTML 문서에 나타는 순서대로 실행을 해주기 때문이다.

URL인코딩 & 디코딩 해보기

'JavaScript' 카테고리의 다른 글

[자바스크립트] 활용가치가 좋은 내장함수와 every(), some() 함수의 개념 및 활용법 (0)	2024.06.18
replaceAll is not a function 오류 해결 경험 (0)	2024.04.09
defaultPrevented 이벤트 속성 개념 총정리 (1)	2024.03.13
javascript 스와이퍼(carousel) 구현 (4)	2023.04.06
javascript 문단 생성하기 (26)	2023.03.02

현재글script 요소의 defer과 async 속성을 통한 효과적인 스크립트 로딩

꾸준히 발전하는 FRONTEND AND BACKEND...빛나는 사람이 될것^^

네트워크관리사, 프론트엔드, 자바스크립트 코딩테스트, 자바스크립트, jquery, IT, JavaScript, Git, 개발자, 프론트, 알고리즘 공부, SQL, 프론트개발자, 백엔드, 프로그래머스 자바스크립트, 개발공부, aws, 자바스크립트 알고리즘, MySQL, react,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

꿈많은 DEVELOPER