JavaScript가 브라우저에 로드되는 방식

브라우저에서 JavaScript를 로드하는 방법: 1. 웹페이지를 구문 분석합니다. 2. 링크를 통해 외부 CSS를 도입합니다. 4. 비동기 로딩을 위한 스레드를 생성합니다. 6. 연기 스크립트 실행 순서를 따릅니다. 7. 이벤트 중심 단계로 전환합니다.

이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, javascript 버전 1.8.5.

오늘은 JavaScript의 로딩 프로세스에 대해 공유하겠습니다. 이는 특정 참조 값을 가지며 모든 사람에게 도움이 되기를 바랍니다.

JavaScript 로딩은 시작되는 순간부터 브라우저가 모든 것을 순서대로 완료할 때까지 진행됩니다. 대략적으로 단계는 문서 객체 생성 ==> 문서 파싱 완료 ==> 문서 로딩 및 실행으로 나눌 수 있는데, 이에 대해서는 글에서 자세히 소개하겠습니다.

로딩 프로세스

(1) 웹페이지 파싱은 HTML 요소와 해당 텍스트 내용을 파싱하고, 문서에 객체와 텍스트를 추가하며, 문서를 로딩하는 것입니다

문서 파싱

(2) 링크를 통해 외부 소개 CSS를 작성하고, 스레드를 생성하고, 비동기적으로 로드합니다.

(3) 스크립트를 통해 외부 js를 도입하고 async 및 defer가 설정되지 않았습니다. 브라우저는 동기적으로 로드되고 차단됩니다.

(4) js가 로드될 때까지 기다렸다가 이에 대해 async 및 defer를 설정하면 브라우저가 그 중 async는 스크립트가 로딩된 후 바로 실행됩니다. (참고: 비동기 로딩을 위해서는 document.write() 사용을 금지해야 합니다.)

(5) img와 같은 src가 있는 속성을 만났을 때 , 먼저 dom 구조를 정상적으로 구문 분석한 다음 브라우저가 이를 비동기적으로 src로 로드하고 계속해서 문서를 구문 분석할 수 있습니다. 태그가 표시되면 img가 scr을 로드할 때까지 기다리지 않고 dom 트리가 직접 생성됩니다.

(6) 문서 파싱이 완료되면 defer로 설정된 모든 스크립트가 순서대로 실행됩니다. (비동기와의 차이점에 유의하세요. 하지만 document.write() 사용도 금지됩니다);

(7) 문서 객체는 DOMContentLoaded 이벤트를 트리거합니다. 이는 프로그램 실행이 동기 스크립트 실행 단계에서 이벤트 중심의 무대.

(8) 모든 비동기 스크립트가 로드 및 실행되고 img 등이 로드되면(모든 페이지가 로드된 후) document.readyState = 'complete'이고 window 객체가 로드 이벤트를 트리거합니다.

(9) 앞으로는 사용자 입력, 네트워크 이벤트 등이 비동기 응답 방식으로 처리됩니다

Note

프로그램 작성 시에는 아래 스크립트 태그를 작성하는 것이 가장 좋습니다. 위의 것은 div를 동작시킬 수 있을 뿐만 아니라, dom을 파싱한 후 바로 처리할 수 있어서 효율적이지만, 맨 아래에 작성하는 것이 가장 좋습니다

<div style="width:100px;height:100px;background: pink;">
<script>
var div=document.getElementsByTagName("div")[0]
div.onclick=function(){
this.style.background="hotpink";
}
</script>

요약: 위는 이 기사의 전체 내용입니다. 이 기사를 통해 모든 사람이 JavaScript에 대해 더 많이 배울 수 있기를 바랍니다.

위 내용은 JavaScript가 브라우저에 로드되는 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!