페이지 로딩시 자바스크립트 코드의 실행순서 소개_기본지식

1. HTML에 Javascript를 삽입하는 방법
1. <script> 태그 쌍 사이에 Javascript 코드를 직접 배치합니다. <br> 2. src; 속성은 외부 js 파일을 지정합니다 <br> 3. 이를 이벤트 핸들러에 배치합니다. 예를 들면 다음과 같습니다. <p onclick="alert('I am a Javascript running by the onclick event')">Click me</p&gt ; <BR>4. URL의 본문으로 이 URL은 다음과 같은 특수 Javascript: 프로토콜을 사용합니다. <a href="javascript:alert('나는 javascript: 프로토콜에 의해 실행되는 javascript입니다.')"&gt ;나를 클릭하세요&lt ;/a><br>5. javascript 자체의 document.write() 메소드를 사용하여 새로운 javascript 코드를 작성합니다<br> 6. Ajax를 사용하여 javascript 코드를 비동기적으로 얻은 후 실행합니다<br> </p> <p>3번째와 4번째 메소드로 작성한 자바스크립트가 실행되기 위해서는 트리거가 필요하기 때문에 특별히 설정하지 않는 이상 페이지 로딩시 실행되지 않습니다. </p> <p>2. 페이지에서 Javascript가 실행되는 순서 <br>1. 페이지에 있는 Javascript 코드는 HTML 문서의 일부이므로 페이지가 로드될 때 Javascript가 실행되는 순서는 다음과 같습니다. 소개 태그 <script />가 나타나는 <script /> 태그 내부 또는 src를 통해 소개된 외부 JS는 해당 명령문이 나타나는 순서대로 실행되며 실행 프로세스는 문서 로딩의 일부입니다. <br>2. 각 스크립트에서 정의한 전역 변수 및 함수는 나중에 실행되는 스크립트에서 호출할 수 있습니다. <br>3. 변수 호출은 이전에 선언되어야 합니다. 그렇지 않으면 얻은 변수 값이 정의되지 않습니다. <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="68607" class="copybut" id="copybut68607" onclick="doCopy('code68607')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code68607"> <br><script type="text/javscrpt "> //<![CDATA[<BR>alert(tmp); //정의되지 않은 출력<BR>var tmp = 1;<BR>alert(tmp); //출력 1<BR>//]] >&lt ;/script><br> </div> <br>4. 동일한 스크립트에서 함수 정의는 함수 호출 뒤에 나타날 수 있지만 두 개의 코드로 구성되어 있고 함수 호출이 첫 번째에 있는 경우 코드 조각을 사용하면 함수 정의되지 않은 오류가 보고됩니다. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="60321" class="copybut" id="copybut60321" onclick="doCopy('code60321')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code60321"> <br><script type="text/javscrpt "> //<![CDATA[<BR>aa();                                                                                   | ;/ /<![CDATA[<BR>aa(); //출력 1 <BR>function aa(){alert(1);}<BR>//]]></script>


5.document.write()는 스크립트 문서의 위치에 출력을 기록합니다. 브라우저는 documemt.write()가 있는 문서의 내용을 구문 분석한 후 계속해서 document.write()에 의해 출력된 콘텐츠를 확인한 다음 HTML 문서를 계속 구문 분석합니다.

코드 복사 코드는 다음과 같습니다.

');
문서 .write( '');
//]]>



test.js의 내용은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var tmpStr = 1;

alert(tmpStr);


•Firefox 및 Opera의 팝업 값 순서는 1, 2, I am 1, 3

•Firefox 및 Opera의 팝업 값 순서입니다. IE는 2, 1, 3이고 브라우저는 tmpStr을 사용할 수 없다는 오류를 보고합니다.
을 정의한 이유는 IE가 문서 도중 다음 줄을 실행하기 전에 SRC의 Javascript 코드가 로드될 때까지 기다리지 않았기 때문일 수 있습니다. .write이므로 2가 먼저 팝업되어 document.write('document.write(" When I Call tmpStr, "tmpStr)')로 실행되었는데 tmpStr이 정의되지 않아 오류가 보고되었습니다.

이 문제를 해결하려면 HTML 구문 분석 원리를 사용하여 하나의 HTML 태그를 구문 분석한 후 다음 태그를 실행하고 코드를 분할하여 이를 달성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

');
//]]>
');
//]]>

이렇게 하면 값이 IE 및 기타 환경에서 출력됩니다. 브라우저 순서는 항상 동일합니다: 1, 2, 나는 1, 3입니다.

3. 페이지에서 Javascript 실행 순서를 변경하는 방법
1. onload

를 사용하여 코드를 복사합니다 코드는 다음과 같습니다.

출력 값 순서는 2, 1입니다.

winodws.onload가 여러 개인 경우 가장 효과적인 것만 적용됩니다. 해결 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

window.onload = function(){f();f1();f2();....}

레벨 2 DOM 이벤트 유형 사용

코드 복사 코드는 다음과 같습니다.

if(document.addEventListener ){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
} else{
window .attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}

2 defer는 IE에서 사용할 수 있으며, defer의 기능은 코드를 로드하고 즉시 실행하지 않는 것입니다. 이는 window.onload와 다소 유사하지만 다음과 같은 제한 사항이 없습니다. window.onload. 재사용이 가능하지만 IE에서만 유효하므로 위의 예를

코드 복사 코드는 다음과 같습니다.

');
document.write('');
//]]>

이렇게 하면 IE는 오류가 보고되었으며 출력 값의 순서는 1, 3, 2, 나는 1이 되었습니다
HTML 파서가 스크립트를 발견하면 일반적으로 문서 파싱을 종료하고 스크립트가 실행될 때까지 기다려야 합니다. 이 문제를 해결하기 위해 HTML4 표준에서는 defer를 정의합니다. HTML 문서 구문 분석을 계속하고 스크립트 실행을 지연하도록 브라우저에 요청하려면 defer를 사용합니다. 이 지연은 스크립트가 외부 파일에서 로드될 때 매우 유용하므로 브라우저는 실행을 계속하기 전에 모든 외부 파일이 로드될 때까지 기다릴 필요가 없으므로 성능을 효과적으로 향상시킬 수 있습니다. IE는 현재 defer 속성을 지원하는 유일한 브라우저이지만 IE는 defer 속성을 올바르게 구현하지 않습니다. 왜냐하면 지연된 스크립트는 지연되지 않은 다음 스크립트까지만 지연되는 것이 아니라 항상 문서가 끝날 때까지 지연되기 때문입니다. 이는 IE에서 지연된 스크립트의 실행 순서가 매우 혼란스럽고 후속 지연되지 않은 스크립트에 필요하지 않은 함수 및 변수를 정의할 수 없음을 의미합니다. IE의 모든 연기 스크립트 실행 시간은 HTML 문서 트리가 설정된 후 window.onload 이전이어야 합니다.

3. Ajax를 사용하세요.

xmlhttpRequest는 외부 문서의 로딩 상태를 결정할 수 있기 때문에 코드의 로딩 순서를 변경할 수 있습니다