一文大白话讲清楚CSS性能优化

文章目录

  • 一文大白话讲清楚CSS性能优化
  • 1.讲性能优化肯定得先说清楚要什么性能,才能知道怎么优化
  • 2.优化方向之一:快速地编写
    • [2.1 使用预编译语言](#2.1 使用预编译语言)
    • [2.2 适用速记属性](#2.2 适用速记属性)
    • [2.3 使用CSS原生变量](#2.3 使用CSS原生变量)
    • [2.4 其他](#2.4 其他)
  • [3. 优化方向之二:快速的运行](#3. 优化方向之二:快速的运行)
    • [3.1 快速运行的前提是快速的加载](#3.1 快速运行的前提是快速的加载)
      • [3.1.1 要想加载快,那首先CSS文件体积小肯定很重要](#3.1.1 要想加载快,那首先CSS文件体积小肯定很重要)
      • [3.1.2 尽量避免使用import](#3.1.2 尽量避免使用import)
      • [3.1.3 首屏使用内联CSS](#3.1.3 首屏使用内联CSS)
      • [3.1.4 异步加载CSS](#3.1.4 异步加载CSS)
    • [3.2 想要运行快,高耗时耗性能的事少干](#3.2 想要运行快,高耗时耗性能的事少干)
      • [3.2.1 减少回流和重绘](#3.2.1 减少回流和重绘)
      • [3.2.2 合理使用选择器](#3.2.2 合理使用选择器)
      • [3.2.3 减少使用昂贵属性](#3.2.3 减少使用昂贵属性)
      • [3.2.4 优化媒体查询](#3.2.4 优化媒体查询)
    • [3.3 其他](#3.3 其他)
  • [4. 优化方向三:快速地维护](#4. 优化方向三:快速地维护)
    • [4.1 基础是能快速看懂](#4.1 基础是能快速看懂)
    • [4.2 关键是二开要高效](#4.2 关键是二开要高效)

一文大白话讲清楚CSS性能优化

1.讲性能优化肯定得先说清楚要什么性能,才能知道怎么优化

  • 我们CSS要什么性能,三句话概括
  1. 快速地编写
  • 不写重复无用的代码,提高代码的可复用性
  1. 快速地运行
  • 快速地加载,快速地运行
  1. 快速地维护
  • 阅读顺畅,二开高效
  • 当然有时候要在三个快之间做平衡,不是哪个越快整体越好,而是三者之间寻找一个平衡的点,既快又好的效果

2.优化方向之一:快速地编写

2.1 使用预编译语言

2.2 适用速记属性

  • 如果设置margin的四个属性,可以直接margin:上 右 下 左;不需要margin-top;margin-right;margin-left;margin-bottom这样一个一个设置

2.3 使用CSS原生变量

  • 我们可以使用CSS原生变量,提高代码的复用性,进而提高代码编写速度

2.4 其他

3. 优化方向之二:快速的运行

3.1 快速运行的前提是快速的加载

3.1.1 要想加载快,那首先CSS文件体积小肯定很重要

  1. 删除无用的代码
  2. 使用css压缩工具压缩CSS代码
  3. 使用css Sprite
  4. 其他

3.1.2 尽量避免使用import

  • import会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,而且多个import有可能会导致下载顺序错乱

3.1.3 首屏使用内联CSS

  • 为了使首屏更快的呈现给用户,可以使用内联css,提前css渲染时间

3.1.4 异步加载CSS

  • 可以使用异步加载css

3.2 想要运行快,高耗时耗性能的事少干

3.2.1 减少回流和重绘

3.2.2 合理使用选择器

  • CSS的匹配规则是从右往左,譬如#title .div h2匹配的时候,先找到h2;然后去除上一层不是.div的元素;然后再往上去除不是#title的元素。如果嵌套的层级太多,匹配花费的事件会很大

3.2.3 减少使用昂贵属性

  • 在页面重绘时,向box-shadow / border-radius / filter / opacity 等昂贵属性会降低浏览器的渲染能力

3.2.4 优化媒体查询

  • 媒体查询的预设可以更高效的适配不同的设备

3.3 其他

4. 优化方向三:快速地维护

4.1 基础是能快速看懂

  1. 设计良好的CSS结构
  2. 编写良好的注释代码
  3. 合理的使用预编译语言

4.2 关键是二开要高效

  • 二开要高效,就是要快速的更改所有需要更改的代码,所以问题还是回到了提高代码的复用性上,可以使用变量,预编译语言等,提高二开效率
相关推荐
Boilermaker199210 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子21 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102436 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
哎呦薇1 小时前
一篇文章说明白web前端性能优化
性能优化
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart