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문 빠르다.[각주:1]
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 1
IE+JScript Performance Recommendations Part 2
IE+JScript Performance Recommendations Part 3
Posted by 전용우

댓글을 달아 주세요

지난 화요일날 webtech의 css세미나를 다녀온적이 있다.

내용도 좋았고 나름 재미있는 시간이였다.

거기서 각종팁들을 알져 줬는데 그중에 하나가 각각 짜른 이미지가 아니라
통이미지로 올려서 이미지들을 숨기는 방법을 알려줬다.

강사(임종혁님)가 말하길 이미지의 용량보다 이미지갯수가 페이지를 로딩하는데 더 큰 문제라고 하시면서 위와 같은 팁을 알려줬는데 바로 오늘 에이시안에 해당들이 올라왔다.

한번 확인해 보시길.^^

Posted by 전용우
TAG CSS, DESIGN, TIP

댓글을 달아 주세요

자바스크립트의 퍼포먼스 향상시키는 팁.

이번방법이 있다니 살짝 생각만 달리해도 이런 아이디어가 나오는구나.

같이 보면 좋음(오!! 내가 본 자바스크립트 아티클중에 최고)
Posted by 전용우

댓글을 달아 주세요