여러 요소에 className을 추가할 때 발생하는 IE6 성능 문제(jQuery tableHover 플러그인)

StackOverflow https://stackoverflow.com/questions/1402617

문제

큰 HTML 숫자 테이블을 사용하는 응용 프로그램에서는 디자인에 마우스오버된 셀의 행과 열이 강조 표시되도록 요구합니다.

저는 jQuery 1.3.x를 사용하여 이 프로젝트의 모든 JS를 개발했는데, 테이블호버 나에게 필요한 기능을 정확하게 수행하는 플러그인입니다.

하지만:

IE6에서는 셀 요소 수가 페이지가 거의 응답하지 않는 지점까지 증가함에 따라 이 플러그인의 성능이 저하됩니다.

나는 문제가 플러그인에 있다고 생각했고 실제로 동일한 성능 문제가 있음을 발견하기 위해 처음부터 전체 기능을 다시 작성했습니다.

코드를 디버깅한 후에 나는 이제 많은 양의 요소를 선택하고 적용한다는 것을 알게 되었습니다. 클래스 이름 (jQuery.addClass())은 IE6에서 매우 느립니다.

사용해 보았습니다 jQuery.css() 대신에 배경색, 성능은 더 좋지만 다시 테이블 셀 수가 증가하면 성능이 사용할 수 없는 상태로 떨어지고 다른 모든 브라우저에서는 jQuery.css() 것보다 훨씬 느립니다 jQuery.addClass().

여기서 가장 큰 문제는 테이블 열에 대한 공통 상위 항목이 없기 때문에 열의 스타일을 지정하려면 전체 테이블을 순회하고 각 행을 선택한 다음 오른쪽을 찾아야 한다는 것입니다. n번째 아이 TD.내 jQuery 코드는 다음과 같습니다.

//col_num is the current td element
//table is the parent table    
var col_num = cur_cell.prevAll().length + 1;
var this_col = $('tr td:nth-child(' + col_num + ')', table);

문제와 관련이 없으므로 여기에 전체 코드를 붙여넣지 않겠습니다.내가 찾고 있는 유일한 대답은 다음과 같습니다.더 나은 성능 마진으로 필요한 작업을 수행할 수 있는 알려진 방법이 있습니까?나는 "Chrome" 성능 속도를 원하는 것이 아니라 "응답 없음"보다 빠른 속도를 찾고 있습니다.

트낙스

톰.

도움이 되었습니까?

해결책

나는 매우 큰 테이블에서 성능이 복잡한 jquery를 다루었습니다. IE6.제가 도움을 드릴 수 있는 방법은 다음과 같습니다.

  • 인코딩하다 만큼 가능한 한 HTML의 데이터.예를 들어 TD 클래스 또는 이름 속성의 행 번호와 열 번호를 인코딩합니다.
  • 마우스 리스너를 추가하세요. 전체 테이블을 만든 다음 event.target을 사용하여 TD를 가져옵니다.
  • 포인트 #1에서 가리키고 있는 셀의 위치를 ​​구문 분석합니다.
  • 다시 말하지만, 아마도 수많은 클래스를 추가해야 할 것입니다. 그러나 각 열과 각 행에 대한 클래스가 있어야 합니다. 이렇게 하면 2개의 클래스 선택기로 전체 행과 전체 열을 모두 선택하고 CSS를 추가할 수 있습니다.
  • 캐시를 최대한 많이.사용자가 한 셀에서 다른 셀로 이동하는 경우 이미 강조표시한 행에 해당 셀이 있는지 확인하세요.내 생각에 이것은 거의 확실하게 발생하므로 선택기 작업의 1/2만 수행하면 됩니다.
  • 선택한 전체 열을 캐시하므로 행에 대해서도 동일하게 두 번 선택할 필요가 없습니다.
  • 이 반응성을 확인해보세요 플러그인 내가 썼는데, 당신은 그것을 사용하고 싶을 수도 있습니다.
  • 또한, 있다 또 다른 나는 빠른 jquery 플러그인 작성 주제에 관해 글을 썼습니다.

다른 팁

브라우저의 CSS 일치 엔진이 귀하에게 효과를 발휘하도록하여 클래스 이름 변경 및 그에 따른 리플 로우의 수를 줄입니다. 예를 들어, 3x3 테이블의 경우 :

<style type="text/css">
    .sel-row-0 .row-0 td, .sel-row-1 .row-1 td, .sel-row-2 .row-2 td,
    .sel-col-0 .col-0, .sel-col-1 .col-1, .sel-col-1 .col-1 {
        background: red;
    }
</style>

<table id="foo">
    <tr class="row-0">
        <td class="col-0">a</td>
        <td class="col-1">b</td>
        <td class="col-2">c</td>
    </tr>
    <tr class="row-1">
        <td class="col-0">d</td>
        <td class="col-1">e</td>
        <td class="col-2">f</td>
    </tr>
    <tr class="row-2">
        <td class="col-0">g</td>
        <td class="col-1">h</td>
        <td class="col-2">i</td>
    </tr>
</table>

이제 외부 테이블에서 클래스 이름을 "sel-row- (num) sel-col- (num)"으로 설정하면 모든 셀이 한 번에 업데이트되며 클래스를 루핑하고 설정하는 것보다 훨씬 빠릅니다.

매우 많은 수의 Cols/행의 경우 스타일 시트의 데이터 양이 다루기 어려울 수 있습니다. 문서를 통해 스타일 시트의 규칙을 동적으로 변경함으로써이 문제를 해결할 수 있지만 jQuery가 도움이되지 않는 크로스 브라우저 작업이 필요합니다. 또는 많은 행이 있지만 열이 적은 테이블의 경우 선택된 행 클래스를 행에 직접 넣을 수 있으며이 방법을 강조 표시하는 열만 수행 할 수 있습니다.

(jQuery 선택기에서와 같이 CSS3 Nth-Child Selector를 사용할 수 있다면 좋을 것입니다. 그러나 브라우저 지원은 아직 없습니다.)

jQuery의 더 나은 반응을 찾을 때 나무의 숲을 보지 못하는지 궁금하십니까?

당신은 왜 포함하지 않습니까? <colgroup> 테이블 상단에있는 요소 (필요한 경우 jQuery와 동적으로 추가하여 명시 적으로 또는 필요한 경우 선택한 셀의 색인과 일치하는 열에 배경색 값을 할당 하시겠습니까?

IE6은 <colgroup> 요소, 그러나 제한된 속성으로 만. 그러나 배경색은 지원되는 것 중 하나이므로 성능이 크게 향상 될 것입니다.

나는 이것을 언급 했어야한다 - 나는 JavaScript보다 훨씬 더 나은 CSS/HTML 개발자이다. 나는 JS를 파기 전에 내가 아는 모든 비 스크립트 방법을 시도했다.

나는 실제로 시작했다 콜 그룹, 나는 같은 테이블의 열 너비에도 사용하지만 콜 그룹 그리고 안부 요소는 테이블 요소 뒤에 시각적으로 설정되므로 tbody, Tr, TD 또는 테이블의 다른 요소에는 배경이 있습니다 (제 경우에는 많은 사람들이 가지고 있습니다), 콜 그룹 이러한 요소들을 보여주지 않으며, 포지셔닝이나 다른 고급 CSS 조작에 응답하지 않았습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top