웹 성능 최적화 - 자바스크립트 성능 튜닝_javascript 기술

JavaScript는 상대적으로 완전한 프런트 엔드 개발 언어이며 오늘날의 웹 개발, 특히 Web 2.0 애플리케이션에서 널리 사용됩니다. 오늘날 Web 2.0이 점점 더 대중화됨에 따라 우리의 웹 애플리케이션 프로젝트에 JavaScript 코드가 많이 있을 것이며 앞으로도 점점 더 많아질 것이라는 사실을 알게 될 것입니다. 해석되고 실행되는 언어이자 단일 스레드 메커니즘인 JavaScript는 성능이 JavaScript의 약점이라고 판단합니다. 이는 특히 Web 2.0 애플리케이션의 경우 JavaScript를 작성할 때 웹 소프트웨어 엔지니어가 큰 주의를 기울여야 하는 문제이기도 합니다. 대다수의 웹 소프트웨어 엔지니어는 자신이 개발한 Web 2.0 애플리케이션의 성능 저하 문제에 직면해 있습니다. 주된 이유는 JavaScript 성능이 부족하고 브라우저가 과부하되었기 때문입니다. 그러나 이러한 해석 및 단일 스레드 언어의 성능 문제를 해결하는 것은 쉽지 않습니다. 이 기사에서는 개발 중 JavaScript 성능 조정을 위한 몇 가지 팁과 모범 사례에 중점을 두고 있으며,

소개
성능 문제를 운영하는 JavaScript의 몇 가지 방법도 다룰 것입니다. 웹 개발, 특히 오늘날의 Web2.0 애플리케이션에서 자주 발생합니다. JavaScript는 오늘날 가장 널리 사용되는 웹 개발 언어입니다. 웹 애플리케이션의 성능 문제 중 상당 부분은 JavaScript 언어 자체의 성능 문제 및 DOM 성능 문제를 포함하여 프로그래머가 작성한 JavaScript 스크립트의 성능 저하로 인해 발생합니다. 문제. 이 기사에서는 이러한 문제를 가능한 한 많이 방지하여 웹 애플리케이션의 성능을 최대화하는 방법에 대해 주로 설명합니다.

JavaScript 성능 튜닝
JavaScript 언어는 단일 스레드 및 해석된 실행 특성으로 인해 성능 문제가 많기 때문에 개선할 부분이 꽤 있습니다.

eval 문제:
다음 코드를 비교하세요.
목록 1. eval 문제

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

var reference = {}, props = “p1”
eval(“reference.” props “=5” )
var reference = {}, props = “p1”;
reference[props] = 5

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

함수 사용법:
다음 코드를 비교하세요.
Listing 2. 함수 사용법

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

var func1 = new Function(“return 인수[0] 인수[1]”)
func1 (10, 20);
var func2 = function(){ return 인수[0] 인수[1] }
func2(10, 20)

유사 여기서 전제 "eval" 방법의 경우 여기서 "func1"의 효율성은 "func2"보다 훨씬 떨어지므로 두 번째 방법을 사용하는 것이 좋습니다.

함수 범위 체인:
함수 입력 시 JavaScript 코드가 해석되고 실행됩니다. ), 일반적으로 말하면
지역 변수는 레벨 1(얕음)에 배치되고, 전역 변수는 레벨 2(깊음)에 배치됩니다. "with" 또는 "try - catch" 코드 블록을 입력하면 새로운 레벨이 추가됩니다. 즉, "with" 또는 "catch"에 있는 변수는 가장 얕은 레벨(레벨 1)에 배치되고, 이전 레벨은 순차적으로 심화됩니다.
다음 코드 참조:
목록 3. 함수 범위 체인

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

var myObj = … ..
… ..
function process(){
var Images = document.getElementsByTagName("img"),
widget = document.getElementsByTagName("input"),
combination = [];
for(var i = 0; i combination.push(combine(images) [i ], widget[2*i]));
}
myObj.container.property1 = 조합[0];
myObj.container.property2 = 조합[combination.length-1]; 🎜> }


