移动端性能优化（CSS性能优化）

逃跑的火焰

CSS性能优化

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

[HTML] 纯文本查看 复制代码

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

        }

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

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

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

[HTML] 纯文本查看 复制代码

/*保持简单，不要使用嵌套过多过于复杂的选择器*/
        /*浏览器从右向左解析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;

        }

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

[HTML] 纯文本查看 复制代码

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

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

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

/*避免类正则的属性选择器*/

        [class*="slider-indicator"] {

        }

        [class~="slider-indicator"] {

            /*空格分隔*/

        }

        [class^="slider-indicator"] {

            

        }

        [class$="slider-indicator"] {

            

        }

css属性优化：

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

而且方便统一修改

[HTML] 纯文本查看 复制代码

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

合并一些可以合并的元素

上右下左

适当使用简写

[HTML] 纯文本查看 复制代码

/*合写*/
        .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