关于css属性优化，提取公共部分

.slider,

.slider-item-container{

width:100%;

height:100%;

}

.slider-item-container{

/*****某些属性****/

}

----------------------------------------------

如果没有提取公共部分，选择器只工作了2遍，

如果提取了公共部分，选择器是不是工作了3遍？

这样会不会造成性能的浪费？

源自：移动性能优化 3-2 CSS属性和其他优化

收起

2回答

好帮手慕言 2019-08-01 14:06:02

同学你好，因为最终渲染的是样式，和选择器的使用量上关系不大，

选择器可能会工作多次，性能浪费是微乎其微的，这个是浏览器底层的东西，同学不用纠结

一般情况下，如果样式上有公共的部分，都是会提取出来，便于维护与性能上的优化，

如果帮助到了你，欢迎采纳~祝学习愉快~

好帮手慕言 2019-08-01 10:18:15

同学你好，这样写可以提高性能的，因为如果不这样写，就会是以下写法：

以上写法有代码是重复的，会造成性能浪费

如果帮助到了你，欢迎采纳~祝学习愉快~

提问者 mukewangpeng #1

.slider, .slider-item-container{ width:100%; height:100%; } .slider-item-container{ display:flex; justify-content:center; } 如果提取了公共部分，选择器是不是工作了3遍？ ------------------------------------------ .slider{ width:100%; height:100%; } .slider-item-container{ width:100%; height:100%; display:flex; justify-content:center; } 如果没有提取公共部分，选择器只工作了2遍， ------------------------------------------ 这样会不会造成性能的浪费？

2019-08-01 10:28:06