여기서 "이미지", "위젯" 및 "조합"이 레이어 1의 지역 변수에 속하는 것을 볼 수 있습니다. "document", "myObj"는 레이어 2의 전역 변수에 속합니다.
변수가 위치한 레이어가 얕을수록 접근(읽기, 수정) 속도는 빨라지고, 레이어가 깊을수록 접근 속도는 느려집니다. 따라서 여기서의 "이미지", "위젯" 및 "조합"에 대한 액세스 속도는 "문서" 및 "myObj"보다 빠릅니다. 따라서 다음 코드와 같이 가능한 한 로컬 변수를 사용하는 것이 좋습니다.
Listing 4. 로컬 변수 사용

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

var myObj = … ..
… ..
function process(){
var doc = document;
var Images = doc.getElementsByTagName("img"),
widget = doc.getElementsByTagName("input"),
combination = []
for(var i = 0; i combination.push(combine(images[i], widget[2*i]))
myObj.container.property1 = 조합 0];
myObj.container.property2 = 조합 [combination.length-1];
}

전역 변수 "document" 대신 로컬 변수 "doc"를 사용합니다. 특히 많은 수의 전역 변수를 사용하는 함수의 경우 성능을 향상시킬 수 있습니다.
다음 코드를 다시 살펴보세요.

목록 5. 주의해서 사용

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

var myObj = … ..
… ..
function process(){
var doc = document; .getElementsByTagName(" img"),
widget = doc.getElementsByTagName("input"),
combination = [];
for(var i = 0; i combine(images[i], widget[2*i])));
}
(myObj.container) {
property1 =
property2 = 조합[ 조합.길이-1];
}
}


"with" 키워드를 사용하면 코드를 더 간결하고 명확하게 만들 수 있지만 성능에는 영향을 미칩니다. . 앞서 언급한 것처럼 "with" 코드 블록을 입력하게 되면 "조합"이 원래의 레이어 1에서 레이어 2로 변경되므로 효율성이 크게 떨어지게 됩니다. 따라서 비교를 위해 원래 코드를 계속 사용하세요.

목록 6. 개선 사항

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

var myObj = … ..

… ..
function process(){
var doc = document
var Images = doc; .getElementsByTagName( "img"),
widget = doc.getElementsByTagName("input"),
combination = [];
for(var i = 0; i 조합.push(combine(images[i], widget[2*i])))
}
myObj.container.property1 = 조합[0]
myObj.container.property2 = Combination[combination .length-1];
}


하지만 이는 최선의 방법이 아닙니다. 객체 객체의 경우 속성 액세스 수준이 깊어질수록 효율성이 떨어집니다. 예를 들어, 여기에서 "myObj"는 세 번째 계층에 액세스했습니다.

목록 7. 객체 액세스 수준 낮추기

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

var myObj = … ..

