方法：1 .压缩css以减小文件大小；2.利用link引入css文件；3.合理设计CSS布局，注意重用样式，减少渲染时间；4.较少使用“*”选择器；5.谨慎使用浮动、定位等高性能属性；6.尽量减少页面重排和重绘；7.当属性值为0时，不添加单元，等等。

本教程操作环境：windows7系统，CSS3HTML5第5版，戴尔G3电脑。

CSS优化有四个主要方面：

(资料图片仅供参考)

装载性能

主要是从减小文件大小、减少阻塞加载、提高并发性等方面。

选择器性能

渲染性能

可维护性和健壮性

给大家详细介绍一下。

装载性能：

1.css压缩：将写好的css打包压缩，可以减少很多体积；

2.css single style:需要下边距和左边距时，

很多时候选择：margin:顶0底0；

但保证金-底：底；margin-left:左；实施的效率更高；

3.减少@import的使用，建议使用link，因为后者是在页面加载时一起加载的，而前者是在页面加载后加载的；

4.合理设计CSS布局，注意重用样式，减少渲染时间。类和ID选择，少*的全局匹配，合理设置基本样式(如设置表{})提高重用。

选择器性能：

CSS选择器从右到左匹配。当使用后代选择器时，浏览器将遍历所有子元素以确定它们是否是指定的元素等等。

* *避免使用通用规则* *

如* {}计算数量惊人！仅选择需要使用的元素。

**选择尽可能少的标签，但使用类别* *

比如#nav li{}，可以把nav_item的类名加到li上，选择。nav_item{}如下

* *不要使用标签来限定ID或类选择器* *

例如，ul#nav应简化为#nav

* *尽可能少使用后代选择器，并减轻选择器的重量* *

后代选择器的成本最高。尽量减少选择器的深度，不要超过三层，使用更多的类来关联每个标签元素。

* *考虑继承* *

了解哪些属性可以被继承，然后避免为这些属性重复指定规则。

渲染性能：

1.谨慎使用高性能属性：浮动和定位；

2.尽量减少页面重排和重绘；

重新排列css的书写顺序：

位置：位置、顶部、左侧、z向索引、浮动、显示

尺寸：宽度、高度、边距、填充

文本系列：字体、行高、颜色、字母间距

背景：背景，边框

其他：模拟、过渡

重绘：边框、轮廓、背景、框阴影。如果可以使用背景色，尽量不要使用背景；

(学习视频分享：css视频教程)

3.删除空规则：{ }；

4.属性值为0时，不添加单位；

5.属性值是浮点十进制0。**，小数点前的0可以省略；

6.规范各种浏览器前缀：有浏览器前缀的先来。属性在后面；

7.不要使用@import前缀，这样会影响css的加载速度；

8.充分利用css继承属性，减少代码量；

9.抽象提取公共样式，减少代码量；

10.优化选择器的嵌套，尽量避免层次太深；

11.css Sprite图，同一个页面相似部分的小图标，使用方便，减少了页面请求的数量，但同时图片本身也会变大。使用时，考虑清楚利弊再用；

12.将css文件放在页面的顶部。

可维护性和鲁棒性：

1.将属性相同的样式拉出来，通过类集成在页面中使用，提高css的可维护性；

2.继上一个之后，oocss也是提高css性能的方法之一。通过定义可复用的、有语义的基本类，然后添加到html中，这也是很多ui框架使用的方法，比如：class=" BTN BTN-active BTN-blue "；

3.样式和内容分离：css代码被定义到外部css中；

4.容器与风格的分离；

有关编程的更多信息，请访问：编程视频！以上是css优化和性能提升方法的细节。请多关注php中文网站的其他相关文章！

来源：php中文网站

关键词：