是什么

css性能： 作为渲染和内容展现的重要环节，css性能优化贯穿整个过程

优化方式

• 内联首屏css
• 异步加载css
• 资源压缩
• 合理使用选择器
• 减少昂贵的属性
• 不使用@import

内联首屏css

先解析html， 再下载css文件，通过内联css，html下载解析后就可以立即渲染

• 不适合较大css文件，没有缓存，阻塞

异步加载css

css没有下载解析完成之前，会阻塞渲染，浏览器不会渲染任何已处理的内容

前面加载内联css后， 后面引用的外部css文件可以异步加载，避免阻塞渲染

异步加载方式

• js创建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 - 1 ].nextSibling );

• 设置link标签midia属性为noexist

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

• 设置link标签rel属性

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

资源压缩

利用webpack等模块化工具进行css代码压缩

合理使用选择器

规则： 从右到左进行匹配 最佳写法

• 选择器最多3层
• 使用id就不需嵌套
• 避免使用通配符和属性选择器

减少使用昂贵属性

• box-shadow
• opacity
• filter
• border-radius

不使用@import

• 浏览器并行下载，增加延迟
• 多个import会导致下载顺序紊乱
• 先外面下载，再下载import内部的css

减少重绘重排

• 避免table
• 避免js操作
• 动画要脱离文档流
• css硬件加速