浅谈css优化和提高性能的办法

加载性能优化

1、css压缩:将css打包压缩,可以减小文件体积

2、css单一样式:使用margin-left,margin-bottom这种,比使用margin复合属性更快

3、减少使用@import,多使用link

选择器性能优化

1、关键选择器:选择器最后面的部分作为关键选择器,因为css选择符是从右向左进行匹配的,当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素

2、如果规则拥有ID选择器作为其关键选择器,则不要为规则增加标签,过滤掉无关的规则

3、避免使用通配规则*{}

4、尽量少的用标签选择器,而是使用class选择器

5、如果规则拥有ID选择器作为其关键选择器,则不要为规则增加标签

6、尽量将选择器深度降低,最多不要超过三层,更多的使用类来关联标签

7、了解属性的继承,避免重复指定规则

渲染性能优化:

1、慎重使用高性能属性:浮动、定位

2、尽量减少页面重排、重绘

3、去除空规则{}

4、属性值为0时,不加单位

5、属性值为浮动小数0.**,可以省略小数点之前的0

6、标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后

7、不适用@import前缀

8、选择器优化嵌套,避免层级过深

9、css精灵图、雪碧图

10、正确使用display属性

11、不滥用web字体

可维护性、健壮性:

1、具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性

2、样式与内容分离:将css定义到外部css中

相关推荐
一叶飘零晋13 小时前
【(一)Electron 使用之如何用vite+vue3搭建初始框架】
前端·javascript·electron
光影少年13 小时前
前端SSR和ssg区别
前端·vue.js·人工智能·学习·react.js
广州华水科技13 小时前
北斗形变监测传感器在水库安全监测中的应用与发展
前端
凯瑟琳.奥古斯特13 小时前
Bootstrap快速上手指南
开发语言·前端·css·bootstrap·html
精益数智工坊13 小时前
拆解制造业仓库物料管理流程:如何通过标准化仓库物料管理流程解决账实不符难题
大数据·前端·数据库·人工智能·精益工程
恶猫13 小时前
网页自动化模拟操作时,模拟真实按键触发事件【终级方案】
前端·javascript·自动化·vue·网页模拟
小羊Yveesss14 小时前
2026年前端开发新趋势:智能协同、工具革新与场景深耕
前端·ai
Dxy123931021614 小时前
HTML中的Canvas可以干哪些事情
前端·html
悟乙己14 小时前
解析 Agent 时代的 HTML PPT SKILLS: html-ppt-skill
前端·html·powerpoint
ZC跨境爬虫14 小时前
跟着 MDN 学 HTML day_2:(表单分组与高级输入控件实战)
前端·javascript·css·ui·html