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 中没有的功能，包括变量、混合器（称为 mixins），以及预编译导出模块功能、嵌套样式规则（它更具可读性，因为它模仿 HTML 层次结构）。 然后，该工具将以预编译器语言编译的文件编译为浏览器可以理解的纯CSS。 流行的预编译器是 LESS() 和 SASS()。 笔者这里推荐sass。 下面列出了 sass 的优点：
删除样式表中的冗余。 使用变量来重用属性值。 使用嵌套快速绘制多级选择器的草图。 使用混合器来重用样式。 使用选择器继承来防止重复的属性。
使用 csscss 清理冗余 csscss 是一个用于查找 CSS 中冗余的命令行工具。 这是构建 CSS 的一个很好的起点。 要安装 csscss，您需要 Ruby 的 gem 安装程序，它类似于 Node 的 npm 可执行文件，用于 Ruby 包。 OSX 预装了 Ruby。 如果您已经安装了 SASS，则 gem 已经可用。
csscss styles.css –v –-no-match-shorthand
此命令使用两个参数检测 styles.css 中是否存在冗余规则。 v 参数告诉程序请求详细信息并复制匹配规则。 --no-match-shorthand 参数可防止程序将任何匹配的缩写规则（例如 border-bottom）扩展为更明确的规则（例如 border-bottom 样式）。 如果您想扩展这些规则css3 图片缓加载，请删除开关。 程序输出将显示多个元素之间的任何冗余样式。 下面的例子：
从示例中可以看出css3 图片缓加载，三种CSS样式共享flex的三种样式规则，因此您应该使用多元素选择器来合并样式：
.body .main .page ul,header .main .menu ul,header .main .top{
align-content: center
display: flex
flex-direction: row
}
防止 @import 声明 您可能已经见过 CSS 中使用的 @import 指令。 应避免这些做法，因为样式表中的 @import 命令会下载导出的样式表并减少 http 请求的数量。 此行为会导致网页整体加载时间延迟。
将CSS放在标签中应该尽可能将CSS放在标签中，因为标签中的内容会首先加载，这样可以尽快加载样式文件并渲染样式。 这可以防止用户听到未渲染的网站。 这种现象称为 FlashofUnstyledContent。 出现这些原因是因为浏览器从上到下读取 HTML。 阅读 HTML 文档时，浏览器会查找对外部资源的引用。 因为css加载太慢，html已经创建好了，但是css还没有下载渲染出来。
尽可能使用 Flexbox Flexbox 是现代浏览器中的 CSS3 布局引擎。 它简化了页面上元素的布局。 它手动处理宽度、对齐和两个轴上的对齐。 它是一种更强大的页面元素布局形式，但通常比传统方式表现更好。
CriticalCSS 当你的网页很长时，你的网页很难在视口中完整地显示整个网页。 只能显示底部的主网页部分。 这部分显示的页面样式称为 CriticalCSS（关键样式）。 ）。 因此，没有样式之分，分为：
区分关键CSS和非关键CSS的好处：
避免UnstyledContent的Flash，即DOM解析完后，CSS样式文件还没有下载渲染，造成无样式的间隙。提高性能
处理关键CSS和非关键CSS：将关键CSS内联到HTML中以促进更快的解析，这意味着更快的解析。 内联 CSS 效果如此出色的原因是浏览器不必等待那么长时间。 但有一个缺点：当网站的所有 CSS 都通过这些方法加载时，它的可移植性就会丢失。 这个可以通过前端语言来填充，比如通过PHP的file_put_content来加载：
对于非关键 CSS，您可以使用 rel="preload" 来预加载内容：
这种机制可以让资源更早地加载和可用，并且不太可能阻塞页面的初始渲染，从而提高性能。 当 CSS 下载完成后，标签上的 onloadstorm 处理程序将触发。 下载后，rel 属性的值将从预加载转换为样式表值。
至于关键CSS部分的高度，这是一个问题。 由于不同设备的屏幕高度不同，所以设置criticalCSS的高度就成了一个问题。 幸运的是，有一个很棒的网站，它提供了各种设备的比特率列表。
