优化CSS：ID选择器和其他神话

在当今的网络景观中，普通网站提供了大量的JavaScript和图像有效载荷，CSS选择器性能很少是主要的瓶颈，尤其是在具有较慢网络连接的移动设备上。 但是，了解CSS选择器有助于消除常见的误解。

>

钥匙要点：

• 可忽略不计的影响：现代浏览器是高度优化的，可以最大程度地减少各种CSS选择器之间的性能差异。 速度冲击通常微不足道。
>
• 最佳实践：> 虽然对页面加载速度并不重要，但最佳实践包括避免过度复杂的选择器，在适当的情况下偏爱班级选择器，而不是标签或ID选择器，并避免使用通用选择器（*）。
• 样式膨胀情况更糟：更大的性能问题是“样式膨胀” - 包括整个CSS框架（例如Bootstrap，Foundation），并且仅使用一小部分。这增加了传输时间并阻碍可维护性。
可维护性是关键：优先考虑干净，可读的CSS。 始终使用课程，采用命名界约定（BEM，SMACSS，OOCS），并保持您的样式简洁而干燥（不要重复自己）。
• > CSS解析基本原理（眨眼渲染引擎）：

>

>本讨论的重点是选择器性能，而不是CSS属性/价值绩效。 眨眼引擎（Chrome）从右到左处理选择器。最右侧的选择器是“键选择器”。 浏览器最初匹配所有键选择器，然后根据其余的选择器逐渐过滤，向左移动。较短的，更具体的选择器（从类或ID开始）通常更有效。>

性能测量：

>较旧的基准测试表现出显着差异，但现代浏览器已大大改善。 最近的DOM元素的最新测试显示，不同选择器类型之间的性能变化最小，即使在极端条件下也以毫秒为单位测量。 在现实的情况下，差异通常微不足道。

> 可维护性的重要性：

>

>使用类和一致的命名约定（BEM，SMACSS，OOCSS）确定优先级。 过于复杂的选择器脆弱，容易出错并且难以维护。

> 样式膨胀：真正的罪魁祸首：

>

具有许多

选择器，即使单独高效，也会导致“样式膨胀”。 这显着影响了由于转移时间增加和CSSOM构建开销而引起的性能。 最小化CSS文件大小，仅加载必要的样式，并考虑诸如UNCS之类的工具以删除未使用的样式。

样式无效：动态网络：

>在动态网站上，DOM更改触发样式的重新计算。 复杂的选择器增加无效的范围，影响性能，尤其是在动画期间。 使用更简单，更具体的选择器来最大程度地减少这种影响。

结论： 除非使用异常复杂的选择器，否则性能影响是最小的。 专注于可维护，可读的CSS，优化CSS交付并了解渲染管道。 请记住，该样式

属性

>比选择者本身更重要。 随着浏览器的优化不断发展，始终进行自己的性能测试。 >经常询问问题（FAQ）：

>

>提供的常见问题解答部分准确地反映了文章的内容，并以简洁而有益的方式回答了有关CSS选择器性能和优化的常见问题。 不需要更改。

以上是优化CSS：ID选择器和其他神话的详细内容。更多信息请关注PHP中文网其他相关文章！