자바스크립트 프로그램과 관련된 최적화 문제
- 黄舟원래의
- 2016-12-15 10:57:361009검색
자바스크립트 프로그램 관련 최적화 문제
제가 코드를 작성할 때 경험한 내용을 정리해서 공유했습니다. 순서는 없습니다.
1.
예: 🎜> function test(){
var s = document.getElementById('aaa');
s.innerHTML = document.body.clientHeight;
}
){
var d = 문서,
s = d.getElementById('aaa');
s.innerHTML = d.body.cli entHeight;
}
장점 지역변수는 스코프체인 검색 없이 축소하는 것입니다
참조가 2개라면 지역변수를 사용하는 것을 추천합니다
2. with 사용을 피하세요(지구상 사람들은 다 알 것 같아요)
이유는 알겠습니다. with는 자체 범위를 생성하므로 원래 범위 체인이 길어지고 with 블록에서 코드가 실행되는 속도가 느려집니다. 코드가 서면으로 저장되는 것처럼 보이지만 실제로는 액세스가 더 길어지고 더 번거로워지며 성능이 저하됩니다. 🎜>예
clientHeight = '200px';
>}
와 함께 사용하면 실제로
Function Test() {
var ds = document.body ds.clientheight = '200px';
ds.clientwidth = '200px'
}
3. nodelist를 순회하는 방법
일반적인 방법은
var as = document.GetelementsBytagName입니다. ('div'); i
for(var i=0,ci;ci=as[i++];) {}nodeList가 완료되면 FALSE에 대한
이점이 종료되고 길이가 계산되지 않으며 주기에 값이 저장되고 코드는
로 판단됩니다. 이 방법은 nodelist에서 사용합니다. 배열에 사용하면 문제가 발생합니다. 배열에 0이 있거나 null이 있습니다.
4. VAR을 너무 많이 사용하지 마세요. ,
var a = 1;
var b = 1;
var c =1;
긴 코드, 성능 저하
var a=1,
b로 분할 =1,
c=1 ;
5.innerHTML이 최선의 선택입니다
요소에 요소를 추가할 때 innerHTML을 사용하는 것이 가장 좋습니다
6.ie의 RemoveChild는 그렇지 않습니다. 사용하기 쉬움
일반적으로 요소를 삭제합니다.
elm.removeChild(subElm)
을 사용합니다. 이는 IE에서 사용하기 쉽지 않습니다. 이제
격리된 노드를 실제로 삭제하려면 이렇게 하면 됩니다
var ryc = document.createElement('div');
div.appendChild(subElm);
div.innerHTML = '';
div = null;
이렇게 하면 IE를 제외하고는 RemoveChild를 사용하여 효과를 얻을 수 있습니다.
7. 이벤트를 정의할 때 각각을 바인딩할 필요는 없으며 이벤트를 상위 이벤트에 바인딩하기만 하면 됩니다.
예를 들어
< /ul>
li마다 클릭을 추가해야 할 수도 있습니다
li마다 추가 번거롭고 오버플로되기 쉽습니다(즉)
실제로 이벤트가 버블링되기 때문에 ul에 하나만 추가하면 됩니다.
var ul = document.getElementById('a');
ul. onclick = function (e){
!e&&(e=event);
var target = e.srcElement| e.target;
모두 c/C++로 컴파일되어 js
로 작성된 방식보다 실행 속도가 훨씬 빠릅니다. (var i=0;i var o = document.createElement('div');
document.body.appendChild(o);
}
documentFragment 사용
var f = document.createDocumentFragment();
for(var i=0;i<1000;i++){
var o = document.createElement('div');
f.appendChild( o) ;
}
document.body.appendChild(f);
10. else가 >=3을 사용하는 경우 읽기 쉽고 성능이 좋은 스위치를 사용하세요
11. if<=3이면 if를 사용하지 말고 3요소 표현식을 사용하세요
12. if==1이면 if를 &&
로 변경합니다 if(a==1)a=2
를 a==1&&(a=2);
13으로 변경합니다. 요소의 위치를 계산합니다. while()offsetParent
이 방법은 예전 방식이며 현재 브라우저는 ie6입니다. 이상, ff3 .1 이상, chrome, Opera(최신 버전만 테스트했습니다) 모두 이를 지원합니다.
el.getBoundingClientRect는 각각 위쪽, 왼쪽, 오른쪽 및 아래쪽 값인 개체를 반환합니다.
14. 일반 검색은 indexOf만큼 빠르지 않습니다
var s= 'sdfsdfsdfAAAsdfdsfs';
for(var i=0;i<1000;i++){
s.indexOf( 'AAA')
}
빠릅니다
var s= 'sdfsdfsdfAAAsdfdsfs';
for(var i=0;i<1000;i++){
/AAA/.test( s)
}
15. 정규식에 비캡처링을 사용합니다(? 이게 더 빠릅니다
16. 특정 요소의 스타일을 설정할 때 cssText를 사용하는 것이 더 쉽습니다
el.style.cssText +=";postion:absolute;"
(위치 이전 위치에 주의하세요. IE에는 이것이 없기 때문에 갈 수 없습니다. 위치가 인식되지 않으면 다른 브라우저에서는 이런 문제는 없습니다)
17. new에서는 매개변수가 없으면 함수 이름 뒤에 괄호가 있습니다.
new fn()==>new fn
new Image()==>new Image
먼저 많이 생각해보고 생각나면 보완하면 될 것 같아요 언급하는게 잘못된거니 천만에요
이상은 자바스크립트 프로그램의 최적화 문제에 관한 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!