JavaScript_javascript 스킬의 실행 순서에 대한 간략한 논의
- WBOY원래의
- 2016-05-16 15:46:291143검색
최신 브라우저에서는 JavaScript를 병렬로 다운로드할 수 있지만(일부 브라우저) JavaScript의 종속성을 고려하여 여전히 도입된 순서대로 실행됩니다.
이 글은 제가 자바스크립트를 배우면서 책을 읽으며 배운 내용 중 일부를 기록하여 기억력을 깊게 하고 나중에 복습할 수 있도록 정리하고 기록했습니다.
html 문서의 실행 순서
js 코드 실행 순서를 비교한 이미지를 보면, 사용자는 이 실행 순서를 직관적으로 느낄 수 있습니다. 그러나 js 코드의 실행 순서는 더 복잡합니다. 가끔 우리는 html로 js 코드를 작성하는데, 브라우저에서 html 문서를 파싱하는 과정은 다음과 같습니다. 브라우저는 문서 흐름에 따라 페이지 구조와 정보를 위에서 아래로 점진적으로 파싱합니다. 삽입된 스크립트로서 js 코드도 html 문서의 구성 요소로 간주되므로 로드 시 js 코드의 실행 순서도 스크립트 태그 3f1c4e4b6b16bbbd69b2ee476dc4f83a가 나타나는 순서에 따라 결정됩니다. (아래는 밤)
<!DOCTYPE html>
<script>
console.log("顶部脚本");
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
console.log("头部脚本");
</script>
</head>
<body>
<script>
console.log("页面脚本");
</script>
</body>
</html>
<script>
console.log("底部脚本");
</script>
또한 스크립트 태그 3f1c4e4b6b16bbbd69b2ee476dc4f83a의 src 속성을 통해 가져온 외부 js 파일 스크립트의 경우에도 해당 명령문이 나타나는 순서대로 실행되며 실행 프로세스는 문서 로딩의 일부입니다. 외부 js 문서이며 실행이 연기되었습니다.
// 先加载 b.js 并且执行里面的代码 <script src="b.js"></script> // 然后在按顺序执行下面的代码 <script> console.log(1); </script>
사전 컴파일
js 엔진은 구문 분석할 때 선언된 모든 변수와 함수를 사전 컴파일합니다.
가변 프로모션
console.log(a); // undefined var a = 1; console.log(a); // 1
준비 기능
f(); // 1
function f() {
console.log(1);
};
세부정보: JavaScript 변수 선언 호이스팅
코드를 청크로 실행
JS는 코드를 블록 단위로 실행합니다. 소위 코드 블록은 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그로 구분된 코드 세그먼트입니다. (아래는 밤)
<script>
// 代码段1
var a = 1;
</script>
<script>
// 代码段2
function f() {
console.log(1);
};
</script>
js는 코드블록 단위로 실행되기 때문이죠. 브라우저가 HTML 문서 스트림을 구문 분석할 때 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 발견하면 js는 코드를 미리 컴파일한 다음 실행하기 전에 코드 블록이 로드될 때까지 기다립니다. 실행 후 브라우저는 계속해서 Ximen의 HTML 문서 흐름을 구문 분석하고 js는 다음 코드 블록을 처리할 준비가 됩니다.
js는 블록 단위로 실행되기 때문에 js 블록의 후속 블록에 선언된 변수나 함수를 호출하면 구문 오류가 발생합니다. 그러나 서로 다른 블록은 전역 범위에 속합니다. 즉, 블록 간의 변수와 함수를 공유할 수 있습니다. (아래는 밤)
<script>
// 代码段1
console.log(a);
f();
</script>
<script>
// 代码段2
var a = 1;
function f() {
console.log(1);
};
</script>
js는 코드를 블록 단위로 처리하고 HTML 문서 흐름의 구문 분석 순서를 따르기 때문에 위 예에서는 구문 오류가 표시됩니다. 그러나 문서 스트림이 로드된 후 다시 액세스하면 이 오류가 발생하지 않습니다. (아래는 밤)
<script>
window.onload = function(){ // 页面初始化事件处理函数
// 代码段1
console.log(a);
f();
}
</script>
<script>
// 代码段2
var a = 1;
function f() {
console.log(1);
};
</script>
보안상의 이유로 js 코드 실행은 일반적으로 페이지가 초기화된 후에만 허용되므로 js 실행에 일부 네트워크 속도의 영향을 방지할 수 있습니다. 동시에 js 실행 시 html 문서 흐름의 제한도 방지합니다.
요약하면 JavaScript 실행 단계는 다음과 같습니다.
1. 첫 번째 코드 블록을 먼저 읽어보세요
2. 코드 블록에 대해 구문 분석을 수행합니다. 구문 오류가 있으면 5단계로 바로 이동합니다.
3. var 변수 및 함수로 정의된 함수를 "사전 컴파일"합니다(할당 함수는 사전 컴파일되지 않음)
4. 코드 블록을 실행하고 오류가 있으면 오류를 보고합니다
5. 다음 코드 블록이 있으면 다음 코드 블록을 읽고 2단계를 반복합니다
6. 끝