移动端性能优化(CSS性能优化)

网站长刘江 2020-03-18 85浏览 0评论

CSS性能优化

 

CSS选择器优化

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

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

        }

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

 

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

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

复制代码 移动端性能优化(CSS性能优化) 网站百科 第1张
        /*保持简单,不要使用嵌套过多过于复杂的选择器*/
        /*浏览器从右向左解析CSS*/
        /*.slider .slider-item-container .slider-item .slider-link .slider-img {
            width: 100%;
        }*/
        .alex-slider-img {            /*嵌套少*/
            /*权重低 便于使用的时候覆盖*/
            width: 100%;
        }
复制代码 移动端性能优化(CSS性能优化) 网站百科 第2张

 

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

复制代码 移动端性能优化(CSS性能优化) 网站百科 第3张
        /*避免通配选择器*/
        * {

        }
        ul, li, dl, dt, dd, p {
            padding: 0;
            margin: 0;
        }
复制代码 移动端性能优化(CSS性能优化) 网站百科 第4张

 

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

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

 

高级选择器少用(类似正则的),还有属性选择器,性能并不高

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

复制代码 移动端性能优化(CSS性能优化) 网站百科 第5张
        /*避免类正则的属性选择器*/
        [class*="slider-indicator"] {

        }
        [class~="slider-indicator"] {            /*空格分隔*/
        }
        [class^="slider-indicator"] {
            
        }
        [class$="slider-indicator"] {
            
        }
复制代码 移动端性能优化(CSS性能优化) 网站百科 第6张

 

css属性优化:

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

而且方便统一修改

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

 

合并一些可以合并的元素

上右下左

适当使用简写

复制代码 移动端性能优化(CSS性能优化) 网站百科 第7张
        /*合写*/
        .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性能优化) 网站百科 第8张

 

其他优化:

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

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

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

作者:

陈莺莺呀


发表评论