媒体查询的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，或Chrome Canary，然后查看CSS审核的新性能。它可以让您了解每个选择器运行的时间长度，以及总时间的百分比。 Opera的新版本也有类似的工具。

这是一个小截图：