css - Can extremely nested CSS slow down a web page?

Question

I've a table on my web application's dashboard. Rows are added to it dynamically by one of the Backbone's view. Although addition of new element is fast, scrolling lags when the number of <tr>s exceed 100.

I had a mouseout event binding on each <tr> which I've got rid of now. This hasn't solved the problem though. I'm considering CSS to be the culprit now. I've nested styles defined for tbody:first-child, tr:first-child, td:last-child for both, normal and hover state, along with general styling for tbody, tr, td and tbody:hover, tr:hover, td:hover.

Although I very much doubt this is the reason for the lag, I'm left with no other suspect. Is it possible that CSS is adding to the slow down?

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

Answer 1

似乎不是深度嵌套的 CSS 减慢了它的速度。这可能完全模糊，但我仍然会发布对我有用的内容。

我的设置是向 a 添加 100<tr>秒和大约 40<tbody>秒，<table>然后根据用户活动将其删除/重新渲染。这当然在 IE 中不起作用，因为 IE 不允许在加载<tr>后添加 s 。DOM因此我求助于使用divs 和spans ，令人惊讶的是，这减少了其他浏览器的延迟。现在一切都很顺利。