이전에는 JavaScript 엔진의 구문 분석 메커니즘을 통해 JavaScript의 작동 원리를 살펴보았습니다. 아래에서는 페이지에서 JavaScript 코드의 실행 순서를 설명하기 위해 보다 생생한 예를 사용합니다. JavaScript 엔진의 작동 메커니즘이 기본 동작에 속하기 때문에 상대적으로 심오하다면 JavaScript 코드의 실행 순서는 더 생생합니다. 물론 JavaScript 코드의 실행 순서를 직관적으로 느낄 수 있기 때문입니다. 상대적으로 복잡하기 때문에 JavaScript 언어를 살펴보기 전에 프로파일링하는 것도 필요합니다.
1.1 HTML 문서 흐름 순서대로 자바스크립트 코드 실행
우선 브라우저에서 HTML 문서를 파싱하는 과정은 다음과 같다는 점을 독자들은 알아야 한다. 브라우저는 문서 흐름을 따른다. 위에서 아래로 아래는 페이지 구조와 정보를 단계별로 분석한 것입니다. 내장된 스크립트인 JavaScript 코드도 HTML 문서의 구성 요소로 간주되므로 로드 중 JavaScript 코드의 실행 순서도 스크립트 태그 <script>가 나타나는 순서에 따라 결정됩니다. 예를 들어 아래 문서 페이지를 탐색하면 코드가 위에서 아래로 단계별로 구문 분석되는 것을 볼 수 있습니다. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="48269" class="copybut" id="copybut48269" onclick="doCopy('code48269')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div>
<div class="codebody" id="code48269">
<br><script><br>alert( "상위 스크립트");<br></script>
<script>alert("head script");<BR></script> ;<BR><title></title><BR></head><BR><body><BR><script><BR>alert("페이지 스크립트");<BR>< ;/ script><BR></body></html><BR><script><BR>alert("하단 스크립트");<BR></script>
스크립트 태그 <script>의 src 속성을 통해 외부 JavaScript 파일 스크립트를 가져오는 경우 해당 명령문이 나타나는 순서대로 실행되며 실행 프로세스는 문서 로딩의 일부입니다. 외부 JavaScript 파일이므로 실행이 지연되지 않습니다. 예를 들어 위 문서의 헤드와 본문 영역에 있는 스크립트를 외부 자바스크립트 파일로 옮긴 후 src 속성을 통해 가져옵니다. 계속해서 페이지 문서를 미리 보면 동일한 실행 순서를 볼 수 있습니다. <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="39983" class="copybut" id="copybut39983" onclick="doCopy('code39983')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code39983"> <br><script> <p>alert("상위 스크립트");</p> <p></script>
<제목>
<본문>
