집 > 기사 > 웹 프론트엔드 > 고성능 JavaScript 스크립트 로딩 및 실행_javascript 기술 작성

고성능 JavaScript 스크립트 로딩 및 실행_javascript 기술 작성

WBOY원래의: 2016-05-16 18:29:15732검색

스크립트는 HTML 페이지의 헤드나 본문에 배치할 수 있습니다.
스크립트를 본문에 넣으세요. 브라우저가 <script> 태그를 만나면 브라우저는 스크립트가 텍스트를 삽입할지 html 태그를 삽입할지 알 수 없으므로 브라우저는 html 페이지 분석을 중단하고 스크립트를 실행합니다. src를 사용하여 스크립트를 추가할 때 브라우저는 동일한 작업을 수행합니다. 스크립트가 처리되는 동안 페이지 렌더링 및 사용자 상호 작용이 완전히 차단됩니다. 스크립트 다운로드 및 실행은 페이지를 렌더링하는 데 사용되는 이미지와 같은 다른 리소스의 다운로드를 차단합니다. (많은 브라우저가 스크립트 병렬 다운로드 기술을 구현했지만 이 문제는 아직 해결되지 않았습니다.) <br>스크립트 위치<br>위의 이유로 인해 스크립트는 항상 페이지 하단에 배치되어야 합니다. , 즉 </body> <br><strong>간단한 예:</strong> <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="780" class="copybut" id="copybut780" onclick="doCopy('code780')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code780"> <br><html> <br><head> <br><title>스크립트 예</title><br><link rel="stylesheet" type="text/css" href=" styles.css "> <br></head> <br><body> <br><p>Hello world!</p> <br><script type="text/javascript" src ="file1 .js"></script>

병합 스크립트
스크립트 다운로드는 페이지 렌더링을 차단하므로 스크립트가 인라인인지 외부인지에 관계없이 페이지의 <script> 태그 사용을 줄여야 합니다. 외부 스크립트를 처리할 때 상황은 특별합니다. 요청을 설정하는 데 많은 시간이 걸리기 때문에 브라우저가 100kb 스크립트를 다운로드하는 데 걸리는 시간은 25kb 스크립트 4개보다 훨씬 적습니다. 따라서 페이지에서는 외부 스크립트에 대한 참조를 최소화해야 합니다. <br>비차단 스크립트<br>비밀은 페이지 로딩이 완료된 후, 즉 윈도우 객체의 onload 이벤트가 발생하기 전에 스크립트를 로딩하는 것입니다. 이를 구현하는 방법은 여러 가지가 있습니다. <br><strong>1. defer</strong> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="92494" class="copybut" id="copybut92494" onclick="doCopy('code92494')"><u>를 사용하여 코드를 복사합니다. </u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code92494"> <br> <br><title>스크립트 연기 예<br> <body> <br><script defer> <BR></script>
alert("script");
<script> <BR>window.onload = function(){ <BR>alert("load") <BR>}; ;/body> <BR></html> <BR><BR> <BR>페이지 팝업 상자가 나타나는 순서: 스크립트/지연/로드만 지원된다는 점입니다. IE4 및 FF3.5. <BR>비차단 스크립트(계속) <BR><BR>2. 동적 스크립트 요소 <BR> <BR><script> 스크립트 파일 참조를 동적으로 추가하는 DOM 메소드입니다. 방법은 다음과 같습니다. </script>

코드 복사

코드는 다음과 같습니다.

var script = document.createElement("script "); script.type = "text/javascript"; script.src = "file1.js" document.getElementsByTagName("head")[0]. appendChild(script);

이 태그가 html에 추가되면 스크립트 파일 다운로드가 시작됩니다. 이 방법의 한 가지 특징은 파일 다운로드 및 실행이 html 페이지의 다른 부분 처리를 차단하지 않는다는 것입니다. 일반적으로 이러한 스크립트를 보다 에 배치하는 것이 더 안전합니다. 특히 파일에 포함된 코드가 페이지의 로드 이벤트에서 실행되어야 하는 경우 더욱 그렇습니다. 본문의 내용이 완전히 로드되지 않은 경우 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.src = "file1.js" 
document.getElementsByTagName("head")[0].appendChild (스크립트); 

 

IE는 또 다른 솔루션 준비 상태 변경 이벤트를 제공합니다.
스크립트 파일 다운로드 상태에 따라 ReadyState 값은 다음과 같습니다.
"uninitialized"
Default state
"loading"
Start downloading
"loaded "
다운로드 완료
"대화형"
다운로드가 완료되었지만 모두 사용할 수는 없음
"완료"
모든 데이터 사용 가능
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.src = "file1.js" 
document.getElementsByTagName("head")[0].appendChild (script) 

 

합성 후 일반적인 방법은 다음과 같습니다.

코드를 복사합니다 코드는 다음과 같습니다:

function loadScript(url, callback){ 
var script = document.createElement("script") 
script.type = "text/javascript" 
if (script.readyState){ //IE 
script.onreadystatechange = function(){ 
if (script.readyState == "loaded" || script.readyState == "complete"){ 
script.onreadystatechange = null; 
callback(); 
} 
} else { //기타 
script.onload = function(){ 
callback(); 
}; 
} 
script.src = url; 
document.getElementsByTagName("head")[0].appendChild(script); 
} 
loadScript() 함수 다음과 같이 사용됩니다: 
loadScript ("file1.js", function(){ 
alert("파일이 로드되었습니다!"); 
}) 

 
이제 이 방법으로 스크립트를 동적으로 로드할 수 있지만 여전히 이러한 파일이 다운로드되는 순서를 고려해야 합니다. 주류 브라우저 중 FF와 Opera만이 스크립트 실행 순서가 사용자가 지정한 다운로드 순서와 일치함을 보장합니다. 다른 브라우저는 서버에서 반환된 순서대로 스크립트 파일을 실행합니다. 그럼에도 불구하고 여전히 대체 솔루션이 있습니다. 

코드 복사 코드는 다음과 같습니다.

loadScript ("file1.js", function(){

loadScript("file2.js", function(){ 
loadScript("file3.js", function(){ 
alert("모두 files are beenloaded!"); 
}); 
}); 
}); 

 
이런 방식으로 스크립트 파일의 다운로드 순서가 file1을 엄격하게 따르도록 할 수 있습니다. -file2-file3 방식. 

참고: 위 콘텐츠의 출처는 다음과 같습니다. <고성능 JavaScript>작성: Nicholas C. Zakas

성명：

고성능 JavaScript 스크립트 로딩 및 실행_javascript 기술 작성

관련 기사