Javascript 실행 효율성 종합 요약_기본지식-JS 튜토리얼-php.cn

자바스크립트는 매우 유연한 언어입니다. 다양한 스타일의 코드는 필연적으로 실행 효율성의 차이를 가져옵니다. , 일반적이고 피하기 쉬운 문제를 정리

Javascript 자체의 실행 효율성
Javascript의 스코프 체인, 클로저, 프로토타입 상속, eval 및 기타 기능은 다양한 마법의 기능을 제공할 뿐만 아니라 다양한 효율성 문제를 발생시킵니다. , 부주의하게 사용하면 실행 효율성이 저하됩니다.

1. 전역 가져오기
코딩 과정에서 일부 전역 변수(창, 문서, 사용자 정의 전역 변수 등)를 다소간 사용하게 됩니다. 우리 모두 알고 있듯이 로컬 범위에서 전역 변수에 액세스하려면 최상위 범위까지 전체 범위 체인을 계층별로 순회해야 하며 지역 변수의 액세스 효율성은 더 빠르고 높아질 것이므로 일부 전역 개체는 로컬에서 자주 사용됩니다. 범위를 로컬 범위로 가져올 수 있습니다. 예:

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

 //1. 
 모듈을 매개변수로 전달합니다(function(window,$){
 var xxx = window.xxx;
 $("#xxx1").xxx ();
 $ ("#xxx2").xxx();
 })(window,jQuery);

 //2. 로컬 변수에 임시 저장 
 function() {
 var doc = document;
 var global = window.global;
 } 

2. 평가 및 평가와 유사한 문제
eval을 사용하여 실행한 코드는 eval을 사용하지 않은 코드에 비해 100배 이상 느리다고 합니다. (구체적인 효율성은 테스트해보지 않았으니 관심 있는 학생들은 테스트해 보세요.)

JavaScript 코드는 실행 전에 유사한 "사전 컴파일" 작업을 수행합니다. 먼저 현재 실행 환경에서 활성 객체를 생성하고 var로 선언된 변수를 활성 객체의 속성으로 설정하지만 현재로서는 이러한 변수 할당 값은 모두 정의되지 않으며 function으로 정의된 함수도 활성 개체의 속성으로 추가되며 해당 값은 정확히 함수의 정의입니다. 그러나 "eval"을 사용하는 경우 "eval"(실제로는 문자열)의 코드는 해당 컨텍스트를 미리 인식할 수 없으며 사전에 구문 분석 및 최적화할 수 없습니다. 즉, 미리 컴파일된 작업을 수행할 수 없습니다. 따라서 성능도 크게 저하됩니다

사실 요즘 사람들은 eval을 거의 사용하지 않습니다. 제가 여기서 이야기하고 싶은 것은 두 가지 eval과 유사한 시나리오(new Function{}, setTimeout, setInterver)입니다.

setTimtout("alert(1)",1000);
setInterver("alert(1)",1000);
(new Function("alert(1)"))(); >

위 유형의 코드는 실행 효율성이 상대적으로 낮으므로 익명 메소드나 메소드 참조를 setTimeout 메소드에 직접 전달하는 것이 좋습니다

3. 클로저 종료 후 더 이상 참조되지 않는 변수를 해제합니다.

코드 복사 다음과 같습니다:

 var f = (function(){
 var a = {name:"var3"};
 var b = ["var1","var2"]; 
 var c = document.getElementByTagName("li");
 //****기타 변수
 //***일부 작업
 var res = function(){
 경고 ( a.name);
 }
 return res;
})() 

위 코드에서 변수 f의 반환 값은 즉시로 구성된 클로저에 있습니다. 실행된 함수 반환된 메서드 res, 이 변수는 이 클로저의 모든 변수(a, b, c 등)에 대한 참조를 유지하므로 이 두 변수는 항상 메모리 공간에 상주하며 특히 DOM 요소에 대한 참조는 소비됩니다. 매우 크고 res에서 a 변수의 값만 사용하므로 클로저가 반환되기 전에 다른 변수를 해제할 수 있습니다.

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

1. 리플로우를 줄인다
리플로우란?
DOM 요소의 속성(예: 색상)이 변경되면 브라우저는 해당 요소를 다시 그리도록 렌더링에 알립니다. 이 프로세스를 다시 그리기라고 합니다.

변경 사항에 요소 레이아웃(예: 너비)이 포함된 경우 브라우저는 원래 속성을 삭제하고 결과를 다시 계산하여 렌더링하여 페이지 요소를 다시 그립니다. 이 프로세스를 리플로우라고 합니다.

리플로우를 줄이는 방법
1. 먼저 문서에서 요소를 삭제한 후 수정이 완료된 후 해당 요소를 원래 위치로 되돌립니다(리플로우 작업을 많이 수행하는 경우). 요소 및 해당 하위 요소에 대한 두 가지 방법 1과 2의 효과가 더 분명해집니다.

