JavaScript 실행 효율성을 효과적으로 향상시키기 위한 몇 가지 지식_javascript 기술

신선하고 독특한 사용자 경험을 제공하기 위해 많은 웹사이트에서는 JavaScript를 사용하여 디자인 개선, 양식 유효성 검사, 브라우저 확인, Ajax 요청, 쿠키 작업 등을 수행하여 새로 고침 없이 동적 효과를 얻습니다. 그러나 브라우저에서는 많은 양의 콘텐츠를 렌더링해야 하는데 이를 제대로 처리하지 않으면 웹사이트 성능이 급격히 떨어지게 됩니다. 따라서 우리는 JavaScript의 실행 효율성을 향상시키는 방법을 이해해야 합니다.

자바스크립트 함수

JavaScript에서는 함수를 사용하기 전에 미리 컴파일합니다. 때로는 함수 대신 문자열을 사용할 수도 있지만 이 JavaScript 코드는 실행될 때마다 다시 구문 분석되어 성능에 영향을 미칩니다.

1. 평가 예시

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

eval('출력=(입력 * 입력)');
// 다음과 같이 변경하는 것이 좋습니다.
eval(새 함수() { 출력=(입력 * 입력)});

2. setTimeout 예시

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

setTimeout("alert(1)", 1000);
// 다음과 같이 변경하는 것이 좋습니다.
setTimeout(function(){alert(1)}, 1000);

문자열 대신 함수를 매개변수로 사용하면 새 메소드의 코드가 JavaScript 컴파일러에 의해 최적화될 수 있습니다.

자바스크립트 범위

JavaScript 범위 체인의 각 범위에는 여러 변수가 포함되어 있습니다. 범위 체인을 활용하려면 범위 체인을 이해하는 것이 중요합니다.

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

var localVar = "global"; //전역변수

기능 테스트() {

var localVar = "local"; //지역변수

//지역변수
경고(localVar);

//전역 변수
경고(this.localVar);

//지역 변수에서 문서를 찾을 수 없으면 전역 변수를 검색하세요.
var pageName = document.getElementById("pageName")
}

지역 변수를 사용하는 것은 전역 변수를 사용하는 것보다 훨씬 빠릅니다. 범위 체인에서 더 멀리 갈수록 해결이 느려지기 때문입니다. 다음 그림은 범위 체인 구조를 보여줍니다.

코드에 with 또는 try-catch 문이 있으면 아래와 같이 범위 체인이 더 복잡해집니다.

자바스크립트 문자열

성능에 큰 영향을 미치는 JavaScript의 기능은 일반적으로 문자열을 연결하는 데 기호를 사용합니다. 그러나 초기 브라우저에서는 이 연결 방식을 최적화하지 않았기 때문에 문자열이 계속 생성되고 파괴되어 JavaScript 실행 효율성이 심각하게 저하되었습니다.

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

var txt = "hello" " " "세계";

다음으로 변경하는 것이 좋습니다:

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

var o = [];
o.push("안녕하세요");
o.push(" ");
o.push("세계");
var txt = o.join();

간단히 요약해 보겠습니다.

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

함수 StringBuffer(str) {
var arr = [];
arr.push(str || "");
This.append = 함수(str) {
arr.push(str);
         이것을 돌려주세요;
};
This.toString = function() {
          return arr.join("");
};
};

그럼 다음과 같이 부르세요.

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

var txt = new StringBuffer();
txt.append("안녕하세요");
txt.append(" ");
txt.append("세계");
경고(txt.toString());

JavaScript DOM 조작

HTML DOM(문서 개체 모델)은 HTML 문서에 액세스하고 조작하는 표준 방법을 정의합니다. HTML 문서를 요소, 속성 및 텍스트 콘텐츠를 포함하는 노드 트리로 나타냅니다. JavaScript는 HTML DOM을 사용하여 HTML 문서의 모든 노드에 액세스하고 이를 조작할 수 있습니다.

DOM 다시 그리기

페이지의 DOM 개체가 수정될 때마다 DOM 다시 그리기가 포함되며 브라우저는 페이지를 다시 렌더링합니다. 따라서 DOM 객체의 수정 횟수를 줄이는 것이 JavaScript의 성능을 효과적으로 향상시킬 수 있습니다.

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

for (var i = 0; i var elmt = document.createElement('p');
elmt.innerHTML = i;
document.body.appendChild(elmt);
}

다음으로 변경하는 것이 좋습니다:

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

var html = [];
for (var i = 0; i html.push('

' i '

');
}
document.body.innerHTML = html.join('');

DOM 액세스

HTML 문서의 모든 노드는 DOM을 통해 액세스할 수 있습니다. getElementById(), getElementsByTagName() 및 기타 메소드를 호출할 때마다 해당 노드를 검색하여 다시 액세스합니다. 따라서 발견된 DOM 노드를 캐싱하면 JavaScript의 성능도 향상될 수 있습니다.

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

document.getElementById("p2").style.color = "파란색";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "더 크게";

다음으로 변경하는 것이 좋습니다:

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

var elmt = document.getElementById("p2");
elmt.style.color = "파란색";
elmt.style.fontFamily = "굴림";
elmt.style.fontSize = "더 크게";

DOM 탐색

DOM 순회는 일반적으로 인덱스에 따라 루프의 다음 하위 요소를 읽습니다. 초기 브라우저에서는 이 읽기 방법은 실행 효율성이 매우 낮습니다. nextSibling 메서드를 사용하면 DOM 순회 효율성을 높일 수 있습니다.

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

var html = [];
var x = document.getElementsByTagName("p");//모든 노드
for (var i = 0; i < x.length; i ) {
//할 일
}

다음으로 변경하는 것이 좋습니다:

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

var html = [];
var x = document.getElementById("div");//상위 노드
var 노드 = x.firstChild;
while(노드 ​​!= null){
//할 일
노드 = node.nextSibling;
}

JavaScript 메모리 출시

웹 애플리케이션에서는 DOM 개체 수가 증가하면 메모리 소비도 점점 더 커집니다. 따라서 브라우저가 메모리를 회수할 수 있도록 개체에 대한 참조가 제때에 해제되어야 합니다.

DOM이 점유하고 있는 메모리 해제

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

document.getElementById("test").innerHTML = "";

DOM 요소의 innerHTML을 빈 문자열로 설정하여 하위 요소가 차지하는 메모리를 해제합니다.

자바스크립트 객체 해제

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

//객체:
obj = null
//객체 속성:
obj.property 삭제
//배열 요소:
arr.splice(0,3);//처음 3개 요소 삭제