在一篇文章中，我们介绍了性能优化的重要性，总结了JS的几种JS优化方法和方法。今天，我们将从CSS的角度来讨论前端优化
在性能优化中，有一个重要的指标-一个有意义的绘制（FMP），它指的是页面的主要内容出现在屏幕上的时间。这个指标影响用户在看到页面之前需要等待的时间，这可以通过内联关键CSS来减少
减小文件大小，压缩代码，使用代码压缩工具压缩代码，删除多余的空格和换行符以及其他冗余部分
CSS异步加载要立即使用的文件，并将它们加载到页眉中。其他模块的CSS可以在页面呈现后通过loadcss和preload异步加载
DNS预取预解析将DNS预取属性添加到页面，以通知浏览器预解析指定的域名。经过预解析后，用户访问相应域名不会有任何延迟，从而加快了加载速度
硬件加速通过GPU渲染使动画更加平滑。过程说明：-小心使用硬件加速。虽然改进是显而易见的，但它也对内存产生了巨大的影响——GPU渲染会影响字体的抗锯齿效果，并且文本会变得模糊
动画效果要优先使用变换，优先选择变换，尽量不要使用高、宽、边、填充，因为与其他属性相比，变换可以直接减少主线的计算量
图像压缩图像延迟加载，因为页面可以同时发送到后台的请求数量有限制（通常，浏览器有4到8个请求，ie67有2个请求）。因此，如果页面上有许多资源需要请求，页面加载时间将变得非常长。该资源可以根据资源的活动位置实时加载
在加载图像预加载页面时，首先加载部分内容（通常是一个屏幕内容），然后在加载先加载的部分内容（通常是一个屏幕内容）之后再加载其他内容
当重画元素的外观发生变化时，避免页面重绘。在网站的使用中，重绘是不可避免的。但是，浏览器通过将多个重新排列和重画合并到一个执行中来优化这一点。虽然浏览器已经做了相应的优化，但要尽量避免重画，可以使页面更加流畅
减少一些属性的使用。当浏览器绘制屏幕时，所有需要浏览器操作或计算的属性都将花费更多。重新绘制页面时，会降低浏览器的渲染性能。因此，在编写CSS时，如果有替代方案，应该尽量减少box shadow/border radius/filter/transparency/：nth child等属性的使用，这样当浏览器绘制或重画时，浏览器会有更好的渲染效果
减少重新排列会导致浏览器重新计算整个文档并重建渲染树，这会降低浏览器的渲染速度。如下所示，有很多操作会触发重新排序，我们应该避免频繁触发它们
触发重新排列的属性：宽度、高度、填充、边距、显示、边框宽度、位置上、左、右、下、字体大小、浮动、文本对齐flow-y、字体粗细、溢出、字体系列高度、垂直对齐、清除、空白、小高度
注意使用特殊的CSS样式。将样式表放在页面顶部以删除多余和无用的CSS。可以统一设置重复样式，以避免重复设置CSS属性，这些属性可以在引用中统一设置
正确使用display属性显示：行内宽度，高度、边距、填充和浮动不得在之后使用；
显示：内联块浮点不应在之后使用；
显示：块垂直align之后不应使用；
显示：表格-*保证金或浮动不应在之后使用
小心使用浮动，避免使用复杂的选择器。使用不超过三个层次结构。通过CSS继承属性来减少代码量。可以从父元素继承到子元素的属性（如颜色、字体大小等）不需要重复设置
选择器的使用-保持简单，不要使用太嵌套和太复杂的选择器。
-避免了选择器和通配符的有效和有效的使用。
-不要使用类选择器和ID选择器来装饰元素标记，例如H3?降价内容。如果你这样做，你也会降低效率。
服务器压缩使用工具规范CSS代码编写规范精心选择高消耗样式，高消耗属性在渲染前需要大量计算：框阴影、边界半径、透明度变换、cssfilter（性能杀手）