CSS性能优化
CSS选择器优化
如果可以直接选中元素，不需要加一些多余的修饰
/*不要使用类选择器和ID选择器修饰元素标签，这样多此一举，还会降低效率。*/div#slider.slider {
}一般来说，class用于样式，id用于js，因为id定义的样式不利于复用
保证不会误选的情况下，尽量保持简单
避免冲突可以在命名时区分好
/*保持简单，不要使用嵌套过多过于复杂的选择器*//*浏览器从右向左解析CSS*//*.slider .slider-item-container .slider-item .slider-link .slider-img {
width: 100%;
}*/.alex-slider-img {/*嵌套少*//*权重低 便于使用的时候覆盖*/width: 100%;
}
尽量少用通配符选择器，可以单独写出来，罗列出来
/*避免通配选择器*/* {
}ul, li, dl, dt, dd, p {padding: 0;margin: 0;
}
不必要的样式和没有用到的样式直接删除即可
/*移除无匹配的样式*/.slider {/*width: 100%;*/}
高级选择器少用（类似正则的），还有属性选择器，性能并不高
但是必须的情况下可少量使用
/*避免类正则的属性选择器*/[class*="slider-indicator"] {
}[class~="slider-indicator"] {/*空格分隔*/}[class^="slider-indicator"] {
}[class$="slider-indicator"] {
}
css属性优化：
不同类里存在相同样式可以提取出来一起写，减少冗余
而且方便统一修改
/*提取公用部分*/.slider,
.slider-item-container {width: 100%;height: 100%;
}
合并一些可以合并的元素
上右下左
适当使用简写
/*合写*/.slider {margin-top: 10px;margin-bottom: 10px;margin-right: 20px;margin-left: 20px;margin: 10px 20px 10px 20px;margin: 10px 20px;margin: 10px 20px 10px;background-color: #fff;font-size: 12px;font: ;
}
其他优化：
不建议使用CSS @import引用加载CSS（scss里没关系）
做动画时优先使用css3动画，其次再考虑js动画
移动端优先考虑flex布局，少用float
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
