css 层级优化

辰酱czklove
641 阅读6分钟

css 层级优化

样式多复用

  1. 样式继承与复用

样式重复是网页开发难以避免的一个问题，减少重复部分，不仅可以帮我们养成良好的写代码习惯，还可以减少冗余代码，提高网页性能 如我们想写两个按钮，按钮的文字大小，形状，圆角都是一样的，只有颜色是不一样的，如果我们不采用继承复用的方式，那么将是如下的写作方式

<style>
        .greenbtn{
            display: inline-block;
            padding: 5px 10px;
            color: white;
            background-color: green;
            border-radius: 2px;
        }
        .yellowbtn{
            display: inline-block;
            padding: 5px 10px;
            color: white;
            background-color: yellow;
            border-radius: 2px;
        }
    </style>
    
    <div class="dome">
        <span class="greenbtn">绿色按钮</span>
        <span class="yellowbtn">黄色安宁路</span>
    </div>

b084564f39880c4fb2d5e4b6037c07f4.png 如果我们采用继承加组合的方式

.btn{
            display: inline-block;
            padding: 5px 10px;
            color: white;
            border-radius: 2px;
        }
        .green{
            background-color: green;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
    <div class="dome">
        <span class="btn green">绿色按钮</span>
        <span class="btn yellow">黄色安宁路</span>
    </div>

上面可以发现css的代码会少的多，这还只是两个按钮，如果是更多的按钮，那么冗余代码会更多第一种方式,
上下两种写法，但是效果时一样的

b084564f39880c4fb2d5e4b6037c07f4.png 2. 尽量避免同一类名多次渲染

同学A写了一个样式，同学B覆盖了这个样式，同学C又覆盖了该样式，实际上浏览器是先渲染能a样式，然后再渲染成B样式，最终渲染成C样式，这个过程其实是有额外的性能负担的，实际项目中我们可能不能避免这个情况，但可以做到尽量的减少

我们应该将A样式的通用性要写高一些，B和C尽量在A的基础上再补一些样式

  1. 少用高优先级选择器，慎用！important

css选择器的优先级是
!important(1.0.0.0) > 内联 > ID选择器(0.1.0.0) > 类(0.0.1.0) > 标签 | 伪类 | 属性 > 伪对象 > 通配符 * > 继承

  • ！important 优先级过高，重置起来很麻烦
  • 内联样式不好维护，
  • ID选择器 全局唯一 不能继承

css选择器

  1. 伪选择器的妙用
  • ::first-line | 选择首行文本
  • ::first-letter | 选择首字母
  • ::selection | 选择高亮（被选中）的区域
  • :root | 根元素
  • :empty | 仅当元素为空时触发
  • :only-child | 选择仅有的子元素
  • :first-of-type | 选择第一个指定类型的子元素
  • :last-of-type | 选择最后一个指定类型的子元素
  • :nth-of-type() | 选择特定类型的子元素
  • :nth-last-of-type() | 选择列表末尾中指定类型的子元素
  • :link | 选择一个未访问过的超链接
  • :checked | 选择一个选中的复选框
  • :valid | 选择一个通过验证的元素
  • :invalid | 选择一个未通过验证的元素
  • :lang() | 选择指定语言的元素
  • :not() | 对于选择取反（这是一个运算符）
  1. 忌层级过深的css选择器

浏览器对css选择器的解析规则是从右向左，如.nav li p，它会先找到页面中p标签，再往上找，所以前面写在多也起不了什么作用，只会增加查找成本。

    • 通配符

在CSS中，使用 * 代表所有的标签或元素，它叫做通配符选择器。一般在reset.css中使用

之所以不使用*通配符选择器，主要是因为影响网页渲染时间，也就是性能原因,慎用

较少“昂贵”的样式成本

  1. 何为昂贵的样式

css 有些样式之所以昂贵，很大的原因在与这部分样式需要显示的方式较为特别 比较昂贵的样式大致有如下几种

  • 绘制阴影 : box-shadow
  • 绘制渐变 : gradients
  • 滤镜 : filter
  • 透明度 : opacity
  • 弧形边 : opacity
  • 圆角 : border-radius
  1. 减少浏览器的重拍与重绘

在浏览器进行页面渲染的时候，会不停就行重绘和重排，rendering 和 painting，重排是比重绘更加耗费性能的，重绘不一定需要重排，重排必然会导致重绘

1、重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

    1）添加、删除可见的dom

    2）元素的位置改变

    3）元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性）

    4）页面渲染初始化

    5）浏览器窗口尺寸改变

2、重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

减少reflow、repaint，使DOM脱离文档流

1、不要一条一条的修改DOM的样式，可以先定义好css的class，然后修改DOM的className。

2、不要把DOM结点的属性值放在一个循环里当成循环里的变量。

3、为动画的HTML元件适用fixed或absolute的position，那么修改他们的css是不会reflow

3. 便面float滥用

慎用，目前记住一点就行，能不用浮动就不用，可以用display: inline-block 或者弹性盒子替代

css层级其他优化

  1. css Sprite --- 雪碧图

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好

将多张图片合并到一张图片中，可以减小图片的总大小

将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显

雪碧图的制作与使用方法：

使用图像编辑软件如Photoshop将多张图放到同一个图层并导出或使用自动化构建工具自动拼接合并后的图片

引用图片时，图片地址为合并后的图片地址，通过background-position调整背景图的位置，
并通过容器的宽高共同作用，来选出所需的图片

其实现在可以用base64图片代替
在HTTP2中，已经不需要考虑减少请求数，故雪碧图在HTTP2中优化性能的意义已经不大

  1. 充分利用强大的css3

其实主要还是css3动画，通过GPU加速，对动画等方面的影响较为明显 css3里面有很多利用到GPU加速渲染的苏醒，GPU加速可以让动画变得更加流畅，在普遍使用60HZ刷新频率的大环境下，当通过Javascript并不能将所做的时期在16.6ms内完成一个小循环时，GPU可以帮忙减少一分部时间

  1. Media query 媒体查询

media query 主要还是用来和window.resize 对比，在窗口被调整大小时触发，然而window.resize实际上市不断地进行重绘和重排，非常耗性能，有可能导致页面卡死，window.resize我们一般也会配合节流去使用在特定情况下Media query确实是可以代替window.resize。media query与浏览器衔接更加方便，有更利于浏览器内部的优化，对页面性能有一定的提升。

web前端性能优化

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端，欢迎大家来聊，有意向可发送简历到chen_zhen@dahuatech.com 各种福利多、加班少，团队氛围nice

avatar
文章
阅读
粉丝