Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

평행우주 : world 1

[HTML/JS] HTML에서의 효율적인 JS 포함 방법 본문

텃밭 2 : FE/HTML | CSS

[HTML/JS] HTML에서의 효율적인 JS 포함 방법

parallelworlds 2021. 12. 29. 01:51

html에서 js를 포함할 때 어떻게 해야 효율적일까요?

 

 

 

 

<head> 안에 <scrip src="main.js"></script>가 있는 경우

  • parsing html > blocked (fetching js > executing js) > parsing html(page is ready)
  • 스크립트를 헤드에 포함하게 되면 사용자가 웹사이트를 보기까지 오랜 시간이 걸리는 구조

 

 

 

<body> 안 (끝쪽)에 <script scr="main.js"></script>가 있는 경우

  • pasing html >(page is ready) fetching js > executing
  • 페이지가 js에 의존적인 경우 사용자가 유의미한 정보를 얻으려면 오랜 시간이 걸림

 

 

 

<head> 안에 <script asyn scr="main.js"></script>가 있는 경우

  • parsing html (fetcing js) > blocked (executing js) > parsing html (page is readty)
  •  js 다운받는 시간 절약 
  • html 파싱 중간에 멈추고 js가 실행되기 때문에 오류 발생 가능성 증가 

 

 

 

🔔 best choice 🔔

 

<head> 안에 <script defer src="main.js"></script>

  • parsing html (fetching js) > (page is ready) executing js

 

 

 

'텃밭 2 : FE > HTML | CSS' 카테고리의 다른 글

[HTML/CSS] FlexBox를 이용한 레이아웃 설정  (0) 2022.01.17
[HTML/CSS] 레이아웃 구성하기  (0) 2022.01.04
[CSS] CSS Selector 정리  (0) 2022.01.04
[CSS] Fun 하고 Cool한 학습자료  (0) 2022.01.01
'텃밭 2 : FE/HTML | CSS' Related Articles more
Comments