13518219792
小编给大家分享一下css如何优化并提高性能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
成都创新互联是一家专业提供高邑企业网站建设,专注与成都网站设计、做网站、H5高端网站建设、小程序制作等业务。10年已为高邑众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
方法：1、压缩css，减少文件体积；2、使用link引入css文件；3、合理设计CSS布局，注意复用样式，减少渲染上花的时间；4、少用“*”选择器；5、慎用浮动、定位等高性能属性；6、尽量减少页面重排、重绘；7、属性值为0时，不加单位等等。
CSS优化主要是4个方面：
加载性能
主要是从减少文件体积，减少阻塞加载，提高并发方面入手
选择器性能
渲染性能
可维护性、健壮性
下面给大家具体介绍一下。
加载性能：
1、css压缩：将写好的css进行打包压缩，可以减少很多的体积；
2、css单一样式：当需要下边距和左边距的时候，
很多时候选择：margin: top 0 bottom 0;
但 margin-bottom: bottom;margin-left: left;执行的效率更高；
3、减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载；
4、合理设计CSS 布局，注意复用样式，减少渲染上花的时间。class和ID的选择，少用*这种全局匹配，合理设置基本样式（如设置table{}）提高复用。
选择器性能：
CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
**避免使用通配规则**
如*{} 计算次数惊人！只对需要用到的元素进行选择
**尽量少的去对标签进行选择，而是用class**
如：#nav li{},可以为li加上nav_item的类名，如下选择.nav_item{}
**不要去用标签限定ID或者类选择符**
如：ul#nav,应该简化为#nav
**尽量少的去使用后代选择器，降低选择器的权重值**
后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素
**考虑继承**
了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则
渲染性能：
1、慎重使用高性能属性：浮动、定位；
2、尽量减少页面重排、重绘；
重排按照css的书写顺序：
位置：positon、top、left、z-index、float、dispay
大小：width、height、margin、padding
文字系列： font、line-height、color、letter-spacing
背景边框：background、 border
其它：anmation、transition
重绘：border、outline、background、box-shadow，能使用background-color，就尽量不要使用background;
3、去除空规则：｛｝；
4、属性值为0时，不加单位；
5、属性值为浮动小数0.**，可以省略小数点之前的0；
6、标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后；
7、不使用@import前缀，它会影响css的加载速度；
8、充分利用css继承属性，减少代码量；
9、抽象提取公共样式，减少代码量；
10、选择器优化嵌套，尽量避免层级过深；
11、css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用;
12、将css文件放在页面最上面
可维护性、健壮性：
1、将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用,提高css的可维护性；
2、继上一条，oocss也是提高css性能的途径之一，通过定义可复用的、语义化良好的基础类，然后添加到html中，这也是很多ui框架都在使用的一种方法，例如：class="btn btn-active btn-blue"；
3、样式与内容分离：讲css代码定义到外部css中；
4、容器与样式分离；
看完了这篇文章，相信你对“css如何优化并提高性能”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
