两千人站长交流群:462137404 / VIP用户交流群:462197261 收藏本站哈站网 zhan.ha.cn 精品建站资源第一站,让建站变得更加容易!
业务咨询:78895949 联系电话:13402647354
  • 当前位置:
  • CSS性能优化提高css性能的方法

    DIV+CSS教程2018年05月30日关键词:

    不规范的css会导致很多性能问题,这些问题可能在一些小的项目中不够明显,但是在大型项目中就会显现出来。

    css匹配原理

    在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的。

    我们可能会这样写上一行代码

    CSS Code复制内容到剪贴板
    1. //css   
    2. .con .loulan1 p span{ displayblock; }   
    3. //html   
    4. <div class="con">   
    5.     <div class="loulan">   
    6.         <p><span>文字</span></p>   
    7.     </div>   
    8. </div>   

    在这里我们对con类里面的loulan类里的p标签里面的span标签进行样式定义。我说出来都嫌累更别说写起来了,其实你可以把浏览器看作一个人,它渲染起来肯定也会浪费性能。

    而且css的匹配原理不是从左到右的,而是从右到左的,也就是说我们的这行代码里面,先查找到页面里面所有的span元素形成一个集合,再在所有的span元素往上查找,看看有多span的父元素是p元素或者父元素的父元素是p元素或者……慢慢寻找,把父元素不是p元素的删去,再往上查找看集合里的有p元素又多少它的父元素的类是loulan…浏览器说:我好累…

    其实呢浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。并且Firefox 称这种查找方式为 keyselector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的 key 就是 span。人家本来是为了能尽快过滤到一些无关样式规则的,我们这里缺一层套一层,层层不停歇。所以只是想定义一个span的样式在span上加个类岂不是更好。有人这时要说了,那样是需要在每个元素上都加上类吗?那肯定不是必须的,只不过我们要了解浏览器是怎么查找匹配的,然后结合现在的结构来做出一个最好的最方便的写法。

    C/C++ Code复制内容到剪贴板
    1. //css   
    2. .loulanSpan{ display: block; }   
    3. //html   
    4. <div class="con">   
    5.     <div class="loulan">   
    6.         <p><span class="loulanSpan">文字</span></p>   
    7.     </div>   
    8. </div>   

    css选择器权值

    这里说下CSS的 ID Class Tag选择器的权值,也就是他们的优先级,权值越大,优先级越高

    ID:100

    Class:10

    Tag:1

    有了上面两个的基础我们再详细说下应该怎样来优化css提高性能

    1,减少css嵌套,最好不要套三层以上,一般情况下块级元素加上类,里面的内联元素不用加,css写的时候块级class套内联tag,这样不仅可以减少css文件大小,还能减少性能浪费。

    2,不要在ID选择器前面进行嵌套,ID本来就是唯一的而且人家权值那么大,前方嵌套完全是浪费性能。

    3,建立公共样式类,把长段相同样式提取出来作为公共类使用,比如我们常用的清除浮动,单行超出显示省略号等等等,当然如果你使用sass,继承会让你更加方便,同时我是比较提倡使用sass的,之后肯定也会写一篇sass的博客。

    4,缩写css,其中包括缩写maigin,padding,颜色值等等,要是有两个或者两个以上的margin-****,写成margin: * * * *有助于文件大小。

    5,减少通配符*或者类似[hidden="true"]这类选择器的使用,挨个查找所有…这性能能好吗?当然重置样式这些必须的东西是不能少的。

    6,有些人喜欢在类名前面加上标签名:p.ty_p 来进行更加精确的定位,但是这样往往效率更差,类名应该在全局范围除非公用是唯一的,所以这种做法是应该便面的。

    7,巧妙运用css的继承机制,在css中很多属性是可以继承的比如颜色字体等等,父节点定义了,子节点就无需定义。

    8,拆分出公共css文件,对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里,这样一次下载后就放到缓存里,当然这种做法会增加请求,具体做法应以实际情况而定。

    9,不用css表达式,可能大家接触比较少,但是要记住的是无论我们怎么炫酷,到了最后都是静态的,所以表达式只是让你的代码显得更加炫酷,但是他对性能的浪费可能是超乎你的想象的,因为它并不只是计算一次,一些小的事件可能都会增加它为了有效准确而进行计算求值的次数。

    10,少用css rest,可能你会觉得重置样式是规范,但是其实其中有很多的操作是不必要不友好的,有需求有兴趣的朋友可以选择normolize.css

    11,cssSprite,合成所有icon图片,用宽高加上bacgroud-position的背景图方式显现出我们要的icon图,这是一种十分实用的技巧,极大减少了http请求。

    当然我们还需要一些善后工作,CSS压缩(这里提供一个在线压缩 YUI Compressor ,当然你会用其他工具来压缩是十分好的),GZIP压缩,Gzip是一种流行的文件压缩算法,详细做法可以谷歌或者百度。

    以上所述是小编给大家介绍的CSS性能优化提高css性能的方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    其他网友正在看:
    CSS margin全面了解

    一、margin可以为负值在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM结构的流体布局。此demo与CSS f···

    2018-05-30关键词:

    css小技巧汇总

    1、去除input记住密码后自动填充表单的黄色背景input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }//其中#fff是背景颜色值2、IE8不支持opacity:0属性,可以加上下面属性:filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);3、IE···

    2018-05-30关键词:

    浅谈css之属性及剩余的选择符

    今天的课程加速了,比平时快了些,但觉得很不错。nice~属性选择符E[att]       选择具有att属性的E元素。XML/HTML Code复制内容到剪贴板input[type]{color: #red;}<input type="radio">  E[att=···

    2018-05-30关键词:

    IE8的css hack \9 使用说明

    首先感谢“丸子”提供的这个IE8的css hack; 关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack: .test{ color:#000000; /* FF,OP支持 */ color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和&l···

    2018-05-30关键词:

    css解决display:inline-block;产生的缝隙(间隙)的方法

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量,因为卡片的个数不固···

    2018-05-30关键词:

    详解css常用选择器

    导入外部css样式表的方法使用link标签导入外部css样式表<link rel="stylesheet" href="css/demo01.css">在样式表中import(导入)外部样式表@import url("/crazy-html5/06css/css/demo01.css");使用内部样式表内部样式表只能作用···

    2018-05-30关键词: