媒体查询的 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 也有类似的工具。

这是它的样子的小截图: