Script 태크 위치에 대한 문의

hwan_ung · 1월 15, 2019, 1:10오전

안녕하세요.
다음맵API 를 이용한 화면 개발 중인데요.
script 부분을 상단에 위치 시키고 싶은데,
예제를 참고 하다보니, map div 태그 아래에 두어야만 지도가 보입니다.
상단에 위치 하려고 하는데 어떻게 해야할까요?
답변부탁드립니다.
감사합니다.

C.L · 1월 15, 2019, 2:39오전

js 를 로딩하는 스크립트는 div 상단에 있어도 되지만
실행코드는 div 를 참조해야 하므로 div 하단에 위치해야 하는 것으로 알고 있습니다.

doji.doo · 1월 15, 2019, 5:07오전

스크립트 태그는… 상황에 따라 조금씩 다르지만
아무 조치를 취하지 않은 일반적인 경우 페이지 렌더링을 block 시키기 때문에
(물론 async, defer 속성으로 그렇지 않게 할 수도 있습니다.)
가급적 하단에 위치시키는 것이 페이지 반응성에 좋은 기여를 합니다.

요즘 PC에서야 뭐… 네트워크 빠르고 브라우저 빠른데…
이제는 미시 성능 최적화처럼 보이는 옛날 얘기 하는 것 같습니다만,
모바일 웹은 아직도 페이지 반응성 중요하거든요.

만약 프로젝트 특성상 스크립트를 상단에 위치시켜야 한다면 아래와 같이 해야 합니다.

window.onload = function() {
  var node = document.getElementById('map_div');
  var map = new daum.maps.Map(node, options);
}

load, DOMContentLoaded 와 같이, 페이지 로딩 라이프 사이클 중 DOM을 탐색해도 되는 시점에 발생하는 이벤트에서 메인 로직을 시작하셔야 합니다.