css如何优化并提高性能

小编给大家分享一下css如何优化并提高性能,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

方法:1、压缩css,减少文件体积;2、使用链接引入css文件;3,合理设计css布的局,注意复用样式,减少渲染上花的时间,4,少用“*”选择器;5、慎用浮动、定位等高性能属性;6,尽量减少页面重排,重绘,7日,属性值为0时,不加单位等等。

<强> css优化主要的是4个方面:

<李>

加载性能

主要是从减少文件体积,减少阻塞加载,提高并发方面入手

<李>

选择器性能

<李>

渲染性能

<李>

可维护性,健壮性

下面给大家具体介绍一下。

<强>加载性能:

1, css压缩:将写好的css进行打包压缩,可以减少很多的体积;

2, css单一样式:当需要下边距和左边距的时候,

很多时候选择:<代码>保证金:上0下0;

但<代码> margin-bottom:底部;margin-left:左;执行的效率更高;

3,减少使用@ import,而建议使用链接,因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载;

4,合理设计css布的局,注意复用样式,减少渲染上花的时间. class和ID的选择,少用*这种全局匹配,合理设置基本样式(如设置表{})提高复用。

<强>选择器性能:

css选择符是从右到左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等;

<强> * *避免使用通配规则* *

如*{}计算次数惊人!只对需要用到的元素进行选择

<强> * *尽量少的去对标签进行选择,而是用类* *

如:# nav李{},可以为李加上nav_item的类名,如下选择。nav_item {}

<强> * *不要去用标签限定ID或者类选择符* *

如:ul # nav,应该简化为# nav

<强> * *尽量少的去使用后代选择器,降低选择器的权重值* *

后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素

<强> * *考虑继承* *

了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则

<强>渲染性能:

1,慎重使用高性能属性:浮动、定位;

2,尽量减少页面重排,重绘;

重排按照css的书写顺序:

<李>

位置:正电子,,,z - index,浮动,演示

<李>

大小:宽度、高度,保证金,填充

<李>

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

<李>

背景边框:背景、边界

<李>

其它:anmation,过渡

<李>

重绘:边界轮廓,背景,不必,能使用背景颜色,就尽量不要使用背景;

3,去除空规则:{};

4,属性值为0时,不加单位;

5,属性值为浮动小数0。* *,可以省略小数点之前的0;

6日标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后;

7,不使用@ import前缀,它会影响css的加载速度;

8,充分利用css继承属性,减少代码量;

9日抽象提取公共样式,减少代码量;

10,选择器优化嵌套,尽量避免层级过深;

11、css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用;

12日将css文件放在页面最上面

<强>可维护性,健壮性:

1,将具有相同属性的样式抽离出来,整合并通过类在页面中进行使用,提高css的可维护性;

2,继上一条,允许也是提高css性能的途径之一,通过定义可复用的,语义化良好的基础类,然后添加到html中,这也是很多界面框架都在使用的一种方法,例如:类=癰tn btn-active btn-blue";

3样式与内容分离:讲css代码定义到外部css中;

4,容器与样式分离,

看完了这篇文章,相信你对“css如何优化并提高性能”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

css如何优化并提高性能