지연된 스크립트의 HTML5 연습 및 분석
- 黄舟원래의
- 2017-02-10 14:26:311884검색
지연 스크립트란 무엇입니까? HTML5 실제 전투 및 지연 스크립트 분석은 일부 JavaScript 로딩 문제를 해결하는 데 도움이 됩니다. HTML5 실제 전투 및 분석의 지연 스크립트 기능을 사용하면 JavaScript 로딩을 위해 로드할 때 페이지의 지저분한 구조에 대해 더 이상 걱정할 필요가 없습니다.
JavaScript의 지연된 스크립트와 관련하여 이러한 속성은 HTML4.01부터 사용할 수 있습니다. 사용하는 것은 매우 편리합니다. 즉, 외부에서 참조되는 스크립트 태그에 "defer" 속성을 추가하는 것입니다. "defer" 속성을 추가해도 페이지 구조에는 영향을 미치지 않습니다. 즉, 스크립트는 로드되지만 실행되지는 않으며 페이지가 완전히 로드된 후에 순차적으로 실행됩니다. 더 잘 이해하려면 아래 예를 살펴보십시오.
이 예에서는 a.html 파일이 있을 것입니다. 이 파일에서 참조하는 스크립트 태그에는 지연된 스크립트 속성이 추가되지 않은 반면, b.html 파일에는 지연된 스크립트 속성이 추가되어 있습니다. 각각 a.js와 b.js라는 두 개의 JavaScript 파일이 있습니다. 두 파일 각각은 데모로 자체 파일 이름을 표시합니다.
a.js 코드
alert("a");
b.js 코드
alert("b");a.html 코드
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"> <title>梦龙</title> <script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> </head> <body> <p class="a"> 梦龙小站 </p> </body> </html>
b.html 코드
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"> <title>梦龙</title> <script type="text/javascript" defer="defer" src="a.js"></script> <script type="text/javascript" defer="defer" src="b.js"></script> </head> <body> <p class="a"> 梦龙小站 </p> </body> </html>
위의 예를 보면 알 수 있습니다. head 태그에서 a.js 및 b.js를 참조했지만 "defer" 속성을 설정했기 때문입니다. 따라서 참조된 a.js 및 b.js가 로드되지만 브라우저가 태그를 만난 후에 실행되어야 합니다. 브라우저는 지연 속성을 다르게 구문 분석하므로 지연 스크립트가 실행되는 순서도 다릅니다. "defer" 속성은 외부에서 참조되는 JavaScript 파일에만 적용되며 JavaScript 파일을 참조하는 여러 다른 방법을 무시합니다.
지원되는 브라우저는 IE9, Firefox 3.5, Safari 5 및 Chrome입니다. 지원되지 않는 다른 브라우저는 정상적으로 스크립트를 로드하고 처리합니다.
위 내용은 HTML5 실제 전투 내용과 지연된 스크립트 분석 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!