前言

用户在访问一个Web网站（页面）或应用时，总是希望它的加载速度快，功能流畅。那我今天就来和大家聊聊，在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。

我们知道一个页面通常由，html，css，js三部分组成，一般我们会把css文件放在head头部加载，而js文件则放在页面的最底部加载，想要知道为什么大家都会不约而同的按照这个标准进行构建页面，必须先得了解页面的加载过程。（当然以现在的技术你也可以不按这个标准，下面会有讲到js的异步加载问题）

1. 避免高消耗属性

一些CSS属性的渲染速度比其他属性慢，因此应该谨慎使用。包括以下属性：

box-shadow

border-radius

position: fixed

transform

:nth-child

filter

2. 使用link代替 @import

@import 规则主要用于导入资源或者CSS文件。它会阻止其他文件并行下载，并可能会导致网站速度变慢。

❌ 不要在CSS中这样操作：

@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");

可以使用多个HTML 中的标签来代替@import，它将并行加载CSS文件，可以在一定程度上提高应用的加载的速度。

✅ 可以在HTML这样操作：

<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">

3. 简化选择器

我们知道，有很多方法可以对 HTML 元素进行样式设置，而最复杂的 CSS 选择器可能需要几毫秒的时间来解析。降低选择器的复杂性就可以减少浏览器的负载并保持代码简洁明了。

❌ 避免这么写：

.container > div.links-container ul li .link {
 
}

✅ 可以这么写：

.container .link {

4. 压缩 CSS

我们可以通过压缩CSS文件来删除文件中所有的空白和不必要的代码来减少文件的大小。CSS文件变小了，加载的时间自然就变少了，页面的加载速度就会变。

6. 使用0而不是0px

当一个属性的值为0时，我们可以不添加任何单位。即不要这么写：0rem，0em，0px等。

当然，这么写是没有错的，但是这些单位是没有用的，当处理一个巨大的CSS文件时，没有单位会比有单位时文件小一点。

7. 使用十六进制而不是颜色名称

当我们将颜色设置为颜色名称时，浏览器就会花费更多时间来找出颜色的十六进制值。假如想使用红色，那设置为color:red之后，不同的浏览器显示效果可能是不一样的，作为开发人员，我们不能让浏览器来决定网页将如何显示。

因此，尽量使用使用十六进制（例如红色#ff0000）来定义颜色，就能确保在所有浏览器中以相同的色调准确得显示想要的颜色

8. 避免过多 font-family

为每个选择器去定义字体并不是一个好的办法，它会导致代码很难维护，假如以后想要更改字体，就不得不在每个选择器中更改它。

因此不要像下面这样来定义字体：

h1 {
  font-family: Arial, Helvetica, sans-serif;
}
 
p {
  font-family: Arial, Helvetica, sans-serif;
}
 
.selection {
  font-family: Arial, Helvetica, sans-serif;
}
 
.footer {
  font-family: "Times New Roman", Times, serif;
}

可以在正文中定义要使用的字体，如果想要在其他选择器中覆盖该字体，就可以通过在该选择器中使用所需的字体来实现：

body{
  font-family: Arial, Helvetica, sans-serif;
}
 
footer{
  font-family: "Times New Roman", Times, serif";
}

如果页面中很多部分的字体都不尽相同，就可以将字体定义在 class 中，然后在需要的HTML标签上使用该class即可：

.font-helvetica {
  font-family: Arial, Helvetica, sans-serif;
}
 
.font-times {
  font-family: "Times New Roman", Times, serif";
}

9. 使用 CSS 重置

10. 减少重复代码

当两个元素或选择器具有相同的 CSS 属性时，可以使用逗号来组合这些选择器，而不是重复声明样式，这样它们将共享 CSS 样式。

❌ 避免这样写：

.header {
  background-color: red;
  padding: 30px 0;
}
 
.footer {
  background-color: red;
  padding: 30px 0;
}

✅ 建议这样写：

.header,
.footer {
  background-color: red;
  padding: 30px 0;
}

css性能优化

前言