대부분의 자바 스크립트 및 웹 개발 서적 / 기사는 헤드 태그에 CSS를, 페이지 하단에 자바 스크립트를 넣어야한다고 말합니다.
하지만이 하나의 stackoverflow와 같은 유명한 웹 사이트의 html 소스를 열면 헤드 태그에 js 파일을 넣는 것을 발견했습니다.
두 접근 방식의 장단점은 무엇이며 언제 사용합니까?
동일한 문제에 대한 또 다른 질문을 찾았 습니다. 내 페이지에서 사용되는 JavaScript 파일을 어디에 선언해야합니까? <head> </ head> 안 또는 </ body> 근처?
답변:
웹 사이트 속도 향상을위한 야후의 모범 사례에서 :
스크립트로 인한 문제는 병렬 다운로드를 차단한다는 것입니다. HTTP / 1.1 사양은 브라우저가 호스트 이름 당 2 개 이하의 구성 요소를 병렬로 다운로드하지 않도록 제안합니다. 여러 호스트 이름에서 이미지를 제공하는 경우 두 개 이상의 다운로드를 동시에 수행 할 수 있습니다. 그러나 스크립트가 다운로드되는 동안 브라우저는 다른 호스트 이름에서도 다른 다운로드를 시작하지 않습니다.
어떤 상황에서는 스크립트를 맨 아래로 이동하기가 쉽지 않습니다. 예를 들어 스크립트가 document.write를 사용하여 페이지 콘텐츠의 일부를 삽입하는 경우 페이지에서 아래로 이동할 수 없습니다. 범위 지정 문제도있을 수 있습니다. 대부분의 경우 이러한 상황을 해결하는 방법이 있습니다.
종종 나타나는 대안은 지연된 스크립트를 사용하는 것입니다. DEFER 속성은 스크립트에 document.write가 포함되어 있지 않음을 나타내며 렌더링을 계속할 수있는 브라우저에 대한 단서입니다. 불행히도 Firefox는 DEFER 속성을 지원하지 않습니다. Internet Explorer에서 스크립트는 지연 될 수 있지만 원하는만큼 지연되지는 않습니다. 스크립트를 연기 할 수있는 경우 페이지 하단으로 이동할 수도 있습니다. 그러면 웹 페이지가 더 빨리로드됩니다.
따라서 일반적으로 하단에 배치하는 것이 좋습니다. 그러나, 그것은 항상 가능한 것은 아니다, 그것은 자주하지 않습니다 이 어쨌든 큰 차이를.
다른 사람들이 말했듯이, javascript를 머리에 넣으면 스크립트가로드 될 때까지 페이지 렌더링이 지연됩니다. 이는 특히 큰 스크립트 파일을 다운로드하는 경우 페이지를로드하는 데 더 오래 걸릴 수 있음을 의미합니다.
스크립트 태그를 페이지 끝으로 이동하면 브라우저가 스크립트 태그 앞에 이미지와 스타일 시트를 다운로드하고 스크립트 실행을 시작하기 전에 페이지가 렌더링 될 가능성이 높습니다. 이는 또한 스크립트의 일부 기능에 의존하는 경우 페이지가 사용자에게 표시 될 때까지 사용할 수 없음을 의미합니다.
스타일이나 요소를 추가하는 경우 (예 : 좀 더 풍부한 편집기를 사용하여 텍스트 필드를 전환하는 등) 이것은 깜박임으로 사용자에게 표시됩니다.
요소에 클릭 이벤트를 추가하는 경우 요소 자체가 표시 될 때까지 클릭 할 수 없습니다.
때로는 이러한 문제로 인해 스크립트를 머리에 넣어야 할 때도 있고, 맨 아래에 붙여두면 괜찮을 수도 있습니다.
IMHO (YSlow 및 많은 영리한 사람들에 대해 완전히 반대)는 헤드 태그에 스크립트를 유지하고 대부분의 시간 동안 캐시에 의존해야합니다.
일반적으로 페이지 하단에 스크립트 참조를 배치해야합니다. 스크립트는 다운로드 할뿐만 아니라 블록이 해제되고 페이지가 렌더링 프로세스를 진행하기 전에 평가 및 실행되어야합니다. Modernizr과 같은 것들은 아마도 당신이 원할 HTML5 shim뿐만 아니라 일부 기능 감지를 수행하기 때문에 맨 위에 배치되어야합니다.
페이지 맨 아래에 스크립트를 배치하려는 또 다른 이유는 단일 실패 지점 또는 SPOF입니다. 이것은 스크립트 호출이 시간 초과되거나 다른 이유로 페이지 실행을 차단하는 곳입니다. 이것은 타사 광고 라이브러리 등에서 많이 발생할 수 있습니다.
예, 애플리케이션을 설계하는 방법에 대해 조금 더 어렵게 생각해야 할 수도 있지만, 저에게는 매우 자연스러워졌습니다. 지난 4 년 동안 하단에 스크립트를 사용하여 수백 개의 웹 앱을 구축했으며 그 차이를 알 수 있습니다. 나는 500ms 일 수도 있고 5000ms 일 수도 있지만 모든 것이 중요합니다.