手册
目录
编写高效的 CSS 有助于加快网站加载速度,并使其运行更加流畅,特别是在性能较弱的设备上。
以下是一些提高 CSS 性能的建议:
复杂的选择器会增加浏览器匹配样式的时间。在可能的情况下,尽量保持选择器简洁。
ul li a.button:hover {<br></br>
background-color: blue;<br></br>
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.button:hover {<br></br>
background-color: blue;<br></br>
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使用 * 会影响所有元素的样式,可能导致页面渲染变慢。
* {<br></br>
margin: 0;<br></br>
padding: 0;<br></br>
}
运行实例 »点击 "运行实例" 按钮查看在线实例
内联样式会增加 HTML 文件的体积,并且更难管理和缓存。
<div style="color: red; font-size: 18px;">Hello</div>
运行实例 »点击 "运行实例" 按钮查看在线实例
尽可能使用一个 CSS 文件,并删除空格和注释以减小文件大小。
可以使用以下工具:
将主 CSS 文件放在 <head> 中,使其在页面渲染之前加载。
<link rel="stylesheet" href="style.css">
运行实例 »点击 "运行实例" 按钮查看在线实例
避免使用 @import 来加载 CSS,因为它会延迟样式表的加载。
使用简写属性可以节省空间,并且解析速度更快。
/* 长写法 */<br></br>
margin-top: 10px;<br></br>
margin-right: 20px;<br></br>
margin-bottom: 10px;<br></br>
margin-left: 20px;<br></br><br></br>
/* 简写法 */<br></br>
margin: 10px 20px;
运行实例 »点击 "运行实例" 按钮查看在线实例
通过在服务器设置中为 CSS 文件设置较长的过期时间,确保浏览器对其进行缓存。这可以减少用户重复下载的次数。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.9万人学习
共29课时
62.3万人学习
共25课时
39.7万人学习
共43课时
73.6万人学习
共25课时
62.2万人学习
共22课时
23.2万人学习
共28课时
34.4万人学习
共89课时
127万人学习