注册

CSS揭秘之性能优化技巧篇



CSS揭秘之性能优化技巧篇


一、写在前面


我们说的性能优化与降低开销,那必然都是在都能实现需求的条件下,选取其中的“最优解”,而不是避开需求,泛泛地谈性能和开销。


“沉迷”于寻求最优解,在各行各业都存在,哪怕做一顿晚餐,人们也总在摸索如何能在更短的时间更少的资源,做更多的“美味”。例如要考虑先把米放到电饭煲,
然后把需要解冻的拿出来解冻,把蘑菇黄豆这种需要浸泡的先“预处理”,青菜要放在后面炒,汤要先炖,
洗菜的水要用来浇花...需要切的菜原料排序要靠近,有些菜可以一起洗省时节水,要提前准备好装菜的器皿否则你可能要洗好几次手


瞧做一顿晚餐其实也可以很讲究,归纳一下这些行为,可以统称为“优化行为”,也可以引用一些术语表示,例如寻找“最优解“和”关键路径“,
在 CSS 的使用中,同样也需要”关键路径“、”最优解“和”优化“,下面将从这几个方面解释 CSS 性能优化:



①渲染方向的优化


②加载方向的优化



二、CSS性能优化技巧


2.1 渲染方向的优化


  • ①减少重排(redraw)重绘(repaint)


例如符合条件的vue中应尽可能使用 v-show 代替 v-if。v-show 是通过改变 css display 属性值实现切换效果,
v-if 则是通过直接销毁或创建 dom 元素来达到显示和隐藏的效果。 v-if是真正的条件渲染,当一开始的值为true时才会编译渲染,
而v-show不管怎样都会编译,只是简单地css属性切换。v-if适合条件不经常改变的场景,因为它的切换会重新编译渲染,
会创建或销毁 dom 节点,开销较大。 v-show 适合切换较为频繁的场景,开销较小。




  • ②减少使用性能开销大的属性:例如动画、浮动、特殊定位。



  • ③减少css计算属性的使用,有时它们不是必须使用的:例如 calc(100% - 20px),如果这 20px 是边距,



那么或许可以考虑 border-size:border-box。



  • ④脚本行为的防抖节流,减少不必要的的重复渲染开销。



  • ⑤属性值为 0 时,不必添加单位(无论是相对单位还是绝对单位),那可能会增加计算开销,



且也没有规范提倡0值加单位,那是没有意义的,0rem和0em在结果上是没有区别的,但加上单位可能会带来不必要的计算开销。
关于0不必加单位,想必你也收到过编辑器的优化提示。


  • ⑥css 简写属性的使用,有时开销会更大得不偿失,例如 padding: 0 2px 0 0;和 padding-right:2px;

后者的写法对机器和人的阅读理解和计算的开销都是更小的。常见的 css 可简写属性还有 background,border,
font 和 margin。


  • ⑦尽可能减少 CSS 规则的数量,并删除未使用到的 CSS 规则。一些默认就有的 CSS 规则,就不必写了,具有继承性的样式,

也不必每级节点都写。


-⑧避免使用不必要且复杂的 CSS 选择器(尤其是后代选择器),因为此类选择器需要耗用更多的 CPU 处理能力来执行选择器匹配。
总之不必要的深度,不管是 css 还是 dom 都不是好的选择,这对人和机器都是同样的道理,因为读和理解起来都同样的“费力”。


-⑨关键选择器(key selector)。


览器会从最右边的样式选择器开始,依次向左匹配。最右边的选择器相当于关键选择器(key selector),
浏览器会根据关键选择器从 dom 中筛选出对应的元素,然后再向上遍历相关的父元素,判断是否匹配。


所以组合嵌套选择器时,匹配语句越短越简单,浏览器消耗的时间越短,
同时也应该减少像标签选择器,这样的大范围命中的通配选择器出现在组合嵌套选择器链中,
因为那样会让浏览器做大量的筛选,从而去判断选出匹配的元素。


-⑩少用*{}通配规则,那样的计算开销是巨大的。


2.2 加载方向的优化


  • ①减少 @import 的使用

合理规划 css 的加载引入方式,减少 @import 的使用,页面被加载时,link 会同时被加载,
而 @import 引用的 CSS 会等到页面被加载完再加载。



  • ②css 尽量放在 head 中,会先加载,减少首次渲染时间。



  • ③按需加载,不必一次就加载完全部资源,在单页应用中应尤其注意。



  • ④考虑样式和结构行为分离,抽放到独立css文件,减少重复加载和渲染。



  • ⑤css压缩技术的应用,减少体积。



三、写在后面


有一个好的家务机器人,我们可以省很多事,少操心很多,同样的,
有一个好的 css 预处理工具和打包工具或许也可以帮助程序员节省很多精力。


网速的提升和设备性能提升,也让程序员拥有许多资源可以“挥霍”,例如现在的很多“国民级”的
应用在3g网络下和早期的手机中都无法正常工作,但那似乎不影响它们的“优秀”。诚然,那又是复杂的问题。



正如开头所言,程序员寻求“最优解”和“关键路径”,应当在有可替代方案和能满足需求的前提下进行。



仅是理论空谈优化,无异于是”耍流氓“。矛盾无处无时不在,重要的是衡量取舍和你能承受。


作者:灵扁扁
链接:https://juejin.cn/post/7106825740754092069
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

0 个评论

要回复文章请先登录注册