前端优化-CSS篇

我们知道在前端开发中，HTML和CSS代码的可读性和可扩展性是非常重要的，在保证两者的前提下，提高代码的解析速度，能让我们的代码更加的优化。

1、css选择器代码优化

使用原则
(1)避免使用通配符通配符表示在页面加载的时候用来匹配所有的元素，尽量避免使用通配符，加重页面负担。
(2)避免使用标签选择器
(3)尽量不要在选择器中定义多层级，增加查找负担
高效选择
css选择器在匹配中历了那些步骤?首先css选择器的匹配原理是从右向左，然后一步步向左匹配到对应元素，左侧的选择器越精准，匹配效率越高
代码量优化
(1)合并相关CSS

.box{     
        padding-left:2px;    
        padding-right:2px;   
         padding-top:3px;    
         padding-bottom:3px;
         }
         //改为
 .box{    
           padding:3px 2px  ;
          }

(2)合并相同的css定义
(3)定义简洁的css规则

2、性能优化

性能优化中有一个重要的指标，指页面的首要内容，而这一指标影响用户看到页面所需要等待的时间，CSS优化能减少这一时间
(1)CSS异步加载将马上要用到的文件，放在页面头部加载。其他模块的CSS可以使用loadCSS 和 Preload待页面渲染完后异步加载
(2)对代码进行压缩使用代码压缩工具，去掉多余的空格和换行
(3)减少阻塞加载不使用@import加载，这会影响CSS的加载速度
(4)优先使用transition做动画效果相交于其他属性transfrom可以直接减少主线程的计算量
(5)图片懒加载客户端向服务器发送的请求是有限的(一般4-8,IE67 2)如果页面上有有很多的请求就会导致页面的加载时间很长。懒加载就能缓解此问题，通过监听页面滑动的位置实时监听，并根据页面的位置请求资源
(6)避免重绘，减少重排元素的外观改变时，会触发页面重绘，浏览器对此做出了优化，但我们也应该尽量的避免，使页面更加流畅重排会导致浏览器重新计算整个文档，重新构建渲染树，这会大大的降低浏览器的渲染速度，避免重排，我们应避免操作如下属性:width,height,padding,margin,display,float,position,top,left,bottom,font-size,overflow等。

3、格式优化

(1)除去多余无用的css
(2)将样式表放在顶部
(3)正确使用display属性
(4)慎用浮动
(5)避免使用复杂的选择器，层级最好不超过三层