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

2020-03-17 16:01:01来源:博客园 阅读 ()

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

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

 


原文链接:https://www.cnblogs.com/chenyingying0/p/12510986.html
如有疑问请与原作者联系

标签:定义选择性能Classmargin标签

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS核心概念之盒子模型

下一篇:准备转行web前端,该怎么从头学好?