21. CSS 优化和提高性能的方法有哪些？

加载性能

css 压缩, 将写好的 css 进行打包压缩, 可以减小文件体积
css 单一样式, 当需要下边距和左边距的时候, 很多时候会选择使用 margin: top 0 bottom 0; 但 margin-bottom: bottom; margin-left: left; 执行效率会更高
减少使用 @import, 建议使用 link, 因为后者在页面加载时一起加载, 前者是等待页面加载完成之后再进行加载

选择器性能

关键选择器(key selector)。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候, 浏览器会遍历所有子元素来确定是否是指定的元素等等
如果规则拥有ID选择器作为其关键选择器, 则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)
避免使用通配规则, 如 *{} 计算次数惊人, 只对需要用到的元素进行选择
尽量少地去对标签进行选择, 而是用 class
尽量少地去使用后代选择器, 降低选择器的权重值。后代选择器的开销是最高的, 尽量将选择器的深度降到最低, 最高不要超过三层, 更多的使用类来关联每一个标签元素
了解哪些属性是可以通过继承而来的, 然后避免对这些属性重复指定规则

渲染性能

慎重使用高性能属性: 浮动、定位
尽量减少页面重排、重绘
去除空规则: {}。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少 css 文档体积
属性值为 0 时, 不加单位
属性值为浮动小数 0.**, 可以省略小数点之前的 0
标准化各种浏览器前缀: 带浏览器前缀的在前。标准属性在后
不使用 @import 前缀, 它会影响 css 的加载速度
选择器优化嵌套, 尽量避免层级过深
css 雪碧图, 同一页面相近部分的小图标, 方便使用, 减少页面的请求次数, 但是同时图片本身会变大, 使用时, 优劣考虑清楚, 再使用
正确使用 display 的属性, 由于 display 的作用, 某些样式组合会无效, 徒增样式体积的同时也影响解析性能
不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生, 国外却很流行。web fonts 通常体积庞大, 而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能

可维护性、健壮性

将具有相同属性的样式抽离出来，整合并通过 class 在页面中进行使用, 提高 css 的可维护性
样式与内容分离: 将 css 代码定义到外部 css 中

21. CSS 优化和提高性能的方法有哪些？相关推荐

[css] 列举CSS优化、提高性能的方法
[css] 列举CSS优化.提高性能的方法加载性能压缩CSS通过link方式加载,而不是@import复合属性其实分开写,执行效率更高,因为CSS最终也还是要去解析如 margin-left: le ...
css面试题（7）CSS优化、提高性能的方法有哪些？
CSS优化.提高性能的方法有哪些? 避免过度约束过渡约束的代码: div{position:relative;bottom:100px; // 不必要的样式约束top:-200px;width: 2 ...
CSS 优化、提高性能的方法
如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要总结有下面几点: 1.尽量将样式写在单独的css文件里面,在head元素中引用有时候为了图方便或者快速搞定功能,我们可能会直接将样式写在页 ...
CSS 优化、提高性能的方法有哪些？
一.写在前面 css的优化方案,之前没有提及,所以接下来进行总结一下. 二.具体优化方案 2.1.加载性能 1.css压缩:将写好的css进行打包,可以减少很多的体积. 2.css单一样式:在需要下边 ...
【前端知识之CSS】CSS提高性能的方法有哪些
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍如果要进行优化,CSS提高性能的方法有哪些. 文章目录前言一.内联首屏关键CSS 二.异步加载CSS 三.资源压缩四.合理使用选择器五. ...
计算机性能过低配色方案,系统之家windows7提示更改配色方案提高性能的方法
有很多win7旗舰版用户在运行一些游戏的时候弹出了是否要更改配色方案来提高性能的提示,原因是检测到计算机性能过低的问题,其实可以选择使用更低内存的windows7 basic主题或者提高虚拟内存,下面 ...
21 项优化 React App 性能的技术
原文: 21 Performance Optimization Techniques for React Apps 作者:Nishant 译者:博轩介绍在 React 内部,React 会使用几项 ...
常用CSS优化总结——网络性能与语法性能建议
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...
常见优化Sql查询性能的方法收集
1.查询条件减少使用函数,避免全表扫描 2.减少不必要的表连接 3.有些数据操作的业务逻辑可以放到应用层进行实现 4.可以使用with as 5.使用"临时表"暂存中间结果 6.不 ...

21. CSS 优化和提高性能的方法有哪些？

21. CSS 优化和提高性能的方法有哪些？

加载性能

选择器性能

渲染性能

可维护性、健壮性

21. CSS 优化和提高性能的方法有哪些？相关推荐

最新文章

热门文章