html에서 외부의 js파일을 불러올때
<script src="">로 불러옵니다.
근데 이 코드의 위치에 따른 의미가 있다고 하여 공부해보았습니다.
1. <head>안에 있을 때
그냥 단순히 <head>안에 작성한경우,
브라우저가 html 가져오다가 + js가져오기 + js 실행 + 나머지 html 가져오기
=> 중간에 html 가져오는거 끊김 ! => 유저가 불편
2. <body> 맨 밑에 있을 때
1에서 중간에 html이 끊기는 이슈가 있었기 때문에, 마지막에 넣음으로써, html이 안끊기게함
브라우저가 html 가져오기 + js가져오기 + js실행
=> html 다 가져올 때까지 js기능을 못씀 => 유저의 불편 유발 가능성 UP!
3.<head> 안에 쓰지만 async 추가
<script src="" async>를 추가하면 말 그대로 비동기적으로 진행합니다.
브라우져 가져오기와 js가져오기를 동시에 합니다만, js를 실행할때는 브라우저 가져오기가 끊기게 됩니다.
브라우저가 html 가져오기, js 가져오기 + (js가져오기 끝, 브라우저가 html 가져오기 멈춤) js실행 + 브라우저가 나머지 html 가져오기
=>역시나 js실행중에 html 가져오는게 끊김 => 유저 불편
4.<head> 안에 defer 추가
<script src="" defer>를 추가하면 js가져오기는 비동기식으로 진행하지만, js실행은 html을 다 받은 후 진행합니다.
브라우저 html가져오기,js가져오기 + ~~~html이 브라우져 가져오기 +js실행
=>1,2,3방식 문제 모두 해결!
더더더 좋은 설명 => https://www.youtube.com/watch?v=tJieVCgGzhs&t=624s
'공부 정리 > 웹(Web)' 카테고리의 다른 글
| Javascript Run Environment (0) | 2022.02.11 |
|---|---|
| Critical Rendering Path(CRP) (0) | 2022.02.08 |
| getBoundingClientRect() Vs css 좌표 (0) | 2022.02.01 |
| [CSS] box-sizing (0) | 2022.01.24 |
| [CSS] position (0) | 2021.12.21 |
댓글