함수의 지연 로딩을 사용하여 JavaScript 코드 실행 효율성 향상_javascript 팁

JavaScript 코드에서는 브라우저 간의 동작 차이로 인해 브라우저 특성을 확인하고 다양한 브라우저와의 호환성 문제를 해결하기 위해 함수에 수많은 if 문을 포함하는 경우가 많습니다. 예를 들어 DOM 노드에 이벤트를 추가하는 가장 일반적인 기능은 다음과 같습니다.

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

function addEvent (type, element, fun) {
if (element.addEventListener) {
element.addEventListener(type, fun, false)
}
else if(element .attachEvent) {
element.attachEvent('on' 유형, fun)
}
else{
element['on' 유형] = fun; 🎜>

addEvent 함수가 호출될 때마다 브라우저에서 지원하는 기능을 확인합니다. 먼저 addEventListener 메서드가 지원되는지 확인하고, 지원되지 않는 경우에는 지원합니다. 아직 지원되지 않는 경우 dom 레벨 0 메서드를 사용하여 이벤트를 추가하세요. 이 프로세스는 addEvent 함수가 호출될 때마다 수행되어야 합니다. 실제로 브라우저가 메서드 중 하나를 지원하면 항상 지원하므로 다른 분기를 감지할 필요가 없습니다. 매번 실행할 필요가 없으며 코드가 더 빠르게 실행될 수 있습니다.

해결책은 지연 로딩이라는 기술입니다.

소위 지연 로딩이란 함수의 if 분기가 한 번만 실행되고 나중에 함수가 호출될 때 지원되는 분기 코드를 직접 입력한다는 의미입니다. 지연 로딩을 구현하는 방법에는 두 가지가 있습니다. 첫 번째는 함수가 처음 호출될 때 함수 자체를 두 번 처리하여 분기 조건을 충족하는 함수로 호출하는 것입니다. 원래 함수일 필요는 없습니다. 실행 분기를 통과한 후 다음과 같은 방법으로 지연 로딩을 사용하여 addEvent()를 다시 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 함수 addEvent(유형, 요소, 재미) {

if (element.addEventListener) {

addEvent = function (type, element, fun) {
element.addEventListener(type, fun, false)
}
}
else if( element.attachEvent){
addEvent = function (type, element, fun) {
element.attachEvent('on' type, fun)
}
}
else{
addEvent = 함수(유형, 요소, 재미) {
요소['on' 유형] = 재미
}
}
return addEvent(유형, 요소, 재미); >}


이 지연 로드 addEvent()에서 if 문의 각 분기는 addEvent 변수에 값을 할당하여 원래 함수를 효과적으로 덮어씁니다. 마지막 단계는 새로운 할당 함수를 호출하는 것입니다. 다음에 addEvent()가 호출되면 새로 할당된 함수가 직접 호출되므로 if 문을 실행할 필요가 없습니다.

지연 로딩을 구현하는 두 번째 방법은 함수 선언 시 적절한 함수를 지정하는 것입니다. 이런 방식으로 함수가 처음 호출될 때 성능 손실은 없지만 코드가 로드될 때 약간의 성능 손실만 발생합니다. 다음은 이 아이디어에 따라 다시 작성된 addEvent() 입니다.

코드 복사

코드는 다음과 같습니다. var addEvent = (function () { if (document.addEventListener) {

return function (type, element, fun) {

element.addEventListener(type, fun, false)
}
}
else if ( document.attachEvent ) {
return 함수(유형, 요소, 재미) {
element.attachEvent('on' 유형, 재미)
}
}
else {
return function (type , element, fun) {
element['on' type] = fun;
}
}
})();


이 예는 익명의 자체 실행 함수를 생성하고 다른 분기를 사용하여 어떤 함수를 사용해야 하는지 결정합니다. 실제 논리는 함수 표현식을 사용하고(var를 사용하여 함수 정의) 익명을 추가한다는 점입니다. function.function이며, 각 분기는 올바른 함수를 반환하고 이를 즉시 변수 addEvent에 할당합니다.

지연 로딩 기능의 장점은 if 분기를 한 번만 실행하므로 함수가 실행될 때마다 if 분기와 불필요한 코드가 실행되지 않아 코드 성능이 더 향상된다는 것입니다. 적합합니다. 귀하의 필요에 따라 다릅니다.