Javascript의 defer 속성 및 async 속성 사용법에 대한 자세한 설명
- 云罗郡主앞으로
- 2018-10-17 15:10:121900검색
이 글은 자바스크립트에서 defer 속성과 async 속성의 사용법에 대해 자세히 설명하고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
js 파일을 비동기식으로 로드해야 하는 이유:
비동기를 사용하지 않으면 문서에서 js 코드를 로드할 때 다른 리소스의 다운로드를 차단하여 빈 페이지가 생성됩니다.
(1) 상단에 배치된 js 스크립트는 브라우저가 외부 링크 파일의 코드를 다운로드하고 실행하는 데 시간이 걸립니다. 이로 인해 명백한 지연이 발생하고 사용자가 콘텐츠를 탐색할 수 없고 볼 수 없습니다. 페이지와 상호작용하세요.
(2) IE8, Firefox3.5, Safari4 및 Chrome2는 모두 Javascript 파일의 병렬 다운로드를 허용하고 스크립트 다운로드 프로세스가 서로 영향을 미치지 않지만 페이지 로드는 모든 Javascript 코드가 나타날 때까지 기다려야 합니다. 계속하기 전에 다운로드되어 실행됩니다. 따라서 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 6c04bd5ca3fcae76e30b72ad730ca86d 하단에 배치하는 것이 좋습니다.
(3) 각 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 다운로드 시 페이지 렌더링을 차단하므로 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 사용을 줄이는 것이 좋습니다. 이는 외부 링크 스크립트뿐만 아니라 인라인 스크립트에도 해당됩니다. 브라우저가 HTML 페이지를 구문 분석할 때 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 발견할 때마다 스크립트 실행으로 인해 특정 지연이 발생합니다. 또한 HTTP 요청으로 인한 추가 성능 오버헤드를 고려할 때 단일 100KB 파일을 다운로드하는 것이 4개의 25KB 파일을 다운로드하는 것보다 빠릅니다.
defer 및 async 사용법:
동일점: defer 및 async는 모두 스크립트를 비동기적으로 로드하는 데 사용됩니다. 병렬 다운로드를 사용하면 다운로드 프로세스 중에 차단이 발생하지 않습니다.
차이점:
defer:
(1)은 외부 스크립트 또는 내장 스크립트를 로드하는 데 사용할 수 있습니다. 인라인 스크립트는 IE9 이하로 제한됩니다. 주류 브라우저는 W3C의 HTML5 사양을 기반으로 합니다. defer는 src 속성이 선언된 경우에만 적용됩니다.
예:
//外部脚本<script src="1.js" defer></script>//内嵌脚本<script defer>
console.log("defer");</script>(2) defer 속성이 있는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 페이지가 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그로 구문 분석될 때 페이지의 어느 곳에나 배치될 수 있습니다. 실행되지 않습니다. DOM이 로드된 후에 실행됩니다(onload 이벤트 전에 호출됨).
async:
(1) 외부 스크립트에만 해당됩니다.
(2) 비동기 로딩이 완료된 후 즉시 실행됩니다.
첨부 파일: defer 속성에 대한 브라우저 지원에 대한 자세한 내용은 https://caniuse.com/#feat=script-defer를 참조하세요. defer를 검색하면 됩니다.
js 파일을 비동기식으로 로드해야 하는 이유:
비동기를 사용하지 않으면 문서에서 js 코드를 로드할 때 다른 리소스의 다운로드를 차단하여 빈 페이지가 생성됩니다.
(1) 상단에 있는 js 스크립트는 브라우저가 외부 링크 파일의 코드를 다운로드하고 실행하는 데 시간이 걸립니다. 이로 인해 명백한 지연이 발생하고 사용자가 콘텐츠를 탐색할 수 없으며 표시될 수 없습니다. 페이지와 상호작용하세요.
(2) IE8, Firefox3.5, Safari4 및 Chrome2는 모두 Javascript 파일의 병렬 다운로드를 허용하고 스크립트 다운로드 프로세스가 서로 영향을 미치지 않지만 페이지 로드는 모든 Javascript 코드가 완료될 때까지 기다려야 합니다. 계속하기 전에 다운로드하여 실행해야 합니다. 따라서 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 6c04bd5ca3fcae76e30b72ad730ca86d 하단에 배치하는 것이 좋습니다.
(3) 각 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 다운로드 시 페이지 렌더링을 차단하므로 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그 사용을 줄이는 것이 좋습니다. 이는 외부 링크 스크립트뿐만 아니라 인라인 스크립트에도 해당됩니다. 브라우저가 HTML 페이지를 구문 분석할 때 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 발견할 때마다 스크립트 실행으로 인해 특정 지연이 발생합니다. 또한 HTTP 요청으로 인한 추가 성능 오버헤드를 고려할 때 단일 100KB 파일을 다운로드하는 것이 4개의 25KB 파일을 다운로드하는 것보다 빠릅니다.
defer 및 async 사용법:
동일점: defer 및 async는 모두 스크립트를 비동기적으로 로드하는 데 사용됩니다. 병렬 다운로드를 사용하면 다운로드 프로세스 중에 차단이 발생하지 않습니다.
차이점:
defer:
(1)은 외부 스크립트 또는 내장 스크립트를 로드하는 데 사용할 수 있습니다. 인라인 스크립트는 IE9 이하로 제한됩니다. 주류 브라우저는 W3C의 HTML5 사양을 기반으로 합니다. defer는 src 속성이 선언된 경우에만 적용됩니다.
예:
//外部脚本<script src="1.js" defer></script>//内嵌脚本<script defer>
console.log("defer");</script>(2) defer 속성이 있는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 페이지가 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그로 구문 분석될 때 페이지의 어느 곳에나 배치될 수 있습니다. 실행되지 않습니다. DOM이 로드된 후에 실행됩니다(onload 이벤트 전에 호출됨).
async:
(1) 외부 스크립트에만 해당됩니다.
(2) 비동기 로딩이 완료된 후 즉시 실행됩니다.
첨부 파일: defer 속성에 대한 브라우저 지원에 대한 자세한 내용은 https://caniuse.com/#feat=script-defer를 참조하세요. defer를 검색하면 됩니다.
위 내용은 Javascript에서 defer 속성과 async 속성의 사용법을 자세히 설명한 것입니다. JavaScript 동영상 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.
위 내용은 Javascript의 defer 속성 및 async 속성 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!