2022-07-28
자바스크립트에서 기본중인 기본이지만 script 태그에 배치 순서에 따른 달라지는 것과 새롭게 알게된 스크립트 태그의 속성들이 있어 간단히 정리를 해놓아볼려고 한다
🚩scipt 태그 순서 배치에 따른 다른점
출처:짐코딩
👨💻만약에 head태그 쪽에 배치할 경우
이와 같이 위쪽에 배치시
랜더링 엔진에 의해 위에서부터 html해석(파싱)하면서 진행을 해나아가는데 script 태그를 만나게 되면
HTML 파싱을 멈추고 script 태그 쪽으로 이동을 하게 되면서
script태그가 엄청나게 길 경우 그동안 dom이 생성되지 않아
UI를 사용자가 볼 수 없다
스크립트 태그 내부에서 dom에 대한 요소를 아직 파싱이 끝나지 않았기에 찾을 수가 없다...
👨💻body 태그 끝에 배치시 (대개 일반적,,)
이와 같이 하면 이미 body태그에 대한 것을 파싱이 완료되어있는 상태라서 dom에 대한 접근이 자유로워져 당연히 script 태그로 원하는 객체에 접근이 자유로워진다
👨💻window.onload 이벤트리스너 사용
window.onload는 html 파싱 dom생성 그리고 외부컨텐츠(images,script,css etc)가 로드된 후 발생하는 이벤트이다
이와 같이 하면 script태그 위치가 비록 상단에 존재할지언정 dom이 생성된후에야 저 해당 스크립트 코드가 실행되는 콜백형식이기에 에러없이 사용할 수 있다.
👨💻DOMContentLoaded를 사용할 때
DomContentLoaded는 이벤트 중 하나로서 실제 위에 window.onload와 똑같은 원리이지만 유일한 차이점은 이것은 오직 html파싱 후 dom이 생성되기만 하면 바로 실행시켜준다는 점!
외부 컨텐츠는 신경안쓴다
이와 같이 이벤트리스너를 등록하게 되면 상대적으로 window.onload보다 빠를 수 밖에 없다 왜냐하면 오직 파싱 후 dom 생성시 바로 호출되므로
따라서 위와 같은 세가지 방식은 이와 같은 순서로 진행됨을 알수있다
즉 공통점으로는 파싱이 완료된 후 !!
스크립트 태그를 다운받기 시작해서 시작한다는 점
하지만 스크립트 태그를 아예 파싱하면서 미리 다운받아두고 실행만
나중에 하면 좋을 것 같다는 생각이 들 것이다.
따라서 새롭게 등장한 속성!!
🔑defer 속성
html5에서 등장한 속성으로서 html파싱과 함께 비동기로 javascript파일을 불러오게 된다
실행은 파싱 후 dom생성 후 똑같이 진행!
이와 같이 비동기로 처리하기에 파싱을 멈추지 않고 병렬적으로 처리하는 것 같이 진행된다
🔑async 속성
async 또한 defer과 같이 파싱과 함께 javascript 파일을 불러오되 차이점으로는 스크립트의 실행이
dom생성완료 후가 아니라 이미 다 불러온 javascript가 있으면 걔부터 실행시작!!
하지만 실행을 할때에는 파싱이 중간에 다시 중지된다
따라서 원할하게 예상대로 못 가져올 수 있다는 점이 조금 위험하기는 하다,,
🚩결론
되도록이면 defer 속성을 써줘서 해주는게 좋다
