HTML에서 js 파일 위치는?[html 파싱]

js 파일을 실행시키기 위해선 html 파일에서 연결시켜줘야 하는데 어디에 두는 것이 좋을까?

html파일은 위에서부터 코드를 해석하게 되는데 이것이 html 파싱이다.

1. head 태그 안 <script src="경로"></script>

• head 태그의 위에서부터 파싱을 하다가 js파일을 만나서 파싱을 멈춤
• js 파일 다운받고(fetching) 실행시킴(excuting)
• js 파일이 크다면 html 파싱 시간이 길어짐

2. body 태그 안 끝에 <script src="경로"><script>

• html 파싱이 다 끝난 후 js 파일 다운받고 실행시킴
• js 파일에 의존적일 경우 정상적인 화면을 보기위해 fetching 하는 시간동안 기다려야 함

3. head 태그 안 <script asyc src="경로"></script>

• html 파싱하는 중에 js파일을 만나면 병렬적으로 다운함(fetching)
• fetching이 끝나면 html 파싱을 멈추고 실행함(excuting)
• body 태그 안 끝에 넣을 때보다 fetching 시간을 절약할 수 있지만 js에 의존하는 요소가 html 파싱이 되지 않았다면 오류발생 가능
• html 파싱을 멈춰야 하기 때문에 여전히 시간이 걸림
• 정의한 js 파일 순서에 상관없이 먼저 fetching 완료된 파일부터 excuting

4. head 태그 안 <script defer src="경로"></script>

• html 파싱하는 중에 js파일을 만나면 병렬적으로 다운함(fetching)
• html 파싱이 끝난후 js파일 실행함(excuting)

• fetching시간을 절약하면서 가장 안전한 방법

• 정의한 js 파일 순서에 따라 excuting

결론

head 태그 안 defer을 넣어 js파일을 정의해주는 것이 최적화된 방법이다.