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


Answers

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

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

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

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

Question

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

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




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

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




</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 가 참조 된 이전 코드를 모두 변경할 필요가 없습니다.




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

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




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

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




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

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

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