매우 중첩 된 CSS로 웹 페이지가 느려질 수 있습니까?

Question

웹 응용 프로그램의 대시 보드에 table이 있습니다. 행은 Backbone의 뷰 중 하나에 의해 동적으로 추가됩니다. 새로운 요소의 추가가 빠르지 만 <tr>의 수가 100을 초과하면 스크롤이 지연됩니다.

나는 각각 제거한 <tr>에 대해 mouseout 이벤트 바인딩을 가졌습니다. 그러나 이것은 문제를 해결하지 못했습니다. 나는 이제 CSS를 범인으로 생각하고 있습니다. 나는 tbody, tr, td 및 tbody:hover, tr:hover, td:hover에 대한 일반적인 스타일과 함께 tbody:first-child, tr:first-child, 모두 td:last-child, 정상 및 hover 상태에 대해 정의 된 스타일을 중첩했습니다.

나는 이것이 지연의 이유라고 생각하지만, 나는 다른 용의자가 없다. CSS가 속도 저하에 추가 될 수 있습니까?

CSS는 - https://gist.github.com/4138323

Answer 1

그것은 보인다 그것을 아래로 둔화 된 중첩 CSS하지 않았다. 이것은 완전히 모호할지 모르지만 나는 여전히 나를 위해 일한 것을 게시 할 것입니다.

내 설정은 <table>에 100 <tr> 및 약 40 <tbody>을 추가 한 다음 사용자 작업을 기준으로 제거/다시 렌더링되었습니다. 물론 IE에서는 DOM이로드 된 후 <tr>을 추가 할 수 없으므로 IE에서는 작동하지 않습니다. 그래서 나는 div과 span을 사용했고, 놀랍게도 다른 브라우저의 지연을 줄였습니다. 모든 것이 순조롭게 진행됩니다.