자바 스크립트가 헤드 태그에 있어야합니까?
나는 자바 스크립트가 (거의) 어디에나있을 수 있다고 믿지만 거의 항상 <head></head>. 나는 jquery를 사용하고 있으며 어떤 이유로 헤드 태그에 있어야하는지 또는 이동하면 무언가를 깨뜨릴 것인지 알고 싶었습니다. 감사합니다.
편집 : 왜 거의 항상 헤드 태그에 있습니까?
JavaScript는 문서에서 발견되는 모든 위치에서 실행됩니다. 본문에 인라인 JavaScript를 넣으면 브라우저가 올 때 실행됩니다. $(document).ready(...)작업을 실행 하는 데 사용 하는 경우 위치는 중요하지 않습니다. 그렇지 않으면 중요한 코너 케이스를 찾을 수 있습니다. 일반적으로 중요하지 않습니다. 스크립트는 head대부분 전통에서 벗어난 태그로 끝납니다 .
아니요, 어디에나있을 수 있습니다. 사실 때때로 문서의 맨 아래에 두는 것이 좋습니다. 이유에 대한 설명은 http://developer.yahoo.com/performance/rules.html#js_bottom을 참조 하십시오 .
기본적으로 브라우저 .js는 파일이 완전히 다운로드되고 처리 될 때까지 페이지 렌더링을 중지 합니다. HTML이 도착하면 점진적으로 페이지를 렌더링하므로 나중에 .js파일을 참조할수록 더 나은 사용자 경험을 얻을 수 있습니다.
따라서 트릭은에 절대적으로 중요한 스크립트 만 포함 head하고 나머지 스크립트 는 페이지 끝 부분에로드하는 것입니다.
브라우저가 스크립트 태그를 처리 할 때까지 읽을 때 모든 것이 중지됩니다. 따라서 스크립트 태그를 가능한 한 아래로 (이상적으로는 end body 태그 바로 앞) 아래로 이동하면 페이지가 더 빨리 렌더링됩니다. 분명히 총로드 시간은 동일합니다.
물론 jQuery가 포함될 때까지 실제로 jQuery 함수를 호출하지 않도록해야합니다.
JS는 매주 새로운 프레임 워크가 출시되면서 매우 빠르게 변화하고 있으며 각 프레임 워크는 옹호자들에 의해 "벌의 무릎"이라고 주장합니다.
Gumbo는 인라인 요소를 지원하는 모든 곳에서 스크립트 태그를 참조 할 수 있다고 말하는 것이 옳지 만, 외부 JS 파일을로드하거나 태그 내에 JS 코드를 포함시키는 선택은 사례별로 개별적으로 결정됩니다.
예, 브라우저는 구문 분석 될 때 JS로드를 중지하므로 이것이 페이지로드 속도와 기능에 어떤 영향을 미치는지 고려해야합니다.
2015 년 중반 (인기있는 답변은 2009 년 7 월) 현재 페이지로드 속도에 모바일 우선 순위를 부여하려면 모바일 / 셀 마스트에 대한 2 개의 요청 제한이 필요하며, 3G에서는 28k (2x 14kb (yes)) 페이로드를 제공합니다. 28k의 '화면에 그리기'(Google 이름)를 고려해야합니다. 이는 사용자가 올바른 페이지 또는 올바른 경로에 있는지 확인하기 위해 충분한 페이지 콘텐츠 / 상호 작용을 제공해야합니다. 축소 된 Jquery는 현재 87.6lkb이므로 "겨자를 자르지 않을 것입니다!"
이것이 대부분의 모바일 페이지가 4G에서도로드되기 전에 몇 초 동안 앉아있는 이유입니다! 허용하지 마십시오. 페이지 속도는 왕이며 사용자는 JQuery 파일이로드되기 전에 뒤로 버튼을 누릅니다. 3G +에서는 28k 페이로드가 1 초 미만에로드되므로 해당 시간에 페이지로드를 시작하지 않을 이유가 없습니다. 다음에 휴대 전화에서 링크를 클릭하면 로딩 표시 줄이 다음 페이지의 모든 태그를 통과하는 동안 기다리십시오!
SO에 대한 7 년 된 게시물을 기반으로 페이지를 구성하지 마십시오 (잘못되지는 않았더라도 구식 일뿐입니다). 각 코드가 필요한 위치를 결정하고 페이지에 대한 화려한 시각적 기능과 광범위한 데이터 바인딩을 구현하는 6 개의 JS 프레임 워크를로드하기 전에 사용자가 페이지의 가장 중요한 측면을 사용할 수 있는지 확인하십시오.
BTW, Google은 Google 애널리틱스 코드가 가장 마지막에로드되어야하기 때문에 JS를 하단으로 푸시하는 것을 선호합니다.
코딩하기 전에 생각하세요!
아니요 SCRIPT는 head.misc 요소 로 분류 될 뿐만 아니라 특수 요소 로도 분류 되므로 인라인 요소 가 허용 되는 모든 곳에서 허용됩니다. 따라서 SCRIPT인라인 요소가 허용 되는 곳에 배치 할 수 있습니다 .
<p>foo <script>document.write("bar")</script></p>
실제로 일부SCRIPTBODY 는 JavaScript가로드되기 전에 전체 문서가 구문 분석되도록 닫는 태그 바로 앞에 요소 를 배치 할 것을 권장합니다 . 이는 자바 스크립트가 병렬 다운로드를 차단하는 것을 방지하기위한 것입니다.
실제로 성능상의 이유로 거의 항상 페이지 하단에 스크립트 태그를 배치하려고합니다. 왜? 사용자가 페이지를 바로 볼 수 있도록 페이지 구조와 CSS가 먼저로드되기를 원합니다. 그런 다음 모든 동작 기반 코드가 마지막으로로드되기를 원합니다. YSlow는 성능 등급을 보여주는 훌륭한 파이어 폭스 확장 프로그램입니다. 등급을 매기는 항목 중 하나는 상단이 아닌 하단에 자바 스크립트가 있는지 여부입니다.
사용자의 브라우저와 페이지에서 자바 스크립트를 정확히 어디에 두 었는지에 따라 지연 시간에 미치는 나쁜 영향에주의하십시오. Steve Souders 가 스탠포드 강의 비디오를 포함하여 말해야 할 모든 내용을 확인하십시오 . 그리고 그의 수고의 결실은 여기에 남겨졌다 ( 가능한 한 페이지 하단 에 스크립트를 넣는 등).
자바 스크립트가 HTML과 혼합되는 것을 원하지 않기 때문입니다. 가급적이면 별도의 파일에 저장하십시오.
다른 곳에 JS를 사용하면 장점과 단점이 있습니다. 예를 들어 다른 시간에 실행되며 본문에있는 javascript에서 문서에 쓸 수 있습니다.
head또는 body태그에 들어갈 수 있습니다 . 읽을 때마다 실행되며 문서로드가 완료 될 때 반드시 실행되는 것은 아닙니다. 봐 여기 .
경우에 따라 잘못된 위치에 있으면 스크립트가 작동하지 않을 수 있습니다. 일부 JavaScript는 특정 HTML 요소 다음에 실행해야하고, 다른 JavaScript는 스크립트 출력을 표시 할 위치에 정확히 있어야하고, 다른 JavaScript는 문서의 헤드에 있어야합니다. 코드 작성 방법에 따라 다릅니다. 확실하지 않은 경우 window.load 또는 DOMready에서 코드를 실행해야합니다. http://www.javascriptkit.com/dhtmltutors/domready.shtml
참고 URL : https://stackoverflow.com/questions/1213281/does-javascript-have-to-be-in-the-head-tags
'Program Club' 카테고리의 다른 글
| SpringData JPA는 네이티브 쿼리 결과를 Non-Entity POJO에 매핑합니다. (0) | 2020.11.20 |
|---|---|
| Ruby의 자연어 처리 (0) | 2020.11.20 |
| Java 제네릭을 사용하여 열거 형 값 반복 (0) | 2020.11.20 |
| EBS 또는 S3에서 이미지를 유지해야합니까? (0) | 2020.11.20 |
| 선언시 사전에 키 / 값 추가 (0) | 2020.11.20 |