移动端性能优化（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