html 앵커의 onclick 이벤트로 인해 페이지로드가 느려짐

Question

우리가 가장 아래쪽에 도달하는 데 어려움을 겪고 있습니다.

웹 기반 시스템이 있으며 해당 페이지에는 약 600 개의 행이있는 테이블이 있습니다. 각 행에는 onclick 이벤트가있는 두 개의 앵커로 구현되는 두 가지 옵션 "잠금/잠금 해제"와 "편집"이 있습니다. onclick 이벤트는 html로 정의되고 jquery로 바인딩되지 않습니다. 이는 각 자바 스크립트 호출이 레코드의 ID를 기반으로 다른 경우입니다. 잠금 해제 (132);

이 페이지는 인터넷 탐색기에서 렌더링하는 데 10-25 초가 소요되지만 즉시 크롬 화면에 표시됩니다. 우리 고객은 인터넷 익스플로러만을 지원합니다! :(

이것은 내가 발견 한 것을 내가 누군가에 무슨 일이 일어나고 있는지 설명하거나 문제가 발생하는 이유는 몇 가지 이유를 제공 할 수있는 희망 :

1. 나는 온 클릭과 장소에서 자바 스크립트 호출을 이동하는 경우 href 내부에서 페이지가 즉시로드됩니다. 어떤 차이가 있습니까?

2. 자바 스크립트 호출을 alert ('');로 대체하면 (여전히 onlick 속성에 있음) 페이지에 즉시 2a가로드되므로 javascript 다시 호출하지만 빈 스텁으로 함수를 대체하고 페이지가 여전히 천천히로드됩니다. 인터넷 익스플로러가 무엇을하고 있는지 전혀 몰라서 이상해!

아무도 비슷한 이야기를 들었거나 무슨 일이 일어나고 있는지 잘 설명해 주시겠습니까? 문제가 살아있는 예제를 보지 않고 발생하는 이유

안부 마태 복음

Answer 1

그것은 어려운 말을. 이전에는 IE6에서 큰 테이블의 앵커에 동적으로 바인딩 된 핸들러가있는 매우 중요한 성능 문제가 있었던 비슷한 프로젝트를 보았습니다. 그러나 html로 하드 코딩 된 것은 아닙니다.

해결 방법 중 하나는 DOM의 상위 수준에서 클릭 이벤트를 한 번 캡처 한 다음 소스 앵커를 식별하는 것입니다. jQuery (> = v1.4.2)를 사용하는 경우 delegate을 사용하여 매우 빠르게 구현할 수 있습니다. 당신의 js에서

<td> 
    <a href="#" class="lock" data-id="123">Lock/Unlock</a> 
    <a href="#" class="edit" data-id="123">Edit</a> 
    ... data ... 
</td> 

는 테이블의 모든 앵커에 대한 해고하는 클릭 이벤트 대리자를 추가 : 당신은 HTML에서 (다음 data-id 속성이 html5 doctype과 유효성을 검사합니다 참고) 다음 앵커가

. 그런 다음 데이터-ID로 클릭 앵커를 확인하고 당신이 필요로하는 어떤 기능 전화 :

$('table').delegate('a', 'click', function() { 
    var el = $(this) 
     id = el.attr('data-id'); 

    if (id && el.hasClass('lock')) { 
     alert('Lock/unlock ' + id); 
     // do stuff... 
    } 
    if (id && el.hasClass('edit')) { 
     alert('Edit ' + id); 
     // do stuff... 
    } 
}); 

사용하여 대표는 동적 테이블의 내용을 변경하는 경우 이벤트 처리가 새로 만든 앵커을 위해 작동하는 장점이있다. 예를 들어, ajax를 사용하여 새 데이터가로드되는 테이블에 페이지 매김을 추가하기로 결정했다고 가정 해보십시오.

UPDATE : 코멘트 기준

위임자의 데이터를 전달하기 위해 쿼리 스트링 파라미터들을 사용하는 예 http://jsfiddle.net/johnhunter/QKYJ5/을 첨가 하였다. 이렇게하면 js가 html로 유지되고 비 스크립트 대체에 대한 기반이 될 수 있습니다.

Answer 2

나는 어려운 방법을 배웁니다. 문서를 준비 할 때 js를 사용하여 요소 이벤트를 바인딩하면 많은 요소가있는 페이지에서 매우 느립니다. js를 통해 HTML을 렌더링하자 (Ajax 호출 후 새 정보로 페이지를 업데이트하려고했지만 페이지의 다른 부분에 새로운 데이터가 나타날 경우를 대비하여 전체 페이지를 다시 렌더링해야 함). 내 페이지가 항상 시간 초과되었습니다. 그건 IE 용이야. 그래서 인라인 이벤트 바인딩을 사용하고 모든 이벤트 후에 페이지를 다시로드하기로 결정했습니다.

Answer 3

@Matthew 안녕하세요, 저는 똑같은 문제에 직면했습니다. 나는 두 개의 매개 변수를 취하고 앵커 태그에 onclick 이벤트와 바인딩 된 자바 스크립트 함수를 사용하고있었습니다. 이것은 IE에서 페이지의로드 시간을 늦추고있었습니다.

솔루션 : jQuery를 사용하여 onclick 대신 onclick 이벤트를 앵커 태그 안에 바인딩하십시오. U는 정규 표현식을 사용하여 앵커 요소를 검색 할 수 있습니다. 아래로 document.ready()에 다음 코드를 사용하여

$(document.ready(function(){ 

$("a[id^=elemID]").click(function(){ 

//Your call to the javascript function. 

    }); 

}); 

이것은 확실히 문제를 해결합니다.

감사합니다.