html tag - 내 페이지에서 JavaScript 파일을 어디에 사용해야합니까? <head> </ head> 또는 </ body> 근처?





6 Answers

Yahoo YSlow 도구 에는 이에 대한 조언이 있습니다.

스크립트로 인한 문제는 병렬 다운로드를 차단한다는 것입니다. HTTP / 1.1 사양은 브라우저가 호스트 이름 당 두 개 이상의 구성 요소를 병렬로 다운로드하지 못하도록 제안합니다. 여러 호스트 이름에서 이미지를 제공하는 경우 두 개 이상의 다운로드가 동시에 발생하도록 할 수 있습니다. 그러나 스크립트가 다운로드되는 동안 브라우저는 다른 호스트 이름에서도 다른 다운로드를 시작하지 않습니다.

어떤 상황에서는 스크립트를 맨 아래로 이동하는 것이 쉽지 않습니다. 예를 들어, 스크립트가 document.write를 사용하여 페이지 내용의 일부를 삽입하면 페이지에서 더 아래로 이동할 수 없습니다. 범위 지정 문제가있을 수도 있습니다. 많은 경우 이러한 상황을 해결할 수있는 방법이 있습니다.

종종 나타나는 또 다른 제안은 지연된 스크립트를 사용하는 것입니다. DEFER 속성은 스크립트에 document.write가 포함되어 있지 않으며 브라우저에서 렌더링을 계속할 수 있다는 것을 나타냅니다. 불행히도 Firefox는 DEFER 속성을 지원하지 않습니다. Internet Explorer에서 스크립트는 지연 될 수 있지만 원하는만큼 실행되지 않을 수 있습니다. 스크립트를 연기 할 수 있으면 스크립트를 페이지 맨 아래로 이동할 수도 있습니다. 그러면 웹 페이지가 더 빨리로드됩니다.

usage header w3school

나는 자습서를 읽고 있었고 저자는 HTML로 body 태그 ( </body> )를 닫을 때 Javascript 파일을 포함하도록 언급했다.

내가 어떤 유형의 기능을 선언 / JavaScript를 정의해서는 안되는지 궁금해서 head 부분에 포함 시켰습니까? 닫기 body 태그 근처에 Google 애널리틱스와 같은 자바 스크립트가 포함되어 있습니다. 닫는 body 태그 근처에 JavaScript 정의에주의해야하는 부분은 무엇입니까?




Google 페이지 pagespeed 에는 스크립트 다운로드를 병렬화하는 방법에 대한 좋은 설명이 있습니다.

여전히 그들의 조언은 당신의 페이지의 머리 속에 그들을 두는 것입니다.




끝 가까이에 선언하는 이유는 .js를 가져 오기 위해 대기하기 전에 페이지를 그리기 시작할 수 있기 때문입니다.

Ergo, 결국 원하는 것은 페이지 렌더링에 아무런 영향을 미치지 않으며 그 반대도 마찬가지입니다.




나는 닫는 body 태그 바로 앞에 스크립트 태그를 두는 편이 낫다고 생각한다. 때문에:

  • 요소가 스크립트 아래에 있으면 렌더링에서 차단됩니다.
  • IE6에서는 페이지 아래에있는 IE7 리소스의 다운로드가 차단됩니다.

this 기사에서. 또한 야후의 성능 규칙 6은 스크립트를 맨 아래로 이동하는 것입니다.




</body> 근처에서해야합니다. 그 이유는 간단합니다 : head 영역에 배치하는 경우 파일을로드해야합니다. 그 시간 동안 사용자는 흰색 화면 만 볼 수 있습니다.

그러나 귀하의 웹 사이트에 따라 다릅니다. 머리 부분에 mootools와 같은 프레임 워크를로드하거나 이벤트 나 AJAX를위한 다른 함수 또는 뭔가를 </body> 근처에로드해야합니다.




</body> 바로 전에 JavaScript를 배치해야합니다. 이상없이 HTML은 JavaScript없이 작동해야하므로로드 된 마지막 항목 중 하나 여야합니다.

JavaScript가 아닌 요소를 숨기려면 CSS를 사용해야합니다. 이렇게하면 페이지가로드 될 때 요소가 나타나고 사라지는 것을 방지 할 수 있습니다.

다음과 같은 문제가 발생할 수도 있습니다 ...

문제

이 시나리오에서는 예제로 PHP를 사용하려고합니다.

footer.php 파일은 현재 다음과 같이 보일 수 있습니다.

<script src="jquery.js"></script>
<script src="custom.js"></script>
</body>
</html>

그러나 드물게 한 페이지에만 <script> 를 추가하려고 할 때 어떤 일이 발생합니까? footer.php 뒤에 더 이상 넣을 수 없기 때문에 <body> 태그에 더 이상 없지만 이전에 넣을 수는 없습니다. 코드에서 jquery.js 가 누락 될 수 있기 때문입니다 .

해결책

footer-start.php 파일을 footer-start.php :

<script src="jquery.js"></script>
<script src="custom.js"></script>

그리고 footer-end.php 파일 :

</body>
</html>

footer.php 를 간단히 작성하십시오.

<?php
  require 'footer-start.php';
  require 'footer-end.php';

드문 경우지만 한 페이지에 사용자 정의 <script> 를 사용해야하는 경우 다음과 같이하십시오.

<?php require 'footer-start.php'; ?>
<script>...</script>
<?php require 'footer-end.php'; ?>

이 방법을 사용하면 footer.php 가 참조 된 이전 코드를 모두 변경할 필요가 없습니다.




Related