【前端知识之CSS】CSS提高性能的方法有哪些

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍如果要进行优化，CSS提高性能的方法有哪些。

---

一、内联首屏关键CSS

1. 内联CSS关键代码能够使浏览器在下载完html后就能立刻渲染，如果引入外部的css代码，在解析过程中遇到外部文件才会开始下载css代码，再渲染，会影响用户体验。
2. 但是，较大的css代码并不适合内联。

二、异步加载CSS

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

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

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

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

三、资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间。

四、合理使用选择器

1. 不要嵌套使用过多复杂的选择器，最好不要三层以上；
2. 使用id选择器就没必要再进行嵌套；
3. 通配符和属性选择器效率最低，避免使用。

五、减少使用昂贵的属性

页面发生重绘时，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能。、

六、不要使用@import

css文件引入尽量使用link，@import会影响浏览器的并行下载，延时页面加载，增加额外的往返耗时，且多个@import会导致下载顺序紊乱。