1.7 KiB
1.7 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| CSS Performance | CSS性能 |
CSS性能
大多数时候CSS不是您的网页加载缓慢的原因。在某些情况下，如果您的CSS文件混乱了数百个无法使用的选择器，它可以减少您的网站加载时间。以下是一些关于如何编写快速，可维护的CSS的基本指南。
不同选择器的性能
看看这个例子：
#unique-id { } // fastest
.general-class { } // also fast
li { } // ok
* { } // slow
不出所料，ID选择器是最快的，其次是类。像div或li这样的简单标记元素处理得相当慢。
如何选择元素
想象下面的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器选择器在具有数百个链接的页面上不是一个好主意。