移動端性能優化（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.uj5u.com/qiye/60275.html

標籤：Html/Css

上一篇：前端命名規范

下一篇：移動端適配-動態計算rem