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

加载性能:

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

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

很多时候选择:margin: top 0 bottom 0;

但 margin-bottom: bottom;margin-left: left;执行的效率更高;

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

选择器性能:

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 容器与样式分离;

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,910评论 1 87
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    poetries阅读 13,298评论 33 442
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 649评论 0 2
  • 清晨打着手电筒看弗洛姆《爱的艺术》之《爱的实践》时提到掌握艺术的一个必要条件是“集中”,其中一个地方是这么表述的“...
    檬言贝语阅读 65评论 1 0
  • 大家或许知道世界上面积最小同时也是最著名的私人国家是怒涛塔公国,这个小不点国位于被英法共同管控的英吉利海峡上,这个...
    c0dee8e2ac17阅读 591评论 0 6