CSS 渲染性能优化
-
很多人往往不重视性能优化这一块，觉得功能做出来就行了；在软件开发过程中，功能确实是优先要考虑的，但是当功能完善后，接下来就需要考虑性能问题了；
-
可以从两个方面来看性能优化的意义：
- 用户角度：网站优化能够让页面加载得更快，响应更加及时，极大提升用户体验；
- 服务商角度：优化会减少页面资源请求数，减小请求资源所占带宽大小，从而节省可观的带宽资源；
-
网站优化的目标就是减少网站加载时间，提高响应速度；
![]( "性能优化和用户的关系")
-
一个好的交互效果可能是这样的：
![]( "好的交互效果")
CSS 常见性能优化
使用 id selector
/* Bad */
p#id1 {
color: red;
}
/* Good */
#id1 {
color: red;
}
避免深层次的 node
/* Bad */
div>div>div>p {
color: red;
}
/* Good */
p-class {
color: red;
}
不要使用 attribute selector
/* Bad */
p[id="jartto"] {
color: red;
}
p[class="blog"] {
color: red;
}
/* Good */
#jartto {
color: red;
}
.blog {
color: red;
}
渐进增强的书写方式
/* 通常将浏览器前缀置于前面，将标准样式属性置于最后 */
.foo {
-moz-border-radius: 5px;
border-radius : 5px;
}
遵守 CSSLint 规则
| 规则 | 描述 |
|---|---|
| font-faces | 不能使用超过 5 个 web 字体 |
| import | 禁止使用 @import |
| regex-selectors | 禁止使用属性选择器中的正则表达式选择器 |
| universal-selector | 禁止使用通用选择器 * |
| unqualified-attributes | 禁止使用不规范的属性选择器 |
| zero-units | 0 后面不要加单位 |
| overqualified-elements | 使用相邻选择器时，不要使用不必要的选择器 |
| shorthand | 简写样式属性 |
| duplicate-background-images | 相同的 url 在样式表中不超过一次 |
| … |
不要使用 @import
使用 @import 引入 CSS 会影响浏览器的并行下载；使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载、解析之后，浏览器才会知道还有另外一个 CSS 需要下载，这时才去下载，然后下载后开始解析、构建 Render Tree 等一系列操作；
多个 @import 会导致下载顺序紊乱；在 IE 中 @import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 JS 文件先于 @import 下载，并且打乱甚至破坏 @import 自身的并行下载；
避免过分重排 Reflow
所谓重排就是浏览器重新计算布局位置与大小；
| 常见重排元素 |
|---|
| width、min-width |
| height、min-height、line-height |
| padding |
| margin |
| display |
| border、border-width |
| position、top、left、right、bottom |
| font-weight、font-size、font-family |
| float |
| text-align、vertical-align |
| overflow、overflow-y |
| clear |
| white-space |
依赖继承
如果某些属性可以继承，那么自然没有必要在写一遍；
面试题
总结一下如何提升或者优化 CSS 的渲染性能
CSS 渲染性能的优化来自方方面面，这里列举一些常见的方式：
- 使用 id 选择器非常高效，因为 id 是唯一的
- 避免深层次的选择器嵌套
- 尽量避免使用属性选择器，因为匹配速度慢
- 使用渐进增强的方案
- 遵守 CSSLint 规则
- 不要使用 @import
- 避免过分重排 Reflow
- 依赖继承
- 值缩写
- 避免耗性能的属性
- 背景图优化合并（http2.0 无需使用雪碧图）
- 文件压缩
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级✍️ 渐进式渲染
上一篇
评论
