리스트가 포함된 IE 페이지 로딩 속도 향상에 대해

저만 그런 건 아닐 테고 웹페이지 만들때 리스트 많이들 쓰시죠?

얼마전에 jquery를 사용하여 페이지 리뉴얼을 해놓았는데

클라이언트에서 페이지가 뜨는데 시간이 너무 많이 걸린다고 하길래

분석하다보니 재밌는 사실을 알게 되었습니다.

(물론 파이어폭스,크롬,오페라,사파리 등은 절대 느리지 않습니다.)

한페이지당 50 row의 데이터고 버튼이 1 row당 4개씩 들어갑니다.

1. 시도1 : table → div
    결과 : 매우 느림(별 차이 없음)

2. 시도2 : 이미지 또는 버튼을 모두 삭제
    결과 : 매우 빨라짐

3. 시도3 : 이미지 또는 버튼에서 이벤트핸들러 영역 삭제
    결과 : 매우 빨라짐

4. 시도4 : 이미지 또는 버튼에서 이벤트핸들러 영역에 alert('1')로 바꿈
    결과 : 매우 빨라짐

5. 시도5 : 이미지 또는 버튼에서 이벤트핸들러 영역에 alert('<?php echo $i?>')로 바꿈
    결과 : 매우 느림(별 차이 없음)

5번까지 가서야 알게 되었습니다.
스크립트 함수안의 인자가 틀려지게 되면 객체를 렌더링하는 시간이 많이 걸리게 된다는 것을요.

그래서... 함수에 인자를 모두 this 로 변경하고 함수내에서 DOM으로 들어갈 값을 찾아내도록 변경하였습니다. 기존보다 4배정도(다른 브라우저와 비슷) 빨라진듯 싶네요.


덧글 :
그렇다면 jQuery 본연의 방식대로 html 에서는 js 를 아예 걷어내 버리면 매우 빠르겠네요.
$(document).ready(function() {
$('img.button').click(ImgFunc);
}
로 해도 this 죠.

--------------------------------------------------------------------------------------------------------
제가 해봤는데요.........

1.
<a href="#" onclick="alert('1')">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#" onclick="alert('1')">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#" onclick="alert('1')">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#" onclick="alert('1')">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#" onclick="alert('1')">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#" onclick="alert('1')">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#" onclick="alert('1')">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#" onclick="alert('1')">여기 클릭하면 alert창이 뜰꺼야</a>

2.
<a href="#">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#">여기 클릭하면 alert창이 뜰꺼야</a>
<a href="#">여기 클릭하면 alert창이 뜰꺼야</a>

$(function () {
    $("a").click(function () { alert("1") });
});


2번이 눈에 띄게 느리더군요 ㅠ.ㅡ


그래서 jquery 에서 이벤트를 지정하지 않고 코드내에 다 삽입했다는 ㅠ.ㅡ

--------------------------------------------------------------------------------------------------------

출처 : http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=68700&page=1