전체 페이지가로드되기 전에 자바 스크립트를 실행할 수 있습니까?

전체 페이지가로드되기 전에 자바 스크립트를 실행할 수 있습니까?

---

전체 페이지가로드되기 전에 약간의 자바 스크립트를 실행하고 싶습니다. 이것이 가능한가? 아니면 코드가 실행되기 시작 </html>합니까?

---

뿐만 아니라이 할 수있는 당신,하지만 당신은 특별한 노력을 할 필요가 없습니다 당신이 원하지 않는 경우에 있습니다. :-)

브라우저가 scriptHTML을 파싱 할 때 태그를 발견 하면 파싱을 중지하고 스크립트를 실행하는 자바 스크립트 인터프리터로 넘깁니다. 파서는 스크립트 실행이 완료 될 때까지 계속되지 않습니다 (스크립트가 document.write파서가 처리해야하는 출력 마크 업을 호출 할 수 있기 때문 ). 이것이 기본 동작입니다. 거기에 script태그가 동작 (즉, 그 변화 특성 defer과async ) (그리고 그들은 그것을 변경하기 때문에, 스크립트를로드 defer또는 async사용할 수 없습니다 document.write로드되는 페이지로 출력 HTML로 참조).

따라서 이것을 고려하십시오.

<p>Line 1</p>
<script>
    alert("Paragraphs: " + document.getElementsByTagName("p").length);
</script>
<p>Line 2</p>

해당 페이지를로드하면 p해당 지점에서 DOM에 하나의 요소 만 존재 하기 때문에 경고에 "Paragraphs : 1"이 표시 됩니다 ( "Line 1"을 포함하는 요소). 요소가 DOM에 있어도 브라우저가 아직 렌더링 할 시간이 없었을 수 있기 때문에 브라우저에 따라 브라우저 디스플레이에 1 행이 표시 될 수도 있고 표시되지 않을 수도 있습니다 ( alertUI 스레드가 멈출 때까지 멈춤).

일부 브라우저 ...하는 조정 ...의 행동을 alert하지만,. 예를 들어 페이지에 해당 코드가 있고 백그라운드의 새 탭에서 해당 코드를 연 경우 최신 버전의 Chrome은 페이지가 계속로드되도록 허용하고 (그리고 JavaScript 코드가 계속 실행되도록 허용) 방문시 경고를 표시합니다. 탭이 활성화되었을 때 경고가 발생했을 때의 동작과는 매우 다르지만 탭에 추가합니다.

렌더링 여부에 관계없이 이전 요소에 기꺼이 액세스 할 수 있으므로 위에서 "Paragraphs : 1"을 보았습니다. 다음은 또 다른 예입니다.

<p id='p1'>Line 1</p>
<script>
    document.write("<p>p1 is null? " + (document.getElementById('p1') == null ? "yes" : "no") + "</p>");
    document.write("<p>p2 is null? " + (document.getElementById('p2') == null ? "yes" : "no") + "</p>");
</script>
<p id='p2'>Line 2</p>

표시되는 출력은 다음과 같습니다.

1 행
p1이 null입니까? 아니
p2가 null입니까? 예
2 행

... p1스크립트가 실행될 때 존재하지만 p2그렇지 않기 때문입니다.

편리한 링크는 없지만 이 메시지 에서 Google Closure 라이브러리 개발자는 Prototype, jQuery, ExtJS, Dojo 및 기타 대부분의 "준비된"스타일 이벤트에 큰 가치가 없다고 말합니다. 상호 작용하려는 요소 뒤에 스크립트를 넣으면 괜찮습니다. 이는 종료 태그 바로 앞에 스크립트를 넣는 YUI의 권장 사항 과 일치 </html>합니다 ( 어딘가에 스크립트 를 넣어야하므로 결국 페이지 표시를 유지하지 않습니다). 이제 개인적으로 그 이벤트가 과도하게 사용되었다고 생각하지만 그 이벤트에서 가치가 있음을 알 수 있지만 제 요점은 분명히 일찍부터 상호 작용을 시작할 수 있다는 것입니다.

---

언제든지 자바 스크립트 코드를 실행할 수 있습니다. AFAIK 브라우저가있는 <script> 태그에 도달하는 순간 실행됩니다. 그러나 아직로드되지 않은 요소에는 액세스 할 수 없습니다.

따라서 요소에 대한 액세스가 필요한 경우 DOM이로드 될 때까지 기다려야합니다 (이미지와 항목을 포함하여 전체 페이지가로드되는 것을 의미하지는 않습니다. 훨씬 일찍로드되는 문서의 구조 일 뿐이므로 일반적으로 이겼습니다. 지연을 알지 못함), jQuery에서 DOMContentLoaded와 같은 이벤트 또는 함수를 사용합니다 $.ready.

참고 URL : https://stackoverflow.com/questions/2920129/can-i-run-javascript-before-the-whole-page-is-loaded