web网站前端性能优化（二）css优化

CSS优化

使用缩写的css样式规则
使用简短的CSS样式规则会减少样式文件的大小。这种方法在短期内不会为您节省很多，但是如果在大型样式表中使用，那么它可以起到很大的作用。所以养成使用简短样式规则是个好习惯。

div {
    /*使用简短样式规则*/
    border: 1px solid red;
    margin: 1px 2px 3px 4px;
}

div {
    border-left: 1px solid red;
    border-right: 1px solid red;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    margin-left: 1px;
    margin-right: 2px;
    margin-bottom: 3px;
    margin-top: 4px;
}

使用更浅的css选择器
在大型样式表中，保持CSS选择器简洁可以节省空间。通过降低复杂性，您可以保持样式表的精简和低加载时间，从而提高页面的性能。为了保持css选择器的简洁，那么html的结构也就需要保持简洁不要嵌套过深的结构。

使用CSS预编译器
CSS预编译器在前端开发人员的工具包中非常重要。预编译器提供了普通CSS中一些没有的特性，包括变量、混合器(称为mixin)，以及预编译的导入模块功能，嵌套样式规则（它的可读性更强，因为它模仿了HTML的层次结构）。然后，这些工具将用预编译器语言编写的文件编译为浏览器可以理解的普通CSS。流行的预编译器是LESS (http://lesscss.org)和SASS(http://sass-lang.com)
这里作者更推荐sass，这里列举了sass的优点：

1. 消除样式表冗余
2. 通过变量来复用属性值
3. 使用嵌套来快速写出多层级的选择器
4. 使用混合器来复用一段样式
5. 使用选择器继承来避免重复属性

使用csscss消除冗余
csscss是一个命令行工具，用于查找CSS中的冗余。重构CSS时，这是一个很好的起点。要安装csscss，您需要Ruby的gem安装程序，它类似于Node的npm可执行文件，但是用于Ruby包。OS X预装了Ruby。
如果你已经安装了SASS, gem已经可以使用了。

csscss styles.css –v –-no-match-shorthand

此命令通过使用两个参数来检查styles.css是否存在冗余规则。v参数告诉程序要详细信息并打印出匹配的规则。——no-match-shorthand参数防止程序将任何匹配简写规则(如border-bottom)扩展为更明确的规则(如border-bottom样式)。如果您想扩展这些规则，请删除开关。程序输出将显示多个元素之间的所有冗余样式。如下面列子：

QQ截图20200805105201.png

从上面列子可以看出，3个css样式是共享flex的3个样式规则，那么应该使用多元素选择器合并样式：

.body .main .page ul,header .main .menu ul,header .main .top{
    align-content: center
    display: flex
    flex-direction: row
}

避免@import声明
您可能见过在CSS中使用@import指令。应该避免这种做法，因为样式表中的@import指令下载导入的样式表，增加http请求个数。此行为会导致web页面的总加载时间延迟。

将CSS放置在中
你应该尽可能的把CSS放到标签中，因为标签中的内容会先加载，这样能尽早加载样式文件，渲染样式，这样可以防止用户看到未被渲染完成的站点，这种现象称为Flash of Unstyled Content。出现这种原因是因为浏览器从上到下读取HTML。在读取HTML文档时，浏览器查找对外部资源的引用。由于css加载过慢，html已经构建完成后，而css还没有下载完并渲染。

尽可能使用flexbox
Flexbox是现代浏览器中一个CSS3布局引擎。它简化了元素在页面上的布局。它会自动处理两个轴上的间距、对齐和对齐。它不仅是在页面上布局元素的一种更健壮的方式，而且往往比传统方法执行得更好。

critical CSS
当你的网页特别长时，此时你的网页就无法在viewport上完全显示整个网页，只能显示最顶部的主要网页部分，那么这部分显示出来的页面样式称为critical CSS（关键样式）。所以也没样式就被分为：

• critical CSS：这些样式用于用户可以立即看到的内容，并且需要尽可能快地加载。
• noncritical CSS：这些是用户在开始向下滚动页面时才会看到的内容样式。这个CSS也应该尽快加载，但不要在关键样式之前加载CSS。

区分critical CSS和noncritical CSS的好处：

1. 避免出现Flash of Unstyled Content，即dom解析完毕后css样式文件还没有下载完成并渲染，导致出现也没的无样式空档期。
2. 提升性能

处理critical CSS和noncritical CSS：
将critical CSS内联到HTML的中，以便更快地解析，也就是更快地解析。内联CSS工作得这么好的原因是浏览器不需要等待那么长时间。但也有一个缺点:当以这种方式加载站点的所有CSS时，将失去其可移植性。这一点可以通过后端语言来弥补，比如通过php的file_put_content来加载：

对于noncritical CSS可以通过rel="preload"进行内容预加载：

这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。当CSS完成下载时，标记上的onload事件处理程序将触发。一旦下载，rel属性的值将从preload转换为stylesheet值。

对于critical CSS部分的高度是多少，这是一个问题，因为不同的设备屏幕的的高度不一，那么设置critical CSS的高度就成了问题，值得庆幸的是有一个很棒的网站，在http://mydevice.io/devices上，提供了各种设备的分辨率列表。