百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程文章 > 正文

9个小细节帮你优化CSS代码(css3优化)

qiyuwang 2025-03-30 20:30 6 浏览 0 评论

前言:

网站加载缓慢,除了后端、JS与CDN背锅外,CSS也有可能是其中之一。虽然影响性质可能小于前面几位大佬,但是为了提高整体体验,还是很有必要了解的。


1.减少不必要的高消耗属性box-shadowborder-radiusposition: fixedtransform:nth-childfilter

上述几个CSS属性对性能要求相对较高。单页面少数使用不会产生影响。

当单页面罗列大量数据(几百条),且均涉及到上述部分样式,整体CSS渲染压力就会产生较为明显的差异,所以建议针对场景谨慎使用。


2.减少重复样式代码

多个元素或选择器需要相同CSS属性时,建议通过逗号组合相关选择器统一声明样式,避免单独重复声明。

优化前

.header {
    color:#6d6d6d;
    margin: 10px 0;
    text-align: center;
}
.footer {
    color:#6d6d6d;
    margin: 10px 0;
    text-align: center;
}

优化后

.header, .footer {
    color:#6d6d6d;
    margin: 10px 0;
    text-align: center;
}


3.简化选择器

设置HTML元素的方法有很多种,复杂的CSS选择器可以有多层级,但是这往往也会增加解析的耗时。降低选择器的复杂度可以减少浏览器解析的负载同时也能增加代码简洁增加可读性。当然也可以结合实际场景进行判断需求。

优化前

.header>div.header-navigation ul li .option {
    color:#6d6d6d;
    text-align: center;
}

优化后

.header .option {
    color:#6d6d6d;
    text-align: center;
}


4.避免使用 !important

当HTML元素存在多个重叠的样式时,除非不得不用,尽量避免通过 !Important 提升某一个样式的优先级。

添加 !Important CSS声明将覆盖掉其他对应的样式声明,如果CSS的规则中 !Important 太多,浏览器就必须对代码进行额外的检查,这可能会降低页面的加载速度。所以,尽量避免使用 !Important 。在很多情况下我们是可以通过选择器来实现样式重写的,除非是想要对第三方库的CSS进行重写。


5.使用CSS特效与SVG替代图片

图片资源相对较大,需要更多的加载时长,页面大量使用图片容易增加页面渲染的负担,虽然现阶段CDN、OSS等技术可以极大程度降低图片的渲染负载,但是还是把需求留给刚需吧,类似渐变、几何图形、边框、按钮等效果可以尽量使用CSS样式实现,甚至也可以使用SVG来替代PNG或者JPG图片。


6.压缩CSS

通过压缩CSS可以减少CSS文件中不必要的空白与换行从而减少文件大小。提升CSS的加载效率,降低加载时长。


7.使用0替换0px

当属性值为0是可以忽略单位。

写单位是没错的,只是当大型CSS文件中,往往存在较多属性值0的样式,忽略单位也可以减少一定的文件大小。

优化前

.header {
    margin: 10px 0px 10px 0px;
}

优化后

.header {
    margin: 10px 0;
}


8.尽量使用十六进制来指定颜色

设置颜色色值时使用颜色名称,浏览器需要额外消耗进行识别名称对应的十六进制,同时不同的浏览器识别的效果可能也存在差异,因此使用十六进制可以更精准,也更减少浏览器消耗。

优化前

.header {
    color: red;
}

优化后

.header {
    color: #ff0000;
}


9.使用 link 代替 @import

@import 规则主要用于导入资源或者CSS文件。它会阻止其他文件并行下载,并可能会导致网站速度变慢。

在HTML中用 标签代替 @import,可以并行加载CSS文件,避免等待。

优化前

@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");

优化后




相关推荐

你真的会用Word画线吗?(word画线技巧)

【你真的会用Word画线吗?】①输入三个“=”回车,是一条双直线;②输入三个“”,回车,就是一条波浪线;③输入三个“”回车,就是一条虚线;④输入三个“-”,回车,就是一条细直线.....新技能get√...

「干货」Word技巧知识——进阶篇(2)

Hello,大家好,我是无拘无束的分享知识,每天跟大家分享点有用的知识,话不多说。感兴趣的朋友可以点赞、关注、收藏哦。1.将word文档中的硬回车全部消除从事来稿阅读、编辑的工作者,最头痛的事就是打...