2. 요소 표시를 "없음"으로 설정한 다음 표시를 원래 값으로 변경합니다. 수정 완료 후

3 .여러 스타일 속성을 수정하는 경우 스타일 속성을 여러 번 수정하는 대신 클래스 클래스를 정의합니다(특정 학생에게 권장)

4. 페이지의 요소 수

예를 들어

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

for( var i=0;i<100:i ){
 var child = docuemnt.createElement("li");
 child.innerHtml = "child";
 document.getElementById(" parent").appendChild(child);
} 

위 코드는 dom을 여러번 연산하게 되어 상대적으로 비효율적입니다. 다음과 같은 형태로 변경하여 documentFragment를 생성할 수 있습니다. docuemntFragment의 모든 요소는 dom 구조를 변경하지 않으며 마지막으로 단 한 번의 리플로우로 페이지에 추가합니다

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

var frag = document.createDocumentFragment();
for(var i=0;i<100:i ){
 var child = docuemnt. createElement("li");
 child.innerHtml = " child";
 frag.appendChild(child);
}
document.getElementById("parent").appendChild(frag) 

2. DOM 상태 정보 임시 저장
코드가 요소의 상태 정보에 여러 번 액세스해야 하는 경우 상태가 변수에 임시로 저장할 수 있습니다. 이는 변경되지 않고 DOM에 대한 다중 액세스로 인한 메모리 오버헤드를 방지할 수 있습니다. 일반적인 예는 다음과 같습니다.

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

var lis = document.getElementByTagName ("li");
for(var i=1;i // ***
}

위의 방법은 다음과 같습니다. 각 루프는 다음과 같이 코드를 간단히 최적화할 수 있습니다.

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

var lis = document.getElementByTagName("li");
for(var i=1 ,j=lis.length ;i //***
 } 

3. 선택기의 검색 범위를 좁히세요
DOM 요소를 검색할 때 페이지 요소의 넓은 영역을 탐색하지 말고 정확한 선택기를 사용하거나 컨텍스트를 지정하여 검색 범위를 좁히세요. 범위, jquery를 예로 들어

• 덜 모호한 일치 선택기 사용: 예를 들어 $("[name*='_fix']"), id와 같은 복합 선택기를 더 많이 사용하고 $("li.active 범위를 점차적으로 좁힙니다. ") 등

•컨텍스트 지정: 예: $(“#parent .class”), $(“.class”,$el) 등

4. 이벤트 위임 사용
사용 시나리오: 많은 레코드가 포함된 목록. 마우스 클릭 후 특정 기능을 구현하려면 각 레코드를 클릭 이벤트에 바인딩해야 합니다. 우리의 일반적인 접근 방식은 청취 이벤트를 각 레코드에 바인딩하는 것입니다. 이 접근 방식은 페이지에 많은 수의 이벤트 리스너가 발생하므로 상대적으로 비효율적입니다.

기본 원칙: 우리 모두는 DOM 사양의 이벤트가 버블링된다는 것을 알고 있습니다. 즉, 이벤트 버블링을 적극적으로 방지하지 않으면 모든 요소의 이벤트가 버블링됩니다. DOM 트리의 구조에 따라 단계별로 최상위로 올라갑니다. 이벤트 객체는 이벤트 소스를 가리키는 event.target(IE의 srcElement)도 제공하므로 상위 요소에서 이벤트를 수신하더라도 이벤트를 트리거한 원래 요소를 찾을 수 있는 것이 기본 원칙입니다. 대표단. 더 이상 고민하지 말고 예제를 살펴보겠습니다.

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

 $ ("ul li ").bind("click",function(){
 Alert($(this).attr("data"));
}) 

위의 작성 방법은 실제로 모든 li 요소가 클릭 이벤트에 바인딩되어 각 요소에 대한 마우스 클릭을 수신하므로 페이지에 많은 수의 이벤트 리스너가 있게 됩니다.

위에 소개한 이벤트 모니터링 원리에 따라 다시 작성해 보겠습니다

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

 
 $("ul").bind("click",function(e){
 if(e.target.nodeName.toLowerCase() ==="li"){
 Alert($( e.target).attr("data"));
 }
}) 

这样一来，我们就可以只添加一个事件监听器去捕获所有li上触发的事件，并做出相应的操作。

当然，我们不必每次都做事件源的判断工作，可以将其抽象一下交给工具类来完成。jquery中的delegate()方法就实现了该功能

语法是这样的$(selector).delegate(childSelector,event,data,function)，例如：

$("div").delegate("button","click",function(){
$("p").slideToggle();
})

매개변수 설명(w3school에서 인용)

参数	描述
childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。