用这6个技巧提高CSS性能简介 CSS位于网站设计的表现层。如果做得好，它可以为你的用户增加美感，并为下面的HTML标记

简介

CSS位于网站设计的表现层。如果做得好，它可以为你的用户增加美感，并为下面的HTML标记提供正确的感觉。如果做得不好，它可能会导致糟糕的用户体验，并对你的网站的速度和性能造成影响。

在这篇文章中，你将学习如何避免一些常见的CSS编码决定，这些决定会使你的网站陷入困境。最后，你将能够加快你的网站并改善用户体验--这正是每个开发人员所渴望的！我们将介绍这六个CSS主题。

我们将介绍这六个CSS主题，以改善你的代码，提高网站的性能。

编写简单的选择器
避免过多的动画
知道何时对昂贵的属性进行动画处理
[@import 语句](#import statement)
优化你的文件大小
避免使用base64位图图像

关于网站性能为何重要的简短说明

不管你的网站的性质如何，也不管它在各种网络浏览器上是否表现良好，它都必须快速加载。如果它不快，你的用户就会离开并去其他地方。

如果你碰巧在你的网站上销售服务或商品，这意味着销售量减少，因为网络上有很多选择，而你已经给用户一个明确的指示，让他们去找别的地方。他们甚至可能阻止其他人在未来使用你的网站，这可能导致页面浏览量减少。

让我们开始吧!

1.编写简单的选择器

CSS有一系列广泛、灵活的编码选项，你可以用它们来针对HTML元素进行样式设计。多年来，专家们建议开发者编写简单的选择器，以减少浏览器的负载，并保持代码的干净和简单。

接下来的这个代码块展示了什么是简单性。

.hero-image {
    width: 70%
}

然而，CSS并不能阻止你写出以下内容。

main > div.blog-section + article > * {
    /* Code here */
}

在这个例子中，在幕后，浏览器将从右到左解析选择器，从通用选择器(*)开始，横着读到main 选择器。这对浏览器来说是比平常更多的工作。尽管我们讨论的是解析这个选择器的毫秒之差，但当这个选择器方法在你的样式表中出现多次时，这些毫秒就会增加。

此外，你的选择器越长，它们对你的样式表的整体大小增加的字节数就越多。

2.避免过多的动画

现在，动画在原生的CSS中是可用的，没有必要使用JavaScript来给你的网页添加动画。这使得在你的网站上添加动画变得更加容易，并且意味着，如果做得好，你可以利用它们来创造更好的用户体验。

然而，当你做得过头时，你可能会分散用户的注意力，使他们在访问你的网站时无法完成他们想要的任务。还要记住，你添加的每一个动画都需要时间来解析，所以过度的动画可能会减慢或停止网络浏览器的运行。

3.知道何时对昂贵的属性进行动画处理

这很简单：导致整个页面重新布局的属性不应该被动画化。这些属性通常被称为 "昂贵"，因为它们会给你的网站带来大量的加载时间。其中有些是这样的。

margin
padding
height
width

原因是，当你改变单个DOM元素的属性，如margin 和其他尺寸时，会引起所有其他元素的变化。

其他一些属性，如opacity 和transform ，可以是动画的，因为它们不影响其他元素的布局。这使得网络浏览器有可能将这些计算卸载到GPU上，以便更快。

某些其他的CSS属性是比较常用的，但仍然会花费较长的时间来绘制。这些属性中的一些包括。

:nth-child
box-shadow
border-radius
position: fixed

当这些出现在你的样式表中的数百个时，会影响你的网站的性能。尽量少用这些属性。

4. `@import`声明

@import 语句主要用于包括字体等资产，尽管它可以包括其他CSS文件。CSS是阻断渲染的，这意味着当你在CSS文件中使用@import 语句来获取一个字体或其他CSS文件时，浏览器会在继续处理剩余的CSS代码之前获取该资产。

/* styles.css */
/**
 * The browser would fetch base.css before
 * processing the remaining code in styles.css
 */
@import url("base.css");

当该资产是一个字体文件时，浏览器将使用系统中可用的字体，同时等待其他字体的下载。在下载之后，它将把系统字体换成下载的字体。因此，你的用户可能正在用一种字体阅读你的内容，而突然间字体变成了另一种。这对用户体验是不利的。

下面是一个用@import 语句加载字体的例子。

/**
 * Example of loading a font with the
 * @import statement.
 * The font is only available after it downloads.
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

相反，我们建议在你的HTML的head 中使用link 标签来加载你的字体，如下所示。

<link rel="preload" as="font" href="https://fonts.googleapis.com/css?family=Open+Sans" crossorigin="anonymous">

这里，rel="preload" 和as="font" 告诉浏览器尽快开始下载字体。你还可以采取措施，确保你预装的字体文件与你的CSS中的字体相匹配，以防止用户下载同一字体的两个版本，浪费他们的带宽。

5.优化你的文件大小

在网页设计和开发中，尺寸很重要。无论你处理的是图片、HTML或JavaScript文件，还是其他媒体资产，都有一个黄金法则：永远要压缩。

通过minification减少你的CSS文件大小。你的网站上的图像应该被优化，以降低其加载速度，这可能意味着使用像TinyPNG这样的在线工具 - 或者，如果你正在创建你自己的图像，利用Photoshop中的Save for Web等工具。

6.避免使用base64位图图像

Base64图像是在网页上嵌入图像的选项之一。多年来，像Harry Roberts这样的专家已经证明了为什么base64图像对性能不利，原因有很多。

它们大大增加了CSS文件的整体大小
它们会被下载，不管它们是被使用还是被浏览
Base64编码导致图像文件的大小大于正常值
浏览器在使用前必须解析整个base64字符串

在下面的图片中，观察每张图片在转换为base64之前和之后的大小变化。

Before-and-after of the base64 image conversion

看看当我们把这三张base64图片添加到一个只有14行代码的CSS文件中会发生什么。

/**
 * Base64 code truncated.
*/
@media screen and (min-width: 20em) {

    html {
     background-image:  url('data:image/png;base64,iVBO ...');
    }
    
    footer {
     background-image:  url('data:image/png;base64,iVBO ...');
    }

    .non-existence-class {
     background-image:  url('data:image/png;base64,iVBO ...');
    }

}

文件大小增加到500KB以上。这不仅是巨大的，而且无论是否使用图片，用户的浏览器也将花费时间下载这个文件。

base64 image file size increase

同时，在下面的代码中，浏览器会根据浏览器的视口，按需下载图片。

html {
    padding: 2em;
    background-image: url("images/asnim_mobile.jpg");
}

@media screen and (min-width: 20em) {
    html {
     background-image: url("images/asnim_tablet.jpg");
    }
}

@media screen and (min-width: 48em) {
    html {
     background-image: url("images/asnim.jpg");
     background-size: cover;
    }
}

你可以通过执行以下步骤来验证这一点。

为不同的断点创建三个不同大小的图片，如前面的代码块所示
复制该代码块，将你的图片作为背景图片
启动你的浏览器，在开发工具中打开 "网络"标签
调整你的浏览器视口的大小并观察

总结

当你把本文所学到的经验应用到你未来的网络项目中时，你就会知道，你将为一个更好的网络做出贡献如果你有一个网站，你觉得需要进行性能改造，用本文学到的经验重构你的代码，并在评论中让我们知道情况如何。

进一步阅读

浏览一些关于额外的CSS和一般网络性能更新的提示，你可以做。

The postImprove CSS performance with these 6 tipsappeared first onLogRocket Blog.

用这6个技巧提高CSS性能

简介