자바스크립트 위치: 헤더 vs. 푸터 [자체 정리용]
자바스크립트를 헤더와 푸터에 위치시키는 것의 차이점은 무엇일까? 자바스립트 코드를 헤더와 푸터 중 어디에 위치시키는 것이 좋을까?
푸터에 자바스크립트를 위치시키는 이유
자바스크립트를 헤더와 푸터에 위치시키는 것의 차이에 대해 "Javascript in header vs footer" 글을 참고해볼 수 있다.
Javascript should be placed in footer of html document wherever possible. For libraries like jQuery we don’t often have a choice as there may be some other javascript code which depends on that. But we should design site in such a way that maximum javascript code is placed in the end.
자바스크립트는 가능한 경우 언제나 html 문서의 푸터(footer)에 위치시켜야 한다. jQuery 같은 라이브러리는 종종 이러한 라이브러리가 다른 자바스크립트에 의존할 수 있어 사용자가 선택권이 없을 수 있지만, 최대한 자바스크립트 코드는 끝에 위치시키도록 사이트를 디자인해야 한다.
자스크립트에서 CSS 스타일과 HTML 생성/편집이 있을 수 있으므로 자바스크립트를 실행하면 HTML 페이지 렌더링을 차단한다. 따라서 자바스크립트가 이후의 HTML을 렌더링하기 전에 브라우저는 해당 자바스크립트 전체가 실행될 때까지 기다린다.
자바스크립트를 푸터에 위치시키면 자바스크립트 전에 콘텐츠를 처리하므로 HTML 렌더링이 더 빠르다. 하지만 두 경우 모두 페이지의 전체 실행 시간은 동일하다.
"inserting Jquery in the header or footer?"(Reddit):
If the page requires the script to be loaded in order to render the content, then declaring it in the head is fine.
Declaring it at the end of the body is related to the architecture design where the page content can render with markup (html) and styling (css) only and the loading of scripts are to enhance the user experience in the page.
Loading scripts can cause some delay in rendering the page, so if you can design the page to render without them, then users can reach your content quicker and loading them at the end of the body would be preferred.
페이지가 콘텐츠를 렌더링하기 위해 스크립트를 로드해야 하는 경우, 헤더에서 선언하는 것이 좋다.
본문(body) 끝에서 선언하는 것은 페이지 콘텐츠가 마크업(html)과 스타일링(css)만으로 렌더링할 수 있고 스크립트 로딩을 페이지에서 사용자 경험을 향상시키기 위한 경우 아키텍처 디자인과 관련된다.
스크립트를 로딩하면 페이지 렌더링을 다소 지연시킬 수 있으므로, 스크립트 없이 렌더링하도록 페이지를 디자인할 수 있다면 사용자(방문자)는 콘텐츠에 더 빨리 접근할 수 있게 되며 이 경우 body 끝에서 로딩하는 것이 좋을 수 있다.
Where should jQuery code go in header or footer? (jQuery 코드를 헤더와 푸터 중 어디에 넣어야 하나?)
It’s always a good practice to add jQuery code in footer i.e. just before the closing tag. If you have not done that, then use the defer attribute.
Use defer attribute so the web browser knows to download your scripts after the HTML downloaded −
jQuery 코드를 푸터, 즉 종료 태그(closing tag) 바로 앞에 추가하는 것이 항상 좋은 관행이다. 이와 같이 하지 않았다면 defer 속성을 사용해라.
웹브라우저가 HTML을 다운로드한 후에 스크립트를 다운로드하도록 defer 속성을 사용하도록 하라.
Conclusion
개인적으로 참고할 수 있도록 스크립트를 헤더와 푸터에 위치시키는 것과 관련된 글을 찾아 여기에 정리해보았다.
인사이드 자바스크립트 Inside JavaScript : 핵심 개념과 원리를 정확하게. jQuery Node.js 클로저의 개념까지를 비롯하여 자바스크립트 관련 책을 몇 권 구입해놓았지만 시간이 없다는 핑계로 거의 읽지를 못하고 있다. 조금씩이라도 시간을 내어 공부를 해야겠다.
