CSS面试题-性能优化 | “朝闻道”知识分享大赛

[小年华°Moon]

这是我参加朝闻道知识分享大赛的第20篇文章。

注：CSS面试题分享板块的内容均为常见的前端面试中会涉及的知识点。
       具体的问题内容大同小异，大家遇到时具体问题具体分析即可。

前言：我们的每个页面都离不开CSS，它作为页面渲染和展示的重要环节，影响着用户进入网站的第一体验。所以说我们有必要对CSS的性能进行一些优化。本文写少了一些常见的CSS性能优化的方法。

1. 实现

1.1 内联关键样式

我们可以在HTML中直接写部分页面的关键样式。这样用户在第一次进入页面时，可以先看到简单、基础的页面效果，可以提供预加载的效果，避免长时间的等待。在很多组件中的页面骨架也是为了提升用户体验的。

1.2 异步加载样式

由于CSS样式的下载、解析会阻塞CSS样式的渲染，但是我们的部分CSS样式可能不参与CSS的渲染（如动画效果等），就没有必要让他们阻塞页面的渲染过程。

方法一：使用JavaScript将link标签查到head标签之后

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

方法二：设置link标签的media属性为noexis，浏览器会认为当前样式表不适用于当前的媒体类型，不进行加载。然后我们再在这个页面加载完成之后，将这个link标签的media属性设置为all或screen

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

方法三：设置link标签的rel属性为alternate，把当前样式表设置为可选样式表，浏览器加载页面时不进行加载。然后我们再在这个页面加载完成之后，将这个link标签的rel属性设置会stylesheet

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

1.3 减少直接导入

在CSS样式中，我们可以通过@import来导入样式文件，但是@import导入样式文件，会影响浏览器的并行下载，为页面加载增加额外的往返延时。且多个@import可能导致下载的顺序错乱。

例如：我们在一个a.css文件中使用@import url("b.css")导入了一个样式文件，那么浏览器就必须在下载、解析、执行完a.css之后才能继续下载、解析、执行b.css

注意：我们需要避免的是在css中使用@import导入，但如果是使用预处理器则没有关系，因为预处理器中的导入，会在第一次编译时把导入的代码复制到所在的css文件中。

1.4 合理使用选择器

CSS的选择器从由向左进行匹配，如#a .b p的匹配顺序如下：

• p标签的元素

• 去除祖先不是.b的元素

• 去除祖先不是#a的元素

在编写选择器时，遵守以下规则：

• id选择器不进行嵌套

• 嵌套的选择器不超过三层

• 避免效率最低的属性选择器和通配符的使用

1.5 其他方法

• 减少重排和重绘

• 使用精灵图减少http请求

• 避免重复编写可继承的属性

• 将小图片转换为base64编码

• 使用transform、opacity实现动画，减少left、top的使用

• 使用webpack、gulp/grunt、roolup等模块化工具压缩css代码

• 减少在页面会发生重绘时使用box-shadow、border-radius、filter、opacity、:nth-child等影响渲染性能的属性

2. 小结

在css中想要实现性能优化，可以从选择器嵌套、属性特征、减少http这三方面考虑。同时，我们也要注意css代码的加载顺序，来优化我们的CSS性能，实现更好的交互体验。