자세한 예제 코드를 사용하여 JavaScript 로딩 및 실행을 보다 효율적으로 만드는 방법
- 伊谢尔伦원래의
- 2017-07-21 16:04:031297검색
스크립트는 HTML 페이지의 헤드나 본문에 배치할 수 있습니다.
스크립트를 본문에 넣으세요. 브라우저가 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 만나면 브라우저는 스크립트가 텍스트를 삽입할지 html 태그를 삽입할지 알 수 없으므로 브라우저는 html 페이지 분석을 중단하고 스크립트를 실행합니다. src를 사용하여 스크립트를 추가할 때 브라우저는 동일한 작업을 수행합니다. 스크립트가 처리되는 동안 페이지 렌더링 및 사용자 상호 작용이 완전히 차단됩니다. 스크립트 다운로드 및 실행은 페이지를 렌더링하는 데 사용되는 이미지와 같은 다른 리소스의 다운로드를 차단합니다.
스크립트 위치
위의 이유로 스크립트는 항상 페이지 하단, 36cc49f0c466276486e50c850b7e4956 앞에 배치되어야 합니다.
간단한 예:
<html> <head> <title>Script Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Hello world!</p> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="file3.js"></script> </body> </html>
스크립트 병합
스크립트는 블록 페이지 렌더링을 다운로드하므로 스크립트가 인라인인지 외부인지에 관계없이 페이지에서 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 사용을 줄여야 합니다. 외부 스크립트를 처리할 때 상황은 특별합니다. 요청을 설정하는 데 많은 시간이 걸리기 때문에 브라우저가 100kb 스크립트를 다운로드하는 데 걸리는 시간은 25kb 스크립트 4개보다 훨씬 적습니다. 따라서 페이지에서는 외부 스크립트에 대한 참조를 최소화해야 합니다.
Non-blocking script
비밀은 페이지 로딩이 완료된 후, 즉 윈도우 객체의 onload 이벤트가 발생하기 전에 스크립트를 로딩하는 것입니다. 다음은 이를 구현하는 여러 가지 방법입니다.
1. defer를 사용하세요.
<html>
<head>
<title>Script Defer Example</title>
</head>
<body>
<script defer>
alert("defer");
</script>
<script>
alert("script");
</script>
<script>
window.onload = function(){
alert("load");
};
</script>
</body>
</html>페이지 팝업 상자가 나타나는 순서: 스크립트/지연/로드 이 기술의 단점은 IE4+에서만 지원된다는 것입니다. 그리고 FF3.5+.
비차단 스크립트(계속)
2. 동적 스크립트 요소
3f1c4e4b6b16bbbd69b2ee476dc4f83a는 일반 HTML 태그와 본질적으로 다르지 않으므로 표준 DOM 메서드를 사용하여 스크립트 파일 참조를 동적으로 추가할 수 있다는 점을 알아야 합니다. 방법은 다음과 같습니다.
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);이 태그를 html에 추가하면 스크립트 파일 다운로드가 시작됩니다. 이 방법의 한 가지 특징은 파일 다운로드 및 실행이 HTML 페이지의 다른 부분 처리를 차단하지 않는다는 것입니다. 일반적으로 이러한 스크립트를 6c04bd5ca3fcae76e30b72ad730ca86d보다 93f0f5c25f18dab9d176bd4f6de5d30e에 배치하는 것이 더 안전합니다. 특히 파일에 포함된 코드가 페이지의 로드 이벤트에서 실행되어야 하는 경우 더욱 그렇습니다. 본문의 내용이 완전히 로드되지 않은 경우 IE에서는 "작업 금지" 오류도 표시됩니다.
스크립트 파일이 다운로드되면 즉시 스크립트가 실행됩니다. (FF와 Opera는 같은 방식으로 추가된 이전 스크립트의 실행을 기다립니다.) 스크립트가 자체적으로 실행될 때는 괜찮습니다. 그러나 스크립트에 페이지의 다른 스크립트에서 사용하는 인터페이스가 포함되어 있는 경우 해당 스크립트가 로드되어 사용 가능한지 확인해야 합니다. 다행히 Firefox, Opera, Chrome 및 Safari 3+는 스크립트 태그의 src 값을 얻은 후 로드 이벤트를 트리거합니다.
var script = document.createElement("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
alert("Script loaded!");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);IE에서는 또 다른 솔루션 준비 상태 변경 이벤트를 제공합니다. 다운로드한 스크립트 파일의 상태에 따라 ReadyState 값은 다음과 같습니다.
"uninitialized"
Default state
"loading"
다운로드 시작
"loaded"
다운로드 완료
"interactive"
다운로드가 완료되었지만 아직 완료되지 않음 모두 사용 가능
"완료"
모든 데이터 사용 가능
IE 구현:
var script = document.createElement("script")
script.type = "text/javascript";
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
alert("Script loaded.");
}
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);위 내용은 자세한 예제 코드를 사용하여 JavaScript 로딩 및 실행을 보다 효율적으로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!