1.가능하면 간단하게 만들어라function foo(){
var i;
......
i=5;
}
보다는
function foo(){
var i=5;
......
}
2.보다 빠르게 dom을 찾기위해 정확하게 해라.var link = location.href;
보다는
var link = window.location.href;
3.프로퍼티를 찾는것을 캐싱을 해라.(.이나 []을 사용을 최소화해라.)for(var i = 0; i < 1000; i++)
a.b.c.d(i);
보다는
var e = a.b.c.d;
for(var i = 0; i < 1000; i++)
e(i);
----------------------------------------------------------------------
for (i=0; i<someArrayOrObject.length; i++)
보다는
for (i=0, var n=someArrayOrObject.length; i<n; i++)
4.이름으로 찾기보다는 index을 이용해라.var form = document.f2;
보다는
var form = document.forms[1];
5.with 구문을 피해라.with (document.formname) {
field1.value = "one";
field2.value = "two";...
}
보다는
var form = document.formname;
form.field1.value = "one";
form.field2.value = "two;
6.하위트리를 오프라인으로 처리한후 추가하거나 수정해라.(부가 설명을 드리면 오프라인이란 추가하거나 수정할 노드가 현재 보여지는 페이지의
노드가 아닌것을 말합니다.그래서 매번 추가하거나 수정할때 오프라인이 아닌경우 페이지가
업데이트가 되기 때문에 느려집니다.코드를 보시면 좀더 쉽게 이해하실겁니다.
근데 제가 알기로는 이러한 방식은
ie에서 메모리 릭이 생기는걸로 알고 있습니다.)
var tableEl, rowEl, cellEl;
var numRows = 10;
var numCells = 5;
tableEl = document.createElement("TABLE");
tableEl = document.body.appendChild(tableEl);
for (i = 0; i < numRows; i++) {
rowEl = document.createElement("TR");
for (j = 0; j < numCells;j++) {
cellEl = document.createElement("TD");
cellEl.appendChild(document.createTextNode("[row "+i+" cell "+j+ "]"));
rowEl.appendChild(cellEl);
}
tableEl.appendChild(rowEl);
}
보다는
var tableEl, rowEl, cellEl;
var numRows = 10;
var numCells = 5;
tableEl = document.createElement("TABLE");
for (i = 0; i < numRows; i++) {
rowEl = document.createElement("TR");
for (j = 0; j < numCells;j++) {
cellEl = document.createElement("TD");
cellEl.appendChild(document.createTextNode("[row " +i+ " cell "+j+"]"));
rowEl.appendChild(cellEl);
}
tableEl.appendChild(rowEl);
}
document.body.appendChild(tableEl);
----------------------------------------------------------------------------
var ul = document.getElementById("myUL");
for (var i = 0; i < 200; i++) {
ul.appendChild(document.createElement("LI"));
}
보다는
var ul = document.getElementById("myUL");
var li = document.createElement("LI");
var parent = ul.parentNode;
parent.removeChild(ul);
for (var i = 0; i < 200; i++) {
ul.appendChild(li.cloneNode(true));
}
parent.appendChild(ul);
8.오브젝트 리터럴을 사용해라.car = new Object();
car.make = "Honda";
car.model = "Civic";
car.transmission = "manual";
car.miles = 1000000;
car.condition = "needs work";
보다는
car = {
make: "Honda",
model: "Civic",
transmission: "manual",
miles: 1000000,
condition: "needs work"
}
9.자주사용되는 값은 캐싱해라.var d=35;
for (var i=0; i<1000; i++) {
y += Math.sin(d)*10;
}
보다는
var d=35;
var math_sind = Math.sin(d)*10;
for (var i=0; i<1000; i++) {
y += math_sind;
}
10.로컬변수를 사용해라(찾는순서가 로컬변수를 먼저찾기 때문.)
function MyInnerLoop(){
for(i=0;i<1000;i++);
}
보다는
function MyInnerLoop(){
for(var i=0;i<1000;i++);
}
11.if문보다는 switch문이 좋다.(위의말은 정답이 아니다.일반적으로 작은수에 switch문 비교는 효율이 있지만 큰수나 문자간의 비교는 매우느리다고 합니다.
그럴때 hash을 이용하라고 합니다.
그리고 추가로 일반적인 언어에도 if문과 switch문은 사용용도가 틀리다고 합니다.)
if(n==12)
someBlock();
else if(n==26)
someOtherBlock();
보다는
switch(a){
case 12 :
someBlock();
break;
case 26 :
someOtherBlock();
break;
}
12.변하지 않는 코드는 루프밖으로 빼라.for (i=0;i<iter;i++) {
d=Math.sqrt(y);
j+=i*d;
}
보다는
d=Math.sqrt(y);
for (i=0;i<iter;i++) {
j+=i*d;
}
13.감소루프를 이용해라.function loopNormal() {
for (var i=0;i<iter;i++) {
// do something here
}
}
보다는
function loopReverse() {
for (var i=iter;i>0;i--) {
// do something here
}
}
14.for문 보다는 do while문 빠르다.15.do while문보다는 감소하는 do while문이 빠르다.젤 아래 루프문이 제일빠름
var k=num-1;
do {}
while (k--);
var k=num;
do{}
while (--k);
(테스트 해본 결과 정말 마지막 do while이 일반적인 for문보다 약 2배 좀 넘게 빠른것 같습니다.ie6,7 ff2.0 opera9.2 모든 브라우저에서 빠릅니다.하지만 원글의 표에 나와있는 차이는 안나는것 같습니다.)
원글에서 짤라서 필요한것들만 적었습니다.
자세한글을 보시기 원하시면 원글을 읽어 보시기 바랍니다.
같이 보면 좋은글
IE+JScript Performance Recommendations Part 1IE+JScript Performance Recommendations Part 2IE+JScript Performance Recommendations Part 3
invalid-file
