CSS系列（15）-- 性能优化详解

前端技术探索系列：CSS 性能优化详解 ⚡

致读者：探索 CSS 性能的极限 👋

前端开发者们，

今天我们将深入探讨 CSS 性能优化，学习如何创建高性能的样式表。

选择器优化 🚀

选择器性能

/* 避免使用 */
div * {
    } /* 通配符选择器 */
.box div span {
    } /* 过长的选择器链 */
.box > div > span {
    } /* 过多的层级 */

/* 推荐使用 */
.box-span {
    } /* 直接类名 */
.box > .content {
    } /* 简单的关系选择器 */
[class^="icon-"] {
    } /* 有效的属性选择器 */

/* 选择器优化 */
.nav-item {
    } /* 扁平化选择器 */
.btn--primary {
    } /* BEM 命名 */

渲染性能 🎯

重排(Reflow)优化

/* 避免频繁触发重排 */
.bad-practice {
   
    /* 这些属性会触发重排 */
    width: 100px;
    height: 100px;
    margin: 10px;
    position: absolute;
}

/* 使用 transform 替代 */
.good-practice {
   
    transform: translate(10px, 10px);
}

/* 批量修改样式 */
.element {
   
    /* 使用 CSS 类统一修改 */
    &.active {
   
        transform: scale(1.1);
        opacity: 1;
    }
}

重绘(Repaint)优化

/* 避免不必要的重绘 */
.element {
   
    /* 使用对性能友好的属性 */
    transform: translateZ(0);
    will-change: transform;
    
    /* 组合多个视觉效果 */
    transition: transform 0.3s, opacity 0.3s;
}

加载优化 💫

CSS 文件优化

/* 关键 CSS 内联 */
<style>
    /* 首屏关键样式 */
    .header {
   
        /* 样式... */
    }
&