媒体查询的CSS性能

Question

我想知道CSS是否可以"重",例如从浏览器中使用大量的解析时间.

例如,我使用带有许多特定选择器的CSS表

:last-child, 
:nth-child(n) 
table.sortable thead tr th:not(.table-th-nosort):hover

是否可以显着影响性能？

使用媒体查询也是如此.我想使用CSS3媒体查询为移动设备设置一个站点:

@media screen and (max-width: 600px) {
   #sidebar {
      display: none;
      // etc
   }
}

目前我的主文件中有大约600行CSS(未缩小),而某些特定页面包含额外的CSS文件(10-300行之间).

使用媒体查询将大大增加我期望的.这会对性能产生影响吗？

Answer 1

最简单的检查方法是获取 webkit nightly 或 Chrome Canary，然后查看新的 CSS 性能审核。它可以让您查看每个选择器运行所需的时间以及所用总时间的百分比。新版本的 Opera 也有类似的工具。

这是它的一个小屏幕截图：