---
title: CSS Performance
localeTitle: CSS性能
---
## CSS性能

大多数时候CSS不是您的网页加载缓慢的原因。在某些情况下，如果您的CSS文件混乱了数百个无法使用的选择器，它可以减少您的网站加载时间。以下是一些关于如何编写快速，可维护的CSS的基本指南。

### 不同选择器的性能

看看这个例子：

```css
#unique-id { }         // fastest 
 .general-class { }  // also fast 
 li { }              // ok 
 * { }               // slow 
```

不出所料，ID选择器是最快的，其次是类。像`div`或`li`这样的简单标记元素处理得相当慢。

### 如何选择元素

想象下面的CSS：

```css
nav ul li a { 
  color: #fff; 
 } 
```

这不是一个好主意。有更好的方法可以在导航中选择链​​接元素。但是计算机如何实际选择正确的元素呢？ 首先，它找出每`a`页面上的元素。然后它检查是否在一个`li`元素内，在`div`内部的`ul`内。因此浏览器从右到左阅读选择器。 如果您有数百个链接，这可能需要一段时间才能处理，那么您应该怎么做？

### 提高CSS性能

根据经验：

*   避免使用后代选择器，如`ul li a`等。
*   不要回避使用大量描述性的类名`.footer-nav-link`
*   如果要选择元素`.image-container > img`的直接子`.image-container > img`请尝试使用子选择器
*   避免使用通用选择器`* { }`

### 这真的是必要的吗？

这可能是20年前计算机不像现在这么快的问题。请不要在将来完全避免后代选择器。但请记住，您的目标是编写可维护的CSS，因此可能需要一点思考。 有时`nav ul li a`器选择器在具有数百个链接的页面上不是一个好主意。