CSS提高性能的方法
CSS提高性能的方法
前言
在网络开发中，CSS无疑是一个重要的部分。它不仅负责页面的布局和设计，还可以影响用户的第一印象。因此，在产品开发过程中，优化CSS性能是必不可少的。
内联首屏关键CSS
我们可以通过内联首屏关键CSS来提高性能。当打开一个页面时，首先出现在屏幕上的内容会直接影响用户体验。如果我们将关键的CSS代码内联到HTML中，浏览器在下载完HTML后就可以立即开始渲染，而不需要等待外部CSS文件的下载和解析。然而，这并不适用于大型的CSS文件，因为它们可能导致初始拥塞窗口和缓存问题。对于这些文件，我们应该使用外部引用的方式。
1<style>
2/* 内联的关键CSS代码 */
3</style>异步加载CSS
在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，浏览器将不会渲染任何已处理的内容。前面加载内联代码后，后面的外部引用CSS则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案，主要有如下: 。 使用JavaScript将link标签插到head标签最后
1/ / 创建link标签
2const myCSS = document.createElement("link")
3myCSS.rel = "stylesheet"
4myCSS.href = "mystyles.css"
5//插入到header的最后位置
6document.head.insertBefore(myCSS,document.head.childNodes[document.head.childNodes.length - 11.nextSibling);设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞0页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS
1<ink rel-"stylesheet" href-"mystyles.css" media "noexist" onload "this. media='all"通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
1<ink rel: "'alternate stylesheet" href-"'mystyles.css" onload "this. rel='stylesheet">资源压缩
资源压缩也是一种有效的优化方法。我们可以利用webpack、gulp/grunt、rollup等模块化工具，将CSS代码进行压缩，使文件变小，大大降低了浏览器的加载时间。
1// webpack.config.js
2module.exports = {
3 module: {
4 rules: [
5 {
6 test: /\.css$/,
7 use: ['style-loader', 'css-loader', 'postcss-loader']
8 }
9 ]
10 }
11}合理使用选择器
CSS匹配的规则是从右往左开始匹配，例如 #markdown .content h3匹配规则如下:
- 先找到h3标签元素 然后去除祖先不是.content的元素 最后去除祖先不是#markdown的元素
- 如果嵌套的层级更多，⻚面中的元素更多，那么匹配所要花费的时间代价自然更高。 所以我们在编写选择器的时候，可以遵循以下规则:
- 不要嵌套使用过多复杂选择器，最好不要三层以上 使用id选择器就没必要再进行嵌套 通配符和属性选择器效率最低，避免使用
1/* 不好的例子 */
2#markdown .content h3 { ... }
3
4/* 好的例子 */
5.content h3 { ... }减少使用昂贵的属性
我们应减少使用昂贵的属性，如box-shadow、border-radius、filter、透明度、:nth-child等，因为这些属性在页面重绘时会降低浏览器的渲染性能。
避免使用@import
CSS样式文件有两种引入方式，一种是 link 元素，另一种是 @import 。
@import 会影响浏览器的并行下载，使得⻚面在加载时增加额外的延迟，增添了额外的往返耗时。
而且多个 @import 可能会导致下载顺序紊乱。
比如一个CSS文件 index.css 包含了以下内容: @import url("reset.css")。
那么浏览器就必须先把 index.css 下载、解析和执行后，才下载、解析和执行第二个文件 reset.css 。
所以应避免使用@import，因为它会影响浏览器的并行下载，增加页面加载时的额外延迟，并可能导致下载顺序紊乱。
1/* 不好的例子 */
2@import url('reset.css');
3
4/* 好的例子 */
5<link rel="stylesheet" href="reset.css">总结
总的来说，优化CSS性能可以从选择器嵌套、属性特性、减少HTTP请求等多方面考虑。同时，我们还应注意CSS代码的加载顺序，以确保用户得到最佳的体验。