The First JavaScript Program "에서는 가져온 JavaScript 파일이 <script> 태그가 문서에 나타나는 순서대로 실행되고 실행 프로세스가 문서 구문 분석의 일부이며 별도로 구문 분석되거나 지연되지 않습니다.
일반적으로 문서 의 <head> 태그에 Java Script 스크립트 또는 가져온 JavaScript 파일 을 포함합니다 . 즉, HTML 부분을 계속 구문 분석하기 전에 모든 JavaScript 코드가로드, 구문 분석 및 실행될 때까지 기다려야합니다. 로드 된 JavaScript 파일이 크면 HTML 문서 구문 분석이 지연되기 쉽습니다.
이러한 문제를 피하기 위해 웹 애플리케이션 개발시 <body> 뒤에 자바 스크립트 파일 가져 오기 작업을 추가하여 브라우저가 웹 페이지의 내용을 파싱하여 표시 한 다음 자바 스크립트 파일을로드하여 웹 페이지의 응답 속도를 높이는 것이 좋습니다.
JavaScript 파일 실행 지연<script> 태그에는 부울 속성 defer 가 있습니다.이 속성을 설정하면 페이지가 파싱 된 후 자바 스크립트 파일 실행이 지연 될 수 있습니다.예다음 예제에서 외부 파일 test.js에 포함 된 스크립트는 브라우저가 실행하기 전에 웹 페이지 구문 분석을 완료 할 때까지 지연됩니다. 브라우저는 먼저 웹 페이지의 제목과 단락 텍스트를 표시 한 다음 텍스트를 프롬프트합니다. defer 속성이 설정되어 있지 않으면 실행 순서가 반대로됩니다.
test.html 소스 코드 :
<! DOCTYPE html >
<html>
<head>
<메타 문자셋 = "UTF-8" >
<스크립트 유형 = "text / javascript" defer src = "test.js" > </ script>
</ head>
<body>
<h1> 웹 페이지 제목 </ h1>
<p> 본문 내용 </ p>
</ body></ html>
test.js 소스 코드 :
경고 ( "외부 파일" );
참고 : defer 속성은 <script> 태그에 포함 된 JavaScript 스크립트가 아닌 외부 JavaScript 파일에 적용됩니다.
비동기 적으로 JavaScript 파일로드기본적으로 웹 페이지는 외부 자바 스크립트 파일을 동기식으로로드합니다. 자바 스크립트 파일이 상대적으로 크면 뒤에있는 HTML 코드의 구문 분석에 영향을줍니다. 위에서 언급 한 한 가지 해결책은 JavaScript 파일을 마지막으로로드하는 것입니다.
이제 <script> 태그의 async 속성 을 설정하여 브라우저가 JavaScript 파일을 비동기 적으로로드하도록 할 수 있습니다. 즉, JavaScript 파일이로드 될 때 브라우저는 일시 중지되지 않고 계속 구문 분석 할 수 있습니다. 이것은 시간을 절약하고 응답 속도를 향상시킵니다.
예<script> 태그에 비동기 속성을 설정 한 다음 브라우저에서 미리 보면 페이지 제목과 단락 텍스트가 동기화되거나 먼저 표시되고 프롬프트 텍스트가 동기화되는 것을 볼 수 있습니다. 비동기 속성이 설정되지 않은 경우 페이지 제목 및 단락 텍스트를 구문 분석하고 표시하기 전에 프롬프트 텍스트가 팝업됩니다.
<! DOCTYPE html >
<html>
<head>
<메타 문자셋 = "UTF-8" >
<스크립트 유형 = "text / javascript" async src = "test.js" > </ script>
</ head>
<body> <h1> 웹 페이지 제목 </ h1> <p> 본문 내용 </ p></ body></ html>
async는 HTML5의 새로운 부울 속성입니다. async 속성을 설정하면 <script> 태그의 배치를 고려할 필요가 없습니다. 사용자는 습관에 따라 <head> 태그에 많은 대용량 자바 스크립트 라이브러리 파일을 계속 넣을 수 있습니다.
카테고리 없음
JS 파일의 지연 및 비동기로드
반응형
반응형