移动端性能优化（CSS性能优化），分享

CSS性能优化

CSS选择器优化

如果可以直接选中元素，不需要加一些多余的修饰

        /*不要使用类选择器和ID选择器修饰元素标签，这样多此一举，还会降低效率。*/         div#slider.slider {          }

一般来说，class用于样式，id用于js，因为id定义的样式不利于复用

保证不会误选的情况下，尽量保持简单

避免冲突可以在命名时区分好

        /*保持简单，不要使用嵌套过多过于复杂的选择器*/         /*浏览器从右向左解析CSS*/         /*.slider .slider-item-container .slider-item .slider-link .slider-img {             width: 100%;         }*/         .alex-slider-img {             /*嵌套少*/             /*权重低 便于使用的时候覆盖*/             width: 100%;         }

尽量少用通配符选择器，可以单独写出来，罗列出来

        /*避免通配选择器*/         * {          }         ul, li, dl, dt, dd, p {             padding: 0;             margin: 0;         }

不必要的样式和没有用到的样式直接删除即可

        /*移除无匹配的样式*/         .slider {             /*width: 100%;*/         }

高级选择器少用（类似正则的），还有属性选择器，性能并不高

但是必须的情况下可少量使用

        /*避免类正则的属性选择器*/         [class*="slider-indicator"] {          }         [class~="slider-indicator"] {             /*空格分隔*/         }         [class^="slider-indicator"] {                      }         [class$="slider-indicator"] {                      }

css属性优化：

不同类里存在相同样式可以提取出来一起写，减少冗余

而且方便统一修改

        /*提取公用部分*/         .slider,         .slider-item-container {             width: 100%;             height: 100%;         }

合并一些可以合并的元素

上右下左

适当使用简写

        /*合写*/         .slider {             margin-top: 10px;             margin-bottom: 10px;             margin-right: 20px;             margin-left: 20px;              margin: 10px 20px 10px 20px;             margin: 10px 20px;             margin: 10px 20px 10px;              background-color: #fff;              font-size: 12px;             font: ;         }

其他优化：

不建议使用CSS @import引用加载CSS（scss里没关系）

做动画时优先使用css3动画，其次再考虑js动画

移动端优先考虑flex布局，少用float

—-想了解更多的css相关样式处理怎么解决关注<计算机技术网(www.ctvol.com)!!>