45 lines
1.7 KiB
Markdown
45 lines
1.7 KiB
Markdown
---
|
||
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`器选择器在具有数百个链接的页面上不是一个好主意。 |