JavaScript 코드를 HTML 페이지에 삽입하는 주요 방법은 스크립트 태그를 통한 것입니다. 여기에는 두 가지 형태가 포함됩니다. 첫 번째는 스크립트 태그 사이에 JS 코드를 직접 삽입하는 것이며, 두 번째는 SRC 속성을 통해 외부 JS 파일을 소개하는 것입니다. 통역사는 JS 코드를 구문 분석하고 실행하는 동안 나머지 페이지의 렌더링을 차단하므로 많은 양의 JS 코드가있는 페이지에 대한 장기 블랭킹 및 지연이 발생합니다. 이 문제를 피하기 위해 </body> 태그 앞에 모든 JS 참조를 배치하는 것이 좋습니다.
스크립트 태그의 두 가지 속성, 연기 및 비동기 속성이 있으므로 스크립트 태그 사용은 세 가지 상황으로 나뉩니다.
1. <script src = "example.js"> </script>
연기 또는 비동기 속성이 없으면 브라우저는 즉시 해당 스크립트를로드하고 실행합니다. 즉, 스크립트 태그 후 문서를 렌더링하기 전에 문서 요소의 후속로드를 기다리지 않고 읽은 후로드 및 실행을 시작합니다. 이것은 후속 문서의로드를 차단합니다.
2. <스크립트 Async src = "example.js"> </script>
비동기 속성을 사용하면 후속 문서의로드 및 렌더링이 JS 스크립트의로드 및 실행, 즉 비동기 실행과 병렬로 수행됨을 의미합니다.
3. <스크립트 SRC = "example.js"> </script>를 연기합니다
연기 속성을 사용하면 후속 문서를로드하는 프로세스와 JS 스크립트의로드 (이 시간에만로드되지만 실행되지 않음)는 병렬 (비동기 적으로) 수행됩니다. JS 스크립트의 실행은 문서의 모든 요소가 구문 분석 될 때까지 기다려야하며 DomContentLoaded 이벤트가 실행을 트리거하기 전에 기다려야합니다.
다음 수치는 세 가지의 차이를 직관적으로 볼 수 있습니다.
그중에서도 Blue는 JS 스크립트 네트워크의 로딩 시간을 나타내고 빨간색은 JS 스크립트의 실행 시간을 나타내고 녹색은 HTML의 해상도를 나타냅니다.
그림에서 우리는 다음과 같은 점을 명확히 할 수 있습니다.
1. 연기 및 비동기는 네트워크 로딩 프로세스에서 일관되며 둘 다 비동기 적으로 실행됩니다.
2. 둘의 차이점은 스크립트가로드 된 후에 실행될 때입니다. 연기가 응용 프로그램 스크립트로드 및 실행에 대한 대부분의 시나리오의 요구 사항과 더 일치한다는 것을 알 수 있습니다.
3. 지연 속성이있는 여러 스크립트가있는 경우로드 순서로 스크립트를 실행합니다. 비동기의 경우 로딩 및 실행이 밀접하게 연결됩니다. 선언 순서에 관계없이 부하가 완료되는 한 즉시 실행됩니다. 종속성을 전혀 고려하지 않기 때문에 응용 프로그램 스크립트에는 거의 사용되지 않습니다.
요약:
연기와 비동기의 공통점은 JS 파일을 병렬로로드 할 수 있고 페이지의로드를 차단하지 않는다는 것입니다. 차이점은 연기가로드 된 후 JS가 실행하기 전에 전체 페이지를로드 할 때까지 대기한다는 것입니다. Async는 로딩 직후 JS를 실행합니다. 따라서 JS의 엄격한 실행 순서가있는 경우 연기를 사용하는 것이 좋습니다.
위의 내용은 편집자가 소개 한 JS의 연기와 비동기 속성의 차이에 대한 자세한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!