JavaScript 함수의 지연 로딩 구현 및 장점 소개_javascript 기술

나는 최근 고급 JavaScript 프로그래밍을 통해 많은 것을 배웠습니다. 앞으로 며칠 안에 몇 가지 독서 노트를 작성할 것입니다. 이전에 Ajax에 대한 사전 이해에 대한 에세이를 작성했습니다. 브라우저 호환성으로 인해 작성된 코드에서는 함수를 올바른 방향으로 안내하기 위해 많은 수의 if 판단을 사용합니다. 암호.

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

이 함수를 호출할 때마다 먼저 브라우저 기능을 확인해야 합니다. - XMLHyypRequest 개체에서 지원되지 않는 경우 ActiveX 기반 XMLHttpRequest의 각 버전을 확인합니다. 실제로 첫 번째 실행 후 브라우저가 특정 XMLHttpRequest 개체를 지원하는 경우입니다. 이 지원은 다음에 실행될 때 지원됩니다. 속성은 병렬 감지를 수행할 필요가 없습니다. if 문이 하나만 있어도 실행은 확실히 느립니다. if 문을 매번 실행할 필요가 없도록 만들면 호출이 자주 발생하는 경우 실행 속도가 향상될 수 있습니다. 해결책은 지연 로딩이라는 기술입니다.


지연 로딩
지연 로딩이란 함수가 처음 호출되는 동안 함수 실행 분기만 실행된다는 의미입니다. 원래 함수에 대한 호출이 실행 분기를 거치지 않아도 되도록 적절한 방식으로 실행되는 다른 함수로 덮어쓰게 됩니다. createXHR 함수는 다음과 같이 다시 작성할 수 있습니다.
var xhr=null;
if(typeof XMLHttpRequest !='undefine'){

xhr = new XMLHttpRequest() createXHR=function(){ return new XMLHttpRequest(); } }else{ try { xhr = new ActiveXObject("Msxml2.XMLHTTP")

createXHR=function(){

return new ActiveXObject("Msxml2.XMLHTTP") ");
}
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
createXHR=function(){
return new ActiveXObject("Microsoft.XMLHTTP")
}
}
catch(e) {
createXHR=function(){
return null
}
}
}
}
return xhr;
}


이 지연 로드 createXHR이 처음 실행될 때 , 각 분기는 createXHR을 다시 할당하고 원래 함수를 덮어쓰고 xhr 객체를 반환하며 다시 작성된 함수는 두 번째 실행 중에 직접 호출되므로 각 분기를 실행하고 다시 검색할 필요가 없습니다.


장점


지연 로딩 함수에는 두 가지 주요 장점이 있습니다. 첫 번째는 명백한 효율성 문제입니다. 단, 함수가 처음 실행될 때 할당을 의미합니다. 실행 속도는 느리지만 반복 검색을 피하기 때문에 후속 호출은 더 빨라집니다. 두 번째는 함수가 실제로 호출될 때만 실행할 적절한 코드가 실행된다는 것입니다. 많은 JavaScript 라이브러리는 로드할 때 브라우저에 따라 다릅니다. 많은 브랜치를 실행하고 모든 것을 설정하면 지연 로딩 기능이 초기 스크립트의 실행 시간에 영향을 주지 않고 지연을 계산합니다.