… ..
function process(){
var doc = document ;
var Images = doc.getElementsByTagName("img"),
widget = doc.getElementsByTagName("input"),
combination = []
for( var i = 0; i
combination.push(combine(images[i], widget[2*i]))
var ctn = myObj. 컨테이너;
ctn.property1 = 조합[0];
ctn.property2 = 조합[combination.length-1]
}


"myObj" "컨테이너" 개체의 두 번째 레이어입니다. 객체의 심층 속성에 대한 액세스가 많은 경우 위의 방법을 참조하여 성능을 향상시킬 수 있습니다.

문자열 관련

문자열 접합다음과 같은 코드를 자주 봅니다.
목록 8. 간단한 문자열 접합

코드 복사 코드는 다음과 같습니다. str = “str1” “str2”

이것은 문자열을 접합하는 일반적인 방법이지만 이 방법은 성능에 영향을 미치는 일부 임시 변수를 생성하고 파괴하므로 접합하려면 다음 방법을 사용하는 것이 좋습니다.
목록 9. 문자열 배열 method Splice

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

var str_array = [ ];
str_array.push(“str1”);
str_array.push(“str2”);
str = str_array.join(“”); 배열(array)의 "join" 메소드를 사용하면 문자열 접합을 구현합니다. 특히 이전 버전의 Internet Explorer(IE6)에서 실행하는 경우 성능이 매우 분명하게 향상됩니다.
물론 최신 브라우저(예: Firefox3, IE8 등)에는 문자열 접합이 최적화되어 있습니다.

목록 10. 빠른 문자열 접합

코드 복사 코드는 다음과 같습니다. str = "str1"

str = "str2"

새 브라우저는 "="를 최적화했으며, 배열의 "join" 방식보다 성능이 약간 더 빠릅니다. 가까운 시일 내에 업데이트된 브라우저 버전에서도 " "을(를) 최적화할 수 있으므로 str = "str1" "str2"라고 직접 작성할 수 있습니다.

암시적 유형 변환

다음 코드 참조: 목록 11. 암시적 유형 변환

코드 복사 코드는 다음과 같습니다. var str = “12345678”, arr = []

for(var i = 0; i arr.push( str.charAt(i))
}


여기서는 각 루프에서 문자열을 호출합니다. "charAt" 메서드이지만 "str"에 상수 "12345678"을 할당했기 때문에 여기서 "str"은 실제로 "charAt" 함수를 호출할 때마다 임시로 The 값을 생성합니다. "12345678"의 문자열 개체를 선택한 다음 "charAt" 메서드를 호출하고 마지막으로 문자열 임시 개체를 해제합니다. 몇 가지 개선할 수 있습니다.

목록 12. 암시적 유형 변환 방지

코드 복사 Code As 다음: var str = new Stirng(“12345678”), arr = []

for(var i = 0; i arr.push( str.charAt(i));
}


이렇게 하면 문자열 개체인 "str" ​​변수에는 이러한 암시적 유형 변환 프로세스가 적용되지 않습니다. 이런 식으로 효율성이 크게 향상됩니다.

문자열 일치

JavaScript에는 문자열에 대한 정규식 일치를 지원하는 RegExp 개체가 있습니다. 훌륭한 도구이지만 성능은 그다지 좋지 않습니다. 반대로 "substring", "indexOf", "charAt" 등과 같은 문자열 개체(String) 자체의 일부 기본 메서드는 매우 효율적입니다. 문자열을 일치시키기 위해 정규식을 사용해야 하는 경우 이를 고려할 수 있습니다. . : 문자열 객체 자체에서 지원하는 기본 메소드로 문제를 해결할 수 있나요? 정규식의 범위를 좁히기 위해 "하위 문자열"을 사용할 수 있나요?
이러한 방법은 프로그램의 효율성을 효과적으로 향상시킬 수 있습니다.
정규식 객체에 대해 주의할 점이 한 가지 더 있습니다.

Listing 13. 정규식

코드 복사 코드는 다음과 같습니다. for(var i = 0; i if (str_array[i].match(/^s*extras/)){

……………………
}
}


여기서 전달합니다. " /^s*extras/"는 효율성에 영향을 미칩니다. 임시 값 "/^s*extras/"를 사용하여 정규식 개체를 생성하고 "match" 메서드를 실행한 다음 임시 정규식 개체를 삭제합니다. 다음과 같이 할 수 있습니다.

목록 14. 변수 사용

코드 복사 코드는 다음과 같습니다. 다음: var sExpr = /^s*extras/;

for(var i = 0; i if(str_array[i ].match( sExpr)){
……………………
}
}


이렇게 하면 임시 개체가 없습니다.
setTimeout 및 setInterval
"setTimeout" 및 "setInterval" 두 함수는 문자열 변수를 허용할 수 있지만 앞서 언급한 "eval"과 유사한 성능 문제를 일으키므로 직접 전달하는 것이 좋습니다. 객체 자체.

조기 종료 사용
다음 두 코드 부분을 참조하세요.
목록 15. 조기 종료 활용

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

// 코드 1
var name = … ​​​​.;
var source = … ​​​​;if(source.match(/ … /)){
…………………………
}
// 코드 2
var name = … ​​​​.;
var source = ……
if(name.indexOf( … ) &&source.match(/ …… /)){
… ………………………
}

코드 2에는 "name.indexOf(...)"에 대한 추가 판단이 있으며, 이는 프로그램이 먼저 "indexOf"를 실행하도록 합니다. "는 이 섹션에 도달할 때마다 판단하고 후속 "match"를 실행합니다. "indexOf"가 "match"보다 훨씬 효율적이라는 전제 하에 "match" 실행 횟수가 줄어들어 효율성이 향상됩니다. 어느 정도.
---------------------------------- --- ----------------------------------

DOM 연산 성능 튜닝 JavaScript 개발은 DOM 작업과 불가분의 관계이므로 웹 개발에서는 DOM 작업의 성능 튜닝도 매우 중요합니다.
Repaint and Reflow
Repaint는 Redraw라고도 하는데, 이는 현재 DOM의 구조와 레이아웃에 영향을 주지 않는 다시 그리는 작업을 의미합니다. 다음 작업은 다시 그리기 작업을 생성합니다.
보이지 않음에서 표시됨(가시성 스타일 속성)
색상 또는 이미지 변경(배경, 테두리 색상, 색상 스타일 속성)
크기, 모양 및 위치는 변경되지 않습니다. 그러나 페이지 요소의 모양을 바꾸는 변경
Reflow는 Repaint보다 더 중요한 변경입니다. 이는 주로 DOM 트리를 조작할 때 발생합니다. DOM의 구조와 레이아웃을 변경하면 리플로우가 생성됩니다. 그러나 요소의 Reflow 작업이 발생하면 모든 상위 요소와 하위 요소가 Reflow를 해제합니다. 결국 Reflow는 필연적으로 Repaint 생성으로 이어집니다. 예를 들어 다음 작업은 Repaint 작업을 생성합니다.


브라우저 창의 변경 DOM 노드의 추가 및 삭제 작업
크기, 모양 및 크기를 변경하는 일부 작업 페이지 요소 위치 Trigger
Reflow 감소
Reflow 및 Repaint 도입을 통해 각 Reflow가 Repaint보다 더 많은 리소스를 소비한다는 것을 알 수 있습니다. 트리거 작업의 코드입니다.
다음 코드 참조:

Listing 16. reflow 소개

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

var pDiv = document.createElement(“div”);
document.body.appendChild(pDiv);------ reflow
var cDiv1 = document.createElement(“ div");
var cDiv2 = document.createElement("div");
pDiv.appendChild(cDiv1);------ 리플로우
pDiv.appendChild(cDiv2); ----- reflow

우리가 자주 접하는 코드인데, 이 코드는 3번의 reflow를 생성하게 됩니다. 다음 코드를 다시 살펴보세요.

목록 17. 리플로우 줄이기

코드 복사 코드

var pDiv = document.createElement(“div”);
var cDiv1 = document.createElement(“div”)
var cDiv2 = document.createElement( “div”);
pDiv.appendChild(cDiv1);
pDiv.appendChild(cDiv2);
document.body.appendChild(pDiv);---- 리플로우

🎜>여기서는 reflow가 한 번밖에 없기 때문에 DOM 노드를 운영하는 방법은 이 방법을 권장합니다.

리플로우 작업이 적은 위 솔루션과 관련하여 참조할 수 있는 또 다른 패턴이 있습니다.

목록 18. 디스플레이를 사용하여 리플로우 줄이기

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

var pDiv = document.getElementById(“parent”)

pDiv.style.display = “없음”- ---- 리플로우
pDiv.appendChild(cDiv1);
pDiv.appendChild(cDiv3)
pDiv.appendChild(cDiv4);
pDiv.appendChild(cDiv5);
pDiv.style.width = “100px”;
pDiv.style.height = “100px”;
pDiv.style.display = --- 리플로우


pDiv를 먼저 숨긴 다음 표시하면 숨김과 표시 사이의 작업으로 인해 리플로우가 발생하지 않아 효율성이 향상됩니다.

특수 측정 속성 및 방법
DOM 요소에는 Reflow를 트리거하는 몇 가지 특별한 측정 속성 액세스 및 메소드 호출이 있습니다. 일반적인 것은 "offsetWidth" 속성과 "getCompulatedStyle" 메소드입니다.
그림 1. 특수 측정 속성 및 방법

이러한 측정 속성 및 방법은 대략 다음과 같습니다.

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

offsetLeft
offsetTop
offsetHeight
offsetWidth
scrollTop/Left/Width/Height
clientTop/Left /Width/Height
getCompulatedStyle()
currentStyle(IE에서))

이러한 속성과 메소드에 액세스하고 호출하면 리플로우 생성이 트리거됩니다. 및 호출하려면 다음 코드를 참조하세요.
목록 19. 특수 측정 속성

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

var pe = document.getElementById(“pos_element”);
var result = document.getElementById(“result_element”)
var pOffsetWidth = pe.offsetWidth;
result.children[0].style.width = pOffsetWidth;
result.children[1].style.width = pOffsetWidth; = pOffsetWidth;

…………기타 수정 사항…………
여기서 임시 변수를 사용하여 "offsetWidth" 값을 캐시할 수 있으므로 매번 "offsetWidth" 속성을 사용합니다. 이 방법은 루프에 매우 적합하며 성능을 크게 향상시킬 수 있습니다.


스타일 관련 다음 코드를 자주 볼 수 있습니다.

Listing 20. 스타일 관련

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

var sElement = document.getElementById("pos_element")
sElement.style .border = ' 1px 단색 빨간색 '
sElement.style.groundColor = ' 은색 '
sElement.style.padding = ' 2px 3px '
sElement.style.marginLeft = ' 5px '

하지만 여기서 모든 스타일 변경이 리플로우를 생성한다는 것을 알 수 있습니다. 이러한 상황의 발생을 줄이려면 다음을 수행할 수 있습니다.

솔루션 1:
목록 21. className 솔루션

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

.class1 {
border: ' 1px solid red '
background-color: ' 은색 '
패딩: ' 2px 3px '
여백-왼쪽: ' 5px '
}
document.getElementById("pos_element").className = 'class1'

스타일 대신 클래스를 사용하면 원래 리플로우 또는 리페인트 수를 하나로 줄일 수 있습니다.


솔루션 2:
목록 22. cssText 솔루션

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

var sElement = document.getElementById(“pos_element”);
var newStyle = ' border: 1px solid red ' ' background-color; : silver; '
' padding: 2px 3px; ' "margin-left: 5px;"
sElement.style.cssText = newStyle;

리플로우 방식을 줄여 성능을 향상시킵니다.
XPath
페이지에는 1,000개 이상의 페이지 요소가 포함되는 경우가 많으며 특정 요소를 찾는 데 일정 시간이 걸리는 경우가 많습니다. ID 또는 이름을 사용하여 찾는 경우 효율성이 크게 느려지지 않을 수 있습니다. className 등의 요소 속성을 사용하여 찾는 경우 효율성이 이상적이지 않을 수 있습니다. 일부는 모든 요소(getElementsByTagName)를 순회한 후 필터링해야만 해당 요소를 찾을 수 있는데, 이는 훨씬 더 비효율적입니다. 여기서는 많은 브라우저에서 지원하는 기능인 XPath를 사용하여 요소를 찾는 것이 좋습니다.

목록 23. XPath 솔루션

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

if(document.evaluate){
var tblHeaders = document.evaluate(“//body/div/table//th”)
var result = tblHeaders.iterateNext(); 🎜>while(result) {
result.style.border = “1px 파란색 점선”;
result ………………
result = xpathResult.iterateNext()
}
} else{ //getElementsByTagName() ……
// 브라우저가 XPath를 지원하지 않는 경우 처리
………………………………
}

브라우저 XPath의 검색 엔진은 검색 효율성을 최적화하고 결과 반환 시간을 크게 단축합니다.


HTMLCollection 개체 이것은 특별한 유형의 개체로 배열과 약간 비슷하지만 정확히 배열은 아닙니다. 다음 메소드의 반환 값은 일반적으로 HTMLCollection 객체입니다:
document.images, document.forms
getElementsByTagName()
getElementsByClassName()
이 HTMLCollection 객체는 고정된 값이 아니지만 동적 결과. 이는 일부 특수 쿼리의 반환 값이지만, 대부분의 경우 이전 쿼리와 동일하지만 다음과 같은 경우에는 이전 쿼리를 다시 실행하여 새로운 반환 값(쿼리 결과)을 얻습니다. 또는 여러 반환 값:


길이 속성 특정 멤버
따라서 이러한 속성 및 멤버에 대한 HTMLCollection 객체의 액세스는 배열의 액세스보다 훨씬 느립니다. 물론 예외도 있습니다. Opera와 Safari는 큰 성능 문제 없이 이러한 상황을 매우 잘 처리합니다.
다음 코드 참조:

목록 24. HTMLConnection 객체

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

var items = [“test1”, “test2”, “test3”, ……………]
for(var i = 0; i …………………………
}
var items = document.getElementsByTagName(“div”)
for(var i = 0 ; i … 위의 방법은 위의 것보다 더 효율적입니다. 각 주기가 "items.length"를 트리거하고 이로 인해 "document.getElementsByTagName(..)" 메서드가 다시 호출되기 때문에 훨씬 느립니다. 크게 떨어지게 됩니다. 다음과 같이 해결할 수 있습니다.

목록 25. HTMLConnection 객체 솔루션

코드 복사

코드 var items = document.getElementsByTagName(“div”) var len = items.length for(var i = 0; i …………………………………….

}


이렇게 하면 기본적으로 효율성은 동일합니다. 일반 배열.
동적으로 스크립트 태그 생성
JavaScript 스크립트를 로드하고 실행하는 데 일정 시간이 걸립니다. 우리 프로그램에서 일부 JavaScript 스크립트는 기본적으로 로드된 후 사용되지 않습니다. 등의 이름으로 사용된 적이 없습니다.) 이러한 스크립트를 로드하면 CPU 시간만 차지하고 메모리 소비가 늘어나 웹 애플리케이션의 성능이 저하됩니다. 따라서 특히 콘텐츠가 많고 리소스 소모가 많은 JavaScript 스크립트 파일을 동적으로 로드하는 것이 좋습니다.

목록 26. 스크립트 태그 생성



코드 복사

코드는 다음과 같습니다. if(needXHR){ document.write(“}

if (dojo.isIE ){

document.write(“

이 글에서는 성능 요구 사항을 소개합니다. 웹 개발 몇 가지 작은 세부 사항에 주의하세요. JavaScript 자체에서 시작하여 eval의 단점, 함수 범위 체인 및 문자열 사용 등 JavaScript에서 피해야 하는 일부 기능 및 프로그래밍 규칙의 사용을 소개합니다. 또한 몇 가지 권장 사례를 공유하며 Repaint 및 Reflow 메커니즘 사용, 특수 측정 속성 사용 방법, 스타일 관련 성능 조정, 원리 및 사용 팁과 같은 JavaScript DOM 작업의 성능 조정까지 확장합니다. HTMLCollection 객체. 우리는 웹 애플리케이션의 성능을 최대한 향상시키기 위해 개발 과정에서 이러한 작은 세부 사항에 주의를 기울일 수 있습니다.