JavaScript-머리, 본문 또는 jQuery?
이 질문은 단지 몇 가지를 정리하는 것입니다. 이와 같은 몇 가지 질문이 이전에 요청되었으며,이 질문은 모두 하나의 질문으로 요약됩니다. 자바 스크립트는 HTML 문서에서 어디로 이동해야합니까? 아니면 더 중요한 것은 중요합니까? 그래서 제가 묻는 것 중 하나는
<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>
(기능면에서) 전혀 다릅니다.
<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>
더 중요한 것은 어떤 방식 으로든 DOM의 요소를 수정하거나 사용하는 JS에 초점을 맞추고 싶습니다. 그래서 몸에 document.getElementById("test").innerHTML = "Hello world!"예전 과 같은 것을 넣으면 <element id="test"></element>몸이 위에서 아래로로드되기 때문에 작동하지 않는다는 것을 알고 있습니다 . JS를 먼저로드 한 다음 그렇지 않은 요소를 조작하려고합니다. 아직 존재합니다. 따라서 위와 마찬가지로 태그 안 <head>이나 바로 앞에 있어야합니다 </body>. 문제는 조직 및 분류를 제외하고 이들 중 어떤 것을 선택하는 것이 중요합니까? 그렇다면 어떤 방식으로 선택됩니까?
물론 세 번째 방법 인 jQuery 방식도 있습니다.
$(document).ready(function(){ /*Code goes here*/ });
이렇게하면 모든 것이로드 될 때만 실행되기 때문에 코드를 본문에 배치하는 것은 중요하지 않습니다. 여기서 질문은, 그것은 거대한 JS 라이브러리를 가져 오는 가치가 단지 필요가있는 스크립트의 정확한 배치로 대체 할 수있는 방법을 사용할 수 있나요? 여기서 조금 정리하고 싶습니다. 대답하고 싶으면 계속하세요! 요약 : 다른 종류의 스크립트는 어디로 가야합니까? 머리 또는 몸통, 그리고 / 또는 중요합니까? jQuery는 준비된 이벤트에만 가치가 있습니까?
가장 권장되는 방법은 </body>태그 앞에 넣는 것 입니다. Yahoo 성능 기사 는 또한 각각 Yahoo 및 Google의 YSlow 및 Page Speed 애드온을 제안합니다 .
위에 링크 된 Yahoo 기사에서 인용 :
스크립트로 인한 문제는 병렬 다운로드를 차단한다는 것입니다. HTTP / 1.1 사양은 브라우저가 호스트 이름 당 2 개 이하의 구성 요소를 병렬로 다운로드하지 않도록 제안합니다. 여러 호스트 이름에서 이미지를 제공하는 경우 두 개 이상의 다운로드를 동시에 수행 할 수 있습니다. 그러나 스크립트가 다운로드되는 동안 브라우저는 다른 호스트 이름에서도 다른 다운로드를 시작하지 않습니다.
<head>태그 에 스크립트를 넣으면 브라우저는 스크립트가로드 될 때까지 다른 항목을 보류하여 사용자가 페이지의 느린로드처럼 인식하게됩니다. 이것이 맨 아래에 스크립트를 넣어야하는 이유입니다.
에 관해서 :
$(document).ready(function(){/*Code goes here*/});
DOM을 사용할 수 있고 조작 할 준비가되면 시작됩니다. 마지막에 코드를 넣으면 반드시 필요하지는 않지만 DOM을 사용할 수있게 되는 즉시 무언가를하고 싶기 때문에 일반적으로 필요 합니다.
일반적인 관행이지만에 script태그를 넣는 head것은 일반적으로 좋은 생각이 아닙니다. 스크립트가 다운로드되고 처리 될 때까지 페이지의 렌더링을 유지하기 때문입니다 ( async또는 사용 defer및이를 지원하는 브라우저 제외 ).
일반적인 권장 사항은 script태그의 맨 끝에 태그 를 배치 하는 것입니다 ( body예 : </body>. 이렇게하면 스크립트 위의 모든 DOM 요소에 액세스 할 수 있습니다 (아래 링크 참조). 한 가지주의 할 점은 페이지가 적어도 부분적으로 렌더링되었지만 스크립트가 아직 처리되지 않은 짧은 순간이있을 수 있으며 사용자가 페이지와 상호 작용하기 시작하면 이벤트를 발생시키기 위해 무언가를 할 수 있다는 것입니다. 스크립트가 아직 연결될 시간이 없었습니다. 그래서 당신은 그것을 알고 있어야합니다. 이것이 점진적 향상의 한 가지 이유입니다 . 이는 페이지가 JavaScript 없이도 작동하지만 더 잘 작동한다는 생각입니다. JavaScript 없이는 전혀 작동하지 않는 페이지 / 앱을 수행하는 경우 일부 인라인을 포함 할 수 있습니다.버블 링 이벤트를 연결 하고 스크립트가로드 될 때 작업을 위해 큐에 넣거나 사용자에게 기다리도록 요청하는 body태그 (예 :) 의 맨 위에있는 스크립트입니다.<script>minimal code here</script>document.body
jQuery와 같은 기능을 사용하는 ready것은 좋지만 라이브러리 외부에서는 실제로 필요하지 않습니다 (예 : script태그가있는 위치를 제어하는 경우 일반적으로 사용할 필요가 없습니다. 그러나 jQuery 플러그를 작성하는 경우). 로드시 무언가를해야한다는 점에서 (비교적 드물지만 일반적으로 호출되기를 기다립니다.) 일반적으로 수행합니다.
더 많은 읽기 :
다음과 같이하여 자바 스크립트를 병렬로 다운로드 할 수 있습니다.
(function () {
var ele = document.createElement('script');
ele.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
ele.id = "JQuery";
ele.onload = function () {
//code to be executed when the document has been loaded
};
document.getElementsByTagName('head')[0].appendChild(ele);
})();
이 예에서는 Google에서 축소 된 JQuery v1.7.2를 다운로드합니다. Google에서 다운로드하는 것은 CDN을 사용하는 것과 같고 사용자가 동일한 파일을 사용하는 페이지에있는 경우 캐시 될 수 있으므로 JQuery를 다운로드하는 좋은 방법입니다. 따라서 다운로드 할 필요가 없습니다
이것에 대한 정말 좋은 Google 기술 이야기가 있습니다. http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp
참조 URL : https://stackoverflow.com/questions/10994335/javascript-head-body-or-jquery
'IT TIP' 카테고리의 다른 글
| sys.exit (0)과 os._exit (0)의 차이점은 무엇입니까? (0) | 2020.12.30 |
|---|---|
| 두 색상 간의 대 비율을 프로그래밍 방식으로 계산하는 방법은 무엇입니까? (0) | 2020.12.30 |
| 헤더 이외의 Ajax DELETE 요청에서 데이터를 전달하는 방법 (0) | 2020.12.30 |
| IntelliJ에서 다음 중단 점으로 이동하는 방법은 무엇입니까? (0) | 2020.12.30 |
| 디렉토리 존재 여부를 확인하는 이식 가능한 방법 [Windows / Linux, C] (0) | 2020.12.30 |