• 技术文章 >web前端 >前端问答

    css优化,提高性能的方法有哪些

    青灯夜游青灯夜游2021-04-02 16:34:18原创108

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

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    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的书写顺序:

    (学习视频分享:css视频教程

    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优化,提高性能的方法有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:div+css是什么 下一篇:css3新增属性有哪些
    第15期线上培训班

    相关文章推荐

    • css怎么实现内容不可选• css怎么设置图片不平铺• 纯CSS如何实现图片轮播• css怎么实现超出两行显示省略• css清除浮动的方法有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网