CSS提高性能的方法

前言 #

在网络开发中，CSS无疑是一个重要的部分。它不仅负责页面的布局和设计，还可以影响用户的第一印象。因此，在产品开发过程中，优化CSS性能是必不可少的。

内联首屏关键CSS #

我们可以通过内联首屏关键CSS来提高性能。当打开一个页面时，首先出现在屏幕上的内容会直接影响用户体验。如果我们将关键的CSS代码内联到HTML中，浏览器在下载完HTML后就可以立即开始渲染，而不需要等待外部CSS文件的下载和解析。然而，这并不适用于大型的CSS文件，因为它们可能导致初始拥塞窗口和缓存问题。对于这些文件，我们应该使用外部引用的方式。

<style>
/* 内联的关键CSS代码 */
</style>

<style>
/* 内联的关键CSS代码 */
</style>

异步加载CSS #

在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，浏览器将不会渲染任何已处理的内容。前面加载内联代码后，后面的外部引用CSS则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案，主要有如下: 。 使用JavaScript将link标签插到head标签最后

/ / 创建link标签
const myCSS = document.createElement("link")
myCSS.rel = "stylesheet"
myCSS.href = "mystyles.css" 
//插入到header的最后位置
document.head.insertBefore(myCSS,document.head.childNodes[document.head.childNodes.length - 11.nextSibling);

/ / 创建link标签
const myCSS = document.createElement("link")
myCSS.rel = "stylesheet"
myCSS.href = "mystyles.css" 
//插入到header的最后位置
document.head.insertBefore(myCSS,document.head.childNodes[document.head.childNodes.length - 11.nextSibling);

设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞0页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS

<ink rel-"stylesheet" href-"mystyles.css" media "noexist" onload "this. media='all"

<ink rel-"stylesheet" href-"mystyles.css" media "noexist" onload "this. media='all"

通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet

<ink rel: "'alternate stylesheet" href-"'mystyles.css" onload "this. rel='stylesheet">

<ink rel: "'alternate stylesheet" href-"'mystyles.css" onload "this. rel='stylesheet">

资源压缩 #

资源压缩也是一种有效的优化方法。我们可以利用webpack、gulp/grunt、rollup等模块化工具，将CSS代码进行压缩，使文件变小，大大降低了浏览器的加载时间。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
}

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
}

合理使用选择器 #

CSS匹配的规则是从右往左开始匹配，例如 #markdown .content h3匹配规则如下:

• 先找到h3标签元素 然后去除祖先不是.content的元素 最后去除祖先不是#markdown的元素
• 如果嵌套的层级更多，⻚面中的元素更多，那么匹配所要花费的时间代价自然更高。 所以我们在编写选择器的时候，可以遵循以下规则:
• 不要嵌套使用过多复杂选择器，最好不要三层以上 使用id选择器就没必要再进行嵌套 通配符和属性选择器效率最低，避免使用

/* 不好的例子 */
#markdown .content h3 { ... }

/* 好的例子 */
.content h3 { ... }

/* 不好的例子 */
#markdown .content h3 { ... }

/* 好的例子 */
.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，因为它会影响浏览器的并行下载，增加页面加载时的额外延迟，并可能导致下载顺序紊乱。

/* 不好的例子 */
@import url('reset.css');

/* 好的例子 */
<link rel="stylesheet" href="reset.css">

/* 不好的例子 */
@import url('reset.css');

/* 好的例子 */
<link rel="stylesheet" href="reset.css">

总结 #

总的来说，优化CSS性能可以从选择器嵌套、属性特性、减少HTTP请求等多方面考虑。同时，我们还应注意CSS代码的加载顺序，以确保用户得到最佳的体验。