CSS学习（15）CSS渲染性能优化

走马Ricardo
123 阅读5分钟

screenshot-20240715-173531.png

前言

  • 总结一下如何提升或优化CSS的渲染性能

CSS渲染性能优化

我们可以从两个方面来看性能优化的意义：

  • 用户角度 网站优化能够让页面加载得更快，响应更加及时，极大提升用户体验。

  • 服务商角度 优化会减少页面资源请求数，减小请求资源所占带宽大小，从而节省可观的带宽资源。

网站优化的目标就是减少网站加载时间，提高响应速度。

那么网站加载速度和用户体验又有着怎样的关系呢？我们来看下面这张图：

Google和亚马逊的研究表明，Google页面加载的时间从0.4秒提升到0.9秒导致丢失了20%流量和广告收入，对于亚马逊，页面加载时间每增加100ms就意味着1%的销售额损失。

当然，性能优化是来自方方面面的。

这里我们主要来看CSS方面能够进行哪些性能优化。

  1. 使用id选择器

在使用 id selector 的时候需要注意一点：因为 id 是唯一的，所以不需要既指定 id 又指定 tagName：

/* 不推荐 */
p#app {
  color: red;
}

/* 推荐 */
#app {
  color: red;
}
  1. 避免深层次的 node
/* 不推荐 */
ul li a {
  color: red;
}

/* 推荐 */
a {
  color: red;
}
  1. 不使用属性选择器

如：p[att1=”val1”]。这样的匹配非常慢。更不要这样写：p[id="id1"]。这样将 id selector 退化成 attribute selector。

/* 不推荐 */
input[type="text"] {
  color: red;
}

/* 推荐 */
input {
  color: red;
}
  1. 通常将浏览器前缀置于前面，将标准样式属性置于最后
/* 不推荐 */
div {
  -webkit-transition: all 2s;
  transition: all 2s;
  transition: all 2s;
  -webkit-transition: all 2s;
}

/* 推荐 */
div {
  -webkit-transition: all 2s;
  transition: all 2s;
}
  1. 遵守 CSSLint 规则
font-faces        　　　　  　　　不能使用超过5个web字体
import        　　　　　　　 　　  禁止使用@import
regex-selectors        　　　　  禁止使用属性选择器中的正则表达式选择器
universal-selector    　　 　　  禁止使用通用选择器*
unqualified-attributes    　　　禁止使用不规范的属性选择器
zero-units            　　 　　　0后面不要加单位
overqualified-elements    　　　使用相邻选择器时，不要使用不必要的选择器
shorthand        　　　　　　　　 简写样式属性
duplicate-background-images    相同的url在样式表中不超过一次

更多的 CSSLint 规则可以参阅：github.com/CSSLint/css…

  1. 不要使用 @import

使用 @import 引入 CSS 会影响浏览器的并行下载。使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载、解析之后，浏览器才会知道还有另外一个 CSS 需要下载，这时才去下载，然后下载后开始解析、构建 Render Tree 等一系列操作。

多个 @import 会导致下载顺序紊乱。在 IE 中，@import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 JS 文件先于 @import 下载，并且打乱甚至破坏 @import 自身的并行下载。

  1. 避免过分重排（Reflow）

重排是指浏览器根据DOM结构和CSS样式计算元素的几何属性（如位置、大小等），过多的重排会影响渲染性能。应尽量避免频繁改变元素的样式或布局，可以通过批量修改样式、使用 CSS3 动画等方式来减少重排。

常见的重排元素：

width 
height 
padding 
margin 
display 
border-width 
border 
top 
position 
font-size 
float 
text-align 
overflow-y 
font-weight 
overflow 
left 
font-family 
line-height 
vertical-align 
right 
clear 
white-space 
bottom 
min-height
  1. 依赖继承

CSS中的继承可以减少对特定元素的样式定义，从而减少渲染时间。可以利用继承来减少对子元素的样式定义，让样式在DOM树中向下传递。

/* 利用继承减少样式定义 */
.parent {
  color: red;
}
.child {
  /* 子元素继承父元素的颜色 */
}

/* 不使用继承，直接定义子元素的样式 */
.parent {
  /* ... */
}
.child {
  color: red;
}
  1. 值缩写

使用值缩写可以减少CSS代码量，并且可以提高解析速度。例如，将margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;改为margin: 10px 20px;。

这样可以减少代码量，提高解析速度。

  1. 避免耗性能的属性

一些CSS属性对于浏览器来说是比较昂贵的操作，会影响渲染性能。如果不是必要的话，应尽量避免使用这些属性。

例如，box-shadow和border-radius都是比较耗性能的属性。

  1. 背景图优化合并

将多个小背景图合并为一个大背景图可以减少请求次数和文件大小，提高加载速度。可以使用CSS的background-position来定位合并后的背景图。

/* 不优化合并的背景图 */
.box1 {
   background-image: url('image1.jpg');
   /* ... */
}

.box2 {
   background-image: url('image2.jpg');
   /* ... */
}

/* 优化合并的背景图 */
.box {
   background-image: url('combined.jpg');
   /* ... */
}

/* 定位合并后的背景图 */
.box1 {
   background-position: 0 0;
}

.box2 {
   background-position: -100px 0;
}
  1. 文件压缩

将多个CSS文件合并为一个文件，并进行压缩可以减少请求次数和文件大小，提高加载速度。可以使用工具如CSS压缩器来压缩CSS文件。

/* 不进行文件压缩和合并 */
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">

/* 进行文件压缩和合并 */
<link rel="stylesheet" href="combined.min.css">

总结

  • 总结一下如何提升或优化CSS的渲染性能

CSS渲染性能的优化来自方方面面，这里列举一些常见的方式：

  1. 使用id选择器

  2. 避免深层次的 node

  3. 不使用属性选择器

  4. 通常将浏览器前缀置于前面，将标准样式属性置于最后

  5. 遵守 CSSLint 规则

  6. 不要使用 @import

  7. 避免过分重排（Reflow）

  8. 依赖继承

  9. 值缩写

  10. 避免耗性能的属性

  11. 背景图优化合并

  12. 文件压缩

这些方式可以帮助我们提高CSS的渲染性能，从而提升用户体验。

avatar
文章
阅读
粉丝