Javascript 실행 효율성 문제 탐색_기본 지식

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

　자바스크립트 자체의 실행 효율성
Javascript의 스코프 체인, 클로저, 프로토타입 상속, 평가 등의 기능은 다양한 마법의 기능을 제공할 뿐만 아니라, 부주의하게 사용하면 실행 효율성이 낮아질 수 있습니다.

　1. 글로벌 수입
코딩 과정에서 일부 전역 변수(창, 문서, 사용자 정의 전역 변수 등)를 어느 정도 사용하게 됩니다. JavaScript 범위 체인을 이해하는 사람이라면 누구나 로컬 범위에서 전역 변수에 액세스하려면 전체 범위가 필요하다는 것을 알고 있을 것입니다. 체인은 최상위 범위까지 계층별로 이동하므로 지역 변수의 액세스 효율성이 더 빠르고 높아집니다. 따라서 일부 전역 개체가 지역 범위에서 자주 사용되면 지역 범위로 가져올 수 있습니다. 예:

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

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

//2. 로컬 변수에 임시 저장
함수(){
var doc = 문서
var 글로벌 = 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 = (함수(){
var a = {이름:"var3"}
var b = ["var1","var2"]
var c = document.getElementByTagName("li")
//****기타 변수
//***일부 작업
var res = 함수(){
경고(a.이름); }
반환
})()

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

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

var f = (함수(){
var a = {이름:"var3"}
var b = ["var1","var2"]
var c = document.getElementByTagName("li")
//****기타 변수
//***일부 작업
//클로저가 반환되기 전에 더 이상 사용되지 않는 변수를 해제합니다.
b = c = null
var res = 함수(){
경고(a.이름);           }
반환
})()

JS 운영돔의 효율성 웹 개발 과정에서 DOM 작업에서 프런트 엔드 실행 효율성의 병목 현상이 발생하는 경우가 많습니다. DOM 작업은 성능을 많이 소모하는 작업입니다. DOM 작업 중에 성능을 최대한 절약할 수 있는 방법은 무엇일까요?

1. 리플로우 감소

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

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

리플로우를 줄이는 방법

먼저 문서에서 요소를 삭제한 다음 수정을 완료한 후 해당 요소를 원래 위치로 되돌립니다. (요소와 그 하위 요소에 대해 많은 수의 리플로우 작업이 수행되면 방법 1과 2의 효과는 다음과 같습니다. 더 확실함)
요소의 표시를 "없음"으로 설정하고, 수정 완료 후 표시를 원래 값으로 변경합니다
여러 스타일 속성을 수정하는 경우 스타일 속성을 여러 번 수정하는 대신 클래스 클래스를 정의하세요(특정 학생에게 권장)
페이지에 많은 수의 요소를 추가할 때 documentFragment
를 사용하세요. ​예를 들어

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

for(var i=0;i var child = docuemnt.createElement("li");

child.innerHtml = "자식";

document.getElementById("parent").appendChild(child);

}

코드가 요소의 상태 정보에 여러 번 액세스해야 하는 경우 상태가 변경되지 않으면 임시로 변수에 저장할 수 있습니다. 이렇게 하면 DOM에 대한 여러 번 액세스로 인해 발생하는 메모리 오버헤드를 피할 수 있습니다.
DOM 요소를 검색할 때 페이지 요소의 넓은 영역을 탐색하지 말고 정확한 선택기를 사용하거나 컨텍스트를 지정하여 검색 범위를 좁히세요. jquery를 예로 들어보세요

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

$("#parent .class"), $(".class",$el) 등과 같은 컨텍스트를 지정합니다.

4. 이벤트 위임을 활용하세요

사용 시나리오: 많은 수의 레코드가 있는 목록 마우스를 클릭한 후 특정 기능을 구현하려면 각 레코드를 클릭 이벤트에 바인딩해야 합니다. 페이지 이벤트 리스너 수가 많아 비효율적입니다.

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

위에서 소개한 이벤트 모니터링 원칙을 바탕으로 다시 작성해 보겠습니다

물론 이벤트 소스를 매번 판단할 필요는 없습니다. 이를 추상화하여 도구 클래스에 맡겨 완료하면 됩니다. jquery의 위임() 메소드는 이 함수를 구현합니다

구문은 $(selector).delegate(childSelector, event, data, function)과 같습니다. 예를 들면 다음과 같습니다.

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

$("div").delegate("버튼","클릭",function(){
$("p").slideToggle()
});

매개변수 설명(w3school에서 인용)
매개변수 설명
childSelector가 필요합니다. 이벤트 핸들러가 연결되는 하나 이상의 하위 요소를 지정합니다.
이벤트가 필요합니다. 요소에 연결할 하나 이상의 이벤트를 지정합니다. 여러 이벤트 값을 공백으로 구분합니다. 유효한 이벤트여야 합니다.
데이터는 선택 사항입니다. 함수에 전달될 추가 데이터를 지정합니다.
기능이 필요합니다. 이벤트가 발생할 때 실행할 함수를 지정합니다.
팁: 이벤트 위임의 또 다른 이점은 이벤트 바인딩 후 동적으로 추가된 요소에서 트리거된 이벤트도 모니터링할 수 있으므로 페이지에 동적으로 추가될 때마다 이벤트를 요소에 바인딩할 필요가 없다는 것입니다.