办公室人员必备! Word快捷键大全(办公中常用的快捷键)

【Word里超简单的画线方法!】简历、总结里文字太多怎么办?用线条分隔!Word画线秘籍:①输三个"="回车,是一条双直线②输三个"~"回车,是一条波浪线③输三个"-"回车,就是一条细直线。(来源...

Word笔记大全(详细步骤)(word怎么写笔记)

字处理一、文档的基本操作1.打开/新建2.快速新建ctrl+n3.利用模板创建文件--新建--选择模板officeplus4.保存5.保护文件--信息--保护文档--限制编辑--对话框:勾选每一项...

如何删除word文档空白页?(怎么删除word里的空白页?)

在日常办公或学习中,我们经常会遇到Word文档中出现空白页的情况,这不仅影响文档的美观,还可能造成打印浪费。下面,我将为大家详细介绍如何在Office和WPS中的Word里轻松删除这些恼人的空白页。...

Win11学院:如何在Windows 11装机时禁用BitLocker磁盘加密

IT之家5月7日消息,微软计划在Windows1124H2装机过程默认启用BitLocker加密,对于用户来说有两方面的影响:其一是影响硬盘的性能,其二是用户如果没有解密密钥,可能...

办公小技巧:Word“安全模式”用通透

大家都知道Windows的安全模式。其实,Word也有安全模式。那么,Word的安全模式又是什么?何时使用这种模式?使用这种模式有何限制?当Word运行中遇到问题需要启用安全模式运行时,如何按照软件给...

段落结束敲回车,下一段格式变样了怎么处理#每天学习一点点

段落换行后的格式发生变化。段落结束敲回车键,下一段格式变样了怎么处理?大家有时候遇到文章敲回车键,在下一段打字之后会发现这一段的样子就会和之前的段落不一样,当然可以调整一下或者用格式刷刷一下,但是稍微...

硬回车、软回车等介绍(硬回车键和软回车键)

1.硬回车:硬回车占两个字节,在word中敲击Enter键即可输入硬回车,硬回车是真正的段落标记,在两个硬回车之间的文字自成一个段落。代码是^p(小写)。2.软回车:用Shift+Enter产...

Word里超简单的画线方法!(word中如何画线条)

小厅分享【Word里超简单的画线方法!】简历、总结里文字太多怎么办?用线条分隔!Word画线秘籍:①输三个"="回车,是一条双直线②输三个"~"回车,是一条波浪线③输三个"-"回车,就是一条细直线...

Word 如何更改图片、删除与删除背景,勾选图片等问题

  如果插入到Word文档中的图片想另外换一张,更换方法有两种,一种是把原图删除另外插入一张,另一种是直接更换图片。Word2016提供了更改图片的功能,用此功能更换图片会自动把原图删除,就像...

Word中批量删除空行(多种方案)(批量删除word中的空行)

如下图,在Word文档中存在大量空行(回车),为了文档整洁,需要批量取消这些回车;方法一Ctrl+h,在查找内容中输入”^p^p”,在替换为输入”^p”,单击全部替换即可(^符号在英文输入法下按Shi...

Word文档如何取消自动编号?(word文档如何取消自动编号功能)

在word文档中,当我们编辑有序号的文本内容时,word会自动识别给文本编号,如果直接删除序号再按回车键,序号又会自动填充。但有时候我们并不需要它自动编号或不喜欢它的编号格式,如何才能取消word自动...

最全的Word知识点,抓紧时间收藏起来

Word知识点1.1word工作界面Word2010的窗口组成∶窗口分标题栏、菜单栏、常用工具栏、格式工具栏、标尺、编辑区滚动条、状态栏、任务窗格。1.标题栏∶显示所编辑的文档名和程序名称。单击标题...

Word中的页眉横线就是删不掉?其实按下这个键,1秒就能去除

不知道大家在用Word的同时,有没有遇到过难删除的页眉横线呢?以前小编就是遇到这条横线,不得已将里面的文字复制到一个新的文档中,如今终于知道该怎样删除这条横线了,下面我们就来看看删除方法。一、删除页眉...

取消回复欢迎 发表评论: