JavaScript는 매우 유연한 언어입니다. 우리는 원하는대로 다양한 스타일의 코드를 쓸 수 있습니다. 다른 스타일의 코드는 필연적으로 실행 효율성의 차이로 이어질 것입니다. 개발 과정에서 코드 성능을 향상시키는 많은 방법에 노출됩니다. 문제를 피하기 쉬운 공통점을 정리해 봅시다.
JavaScript 자체 실행 효율성
JavaScript의 스코프 체인, 클로저, 프로토 타입 상속, 평가 및 기타 기능은 다양한 마법 기능을 제공하면서 다양한 효율성 문제를 가져옵니다. 부주의하게 사용하면 비효율적 인 실행이 발생합니다.
1. 글로벌 수입
인코딩 프로세스 중에 일부 글로벌 변수 (창, 문서, 사용자 정의 글로벌 변수 등)를 사용합니다. JavaScrip 스코프 체인을 아는 사람은 로컬 범위에서 글로벌 변수에 액세스하려면 최상위 범위까지 레이어별로 전체 스코프 체인 레이어를 통과해야하며 로컬 변수의 액세스 효율이 더 빠르고 높아질 것임을 알고 있습니다. 따라서 로컬 범위에서 고주파수에서 일부 글로벌 객체를 사용할 때는 로컬 범위로 가져올 수 있습니다.
코드 사본은 다음과 같습니다.
// 1. 매개 변수로 모듈로 전달하십시오
(함수 (창, $) {
var xxx = window.xxx;
$ ( "#xxx1"). xxx ();
$ ( "#xxx2"). xxx ();
}) (창, jQuery);
// 2. 로컬 변수에 저장
기능(){
var doc = 문서;
var global = window.global;
}
2. 평가 및 클래스 평가 문제
우리는 Eval이 String을 JS 코드로 사용하여 실행 및 처리 할 수 있음을 알고 있습니다. Eval을 사용하여 실행 된 코드는 Eval을 사용하지 않는 코드보다 100 배 이상 느립니다 (특정 효율성을 테스트하지 않았으며 관심있는 사람들은이를 테스트 할 수 있습니다).
JavaScript 코드는 실행 전의 유사한 "사전 컴파일"작업을 수행합니다. 첫째, 현재는 현재 실행 환경에서 활성 객체를 생성하고 활성 객체의 속성으로 VAR로 선언 된 변수를 설정하지만 현재 변수의 할당은 정의되지 않으며 기능이 활성 객체의 특성으로 추가되며 해당 값은 기능의 정의입니다. 그러나 "Eval"을 사용하는 경우 "Eval"(실제로 문자열)의 코드는 컨텍스트를 사전 식별 할 수 없으며 사전에 구문 분석 및 최적화 할 수 없습니다. 즉, 사전 컴파일 된 작업을 수행 할 수 없습니다. 따라서 그 성능은 크게 줄어들 것입니다
사실, 사람들은 지금 거의 평가를 거의 사용하지 않습니다. 여기서 내가 말하고 싶은 것은 두 가지 유형의 평가 시나리오입니다 (새 함수 {}, settimeout, setinterver)
코드 사본은 다음과 같습니다.
settimtout ( "alert (1)", 1000);
SetInterver ( "Alert (1)", 1000);
(새 함수 ( "alert (1)") () ();
위의 유형 유형의 코드 실행 효율은 상대적으로 낮으므로 익명의 메소드 나 참조를 설정 타임 아웃 방법에 직접 전달하는 것이 좋습니다.
3. 폐쇄가 완료되면 더 이상 참조되지 않은 변수가 해제됩니다.
코드 사본은 다음과 같습니다.
var f = (function () {
var a = {이름 : "var3"};
var b = [ "var1", "var2"];
var c = document.getElementByTagName ( "li");
// **** 기타 변수
// *** 일부 작업
var res = function () {
경고 (a.name);
}
리턴 레스;
}) ()
위 코드에서 변수 f의 반환 값은 즉각적인 실행 함수로 구성된 폐쇄에서 반환 된 메소드 레스입니다. 이 변수는이 폐쇄에서 모든 변수 (a, b, c 등)에 대한 참조를 유지합니다. 따라서이 두 변수는 항상 메모리 공간에 있습니다. 특히 DOM 요소에 대한 참조는 많은 메모리를 소비합니다. 우리는 변수 a의 값 만 사용합니다. 따라서 폐쇄가 반환되기 전에 다른 변수를 제거 할 수 있습니다.
코드 사본은 다음과 같습니다.
var f = (function () {
var a = {이름 : "var3"};
var b = [ "var1", "var2"];
var c = document.getElementByTagName ( "li");
// **** 기타 변수
// *** 일부 작업
// 폐쇄가 반환되기 전에 더 이상 사용되지 않는 변수를 릴리스합니다.
b = c = null;
var res = function () {
경고 (a.name);
}
리턴 레스;
}) ()
JS 작동 DOM의 효율성
웹 개발 과정에서 프론트 엔드 실행 효율의 병목 현상은 종종 DOM 운영에 있습니다. DOM 운영은 매우 성능 저렴한 일입니다. DOM 운영 중에 성능을 저장하려고하는 방법은 무엇입니까?
1. 리플 로우를 줄입니다
리플 로우 란 무엇입니까?
DOM 요소의 특성이 (예 : 색상) 변경되면 브라우저는 해당 요소를 재정의하도록 렌더에게 알립니다. 이 과정을 Repaint라고합니다.
변경에 요소 레이아웃 (예 : 너비)이 포함되면 브라우저는 원래 속성을 버리고 결과를 렌더로 재 계산하여 전달하여 페이지 요소를 redelineate습니다. 이 과정을 Reflow라고합니다.
리플 로우를 줄이는 방법
먼저 문서에서 요소를 삭제 한 다음 수정을 완료 한 후 요소를 원래 위치로 다시 넣습니다 (특정 요소 및 하위 요소에 대해 많은 수의 리플 로우 작업이 수행되면 1 및 2 메소드의 효과가 더 명백합니다).
요소의 표시를 "없음"으로 설정하고 수정을 완료 한 후 디스플레이를 원래 값으로 수정하십시오.
스타일 속성을 여러 번 수정하는 대신 여러 스타일 속성을 수정할 때 클래스 클래스를 정의하십시오 (특정 학생이 권장)
페이지에 많은 양의 요소를 추가 할 때 DocumentFragment를 사용하십시오.
예를 들어
코드 사본은 다음과 같습니다.
for (var i = 0; i <100 : i ++) {
var child = docuemnt.createElement ( "li");
child.innerhtml = "child";
document.getElementById ( "부모"). AppendChild (자식);
}
코드가 요소의 상태 정보에 대한 여러 액세스가 필요한 경우 상태가 변경되지 않은 상태에서 요소의 상태 정보에 대해 일시적으로 저장할 수 있으며, 이는 DOM에 대한 다중 액세스로 인한 메모리 오버 헤드를 피할 수 있습니다. 일반적인 예는 다음과 같습니다.
DOM 요소를 검색 할 때 넓은 영역에서 페이지 요소를 가로 지르는 것을 피하거나 정확한 선택기를 사용하거나 검색 범위를 좁히기 위해 컨텍스트를 지정하고 jQuery를 예로 들어보십시오.
덜 퍼지 일치하는 선택기를 사용하십시오 : 예를 들어 $ ( "[name*= '_ fix']"), 더보기 ID와 같은 더 많은 복합 선택기를 사용하고 SCOPE $ ( "li.Active") 등을 점진적으로 좁히십시오.
컨텍스트를 지정하십시오 : 예를 들어 $ ( "#parent .class"), $ ( ". class", $ el) 등
4. 이벤트 대표단을 사용하십시오
사용 시나리오 : 많은 레코드가있는 목록. 각 레코드는 이벤트를 클릭해야합니다. 마우스를 클릭 한 후 일부 기능이 구현됩니다. 우리의 일반적인 관행은 각 레코드에 대한 이벤트를 듣는 것입니다. 이 연습은 페이지의 많은 이벤트 리스너로 이어질 것이며, 이는 비교적 비효율적입니다.
기본 원칙 : 우리는 모두 이벤트가 DOM 사양에서 거품이 될 것이라는 것을 알고 있습니다. 이벤트 객체는 또한 이벤트 소스를 가리 키려면 이벤트 (IE에 따라 srcelement)를 제공하므로 부모 요소의 이벤트를들더라도 이벤트를 트리거하는 가장 독창적 인 요소를 찾을 수 있습니다. 이것이 대표의 기본 원칙입니다. 더 이상 고민하지 않고, 위의 예
위에서 소개 된 이벤트 모니터링의 원칙을 바탕으로 다시 작성해 봅시다.
물론, 우리는 매번 이벤트 소스를 판단 할 필요가 없으며, 이벤트 소스를 추상화하여 도구 클래스에 넘겨서 완료 할 수 있습니다. jQuery의 Delegate () 메소드는이 기능을 구현합니다
구문은 $ (selector) .delegate (childselector, event, data, function)와 같습니다.
코드 사본은 다음과 같습니다.
$ ( "div"). delegate ( "button", "click", function () {
$ ( "p"). slidetoggle ();
});
매개 변수 설명 (W3School에서 인용)
매개 변수 설명
Childselector가 필요합니다. 이벤트 핸들러의 하나 이상의 하위 요소가 첨부 될 것을 지정합니다.
이벤트가 필요합니다. 요소에 첨부 된 하나 이상의 이벤트를 지정합니다. 공간별로 여러 이벤트 값을 분리하십시오. 유효한 이벤트 여야합니다.
데이터는 선택 사항입니다. 함수에 전달 된 추가 데이터를 지정합니다.
필요한 기능. 이벤트가 발생할 때 실행되는 기능을 지정합니다.
팁 : 이벤트 대표단의 또 다른 장점은 이벤트 바인딩이 들린 후 동적으로 추가 된 요소에 트리거 된 이벤트조차도 페이지에 요소를 동적으로 추가 할 때마다 이벤트를 바인딩 할 필요가 없다는 것입니다.