이유 : DOM 요소 수가 많아서 호버가 너무 느림

호버 (가면 테이블과 같은) 클래스로 스타일이 지정된 javascript 요소가로드 된 수많은 DOM이있는 경우 Chrome에서 효과가 느리게/느리게 렌더링됩니다 & 원정 여행. Firefox는 다음과 같이 많은 수의 행을 처리합니다.이유 : DOM 요소 수가 많아서 호버가 너무 느림

예를 들어, 호버 효과를 사용하여 10,000 개의 행을 생성하여 차이를 확인할 수 있습니다. 내가 만 개 행을 알고 http://jsfiddle.net/jschin/VwmjT/

var table = document.createElement('table'); 

for (var i=0; i<10000; i++) { 
    var r = document.createElement('tr'); 

    for (var j=0; j<3; j++) { 
     var c = document.createElement('td'); 
     c.appendChild(document.createTextNode(i*j)); 
     r.appendChild(c); 
    } 

    table.appendChild(r); 
} 

document.getElementById('b').appendChild(table);

나쁜 생각입니다. 니가 페이지 매김을해야한다는 거 알아. 나는 이것이 왜 그런지의 성격에 대해서 궁금해합니다.

출처

2013-06-19 schinizel

웹킷에 버그가있는 것 같습니다. 사실 버그는 다음 규칙에 의해 야기되었습니다.

tr:nth-child(even) { 
    background-color: #F8F9FC; 
}

크롬을 제거하려고하면 놀랍게 가속됩니다.

그래서 난 당신의 바이올린 http://jsfiddle.net/m3f4D/

UPDATE 업데이트 :이보고 된 버그 https://code.google.com/p/chromium/issues/detail?id=160212

출처

2013-06-19 18:11:50 claustrofob

한 버그 리포트에 링크 - 우리는 내 자신의 버그를 신고하는 경우이, 2016 년 고정 기대할 수 (다른 무엇을 위해)가는 것은 무엇이라도이다! –

아마도 Google은 Blink 엔진에서 더 빨리 문제를 해결할 것입니다. – claustrofob

... 결코 추측 할 수 없었을 것입니다. thnx! – schinizel

이유 : DOM 요소 수가 많아서 호버가 너무 느림

답변

관련 문제