性能优化 - 你知道CSS有哪些优化方案吗

难度级别：中高级及以上                               提问概率：70% 

---

CSS是前端开发工作中必不可少的技能之一，同时也是网页开发中必不可少的重要元素之一。但很多人所开发的项目本身对性能要求并不高，再加上项目周期紧张，久而久之，也就容易养成不考虑细节的习惯，觉得CSS无非就是做一些布局性的工作。那么如果从性能优化的角度考虑，有哪些细节和方案需要注意呢，一起来看一下吧。

1 CSS属性要按顺序编写

很多人在编写CSS属性的时候，并没有一定的顺序逻辑性，想到哪里就写到哪里，类似蓝湖这些设计工具会带有一定的CSS代码，所以很多人先从工具中复制CSS代码，再补充自己需要的一些属性，这样其实是不对的。CSS属性编写应该按照定位、盒模型、可视属性、其他属性的顺序来编写，就像这样

CSS代码：
<style>
.box {
/* 定位相关属性 */
position: absolute;
top: 0;
right: 0;
z-index: 1;
/* 盒模型相关属性 */
margin: 10px;
width: 200px;
height: 200px;
border: 1px solid red;
padding: 10px;
/* 可视属性相关 */
background: red;
line-height: 200px;
color: red;
text-align: center;
/* 其他属性 */
opacity: 0.1;
text-shadow: 5px 5px 5px #000;
}
</style>

2 合理的嵌套层级

在使用Less、Sass等CSS预编译工具后，大家发现层级嵌套这一项功能实用起来特别方便。尤其是遇到比较复杂的子组件，HTML模板嵌套的层级越深，CSS嵌套的层级也就会越深。但需要注意的是，在编写嵌套选择器的时候，最好嵌套层级不要超过三层，因为层级越深，最终在浏览器中查找元素样式的时候，就需要花费更多的时间。

3 减少使用@import引入CSS文件

我们在日常开发中，应该尽量少的使用或者不使用@import方式引入CSS样式。因为@import引入方式必然会在link标签之后执行。这也就很容易造成link标签引入的CSS样式下载完成、被浏览器解析、开始执行后，页面已经渲染了DOM树，但由于CSS文件中又通过@import引入了新的CSS文件，如果两个CSS文件都对首屏元素有影响，那么势必造成元素重绘、偏移等情况，严重影响用户体验。

不过既然可以肯定先执行link标签引入样式文件，再执行@import操作，那么@import完全可以算作是一种异步加载CSS文件的手段。例如一些非首屏样式文件，或者一些用于操作后才会显示出来的样式代码，还是可以考虑使用@import引入的方式。这样既可以减小主样式文件的体积，还可以做到非主样式文件异步加载的效果。

4 首屏元素采用CSS内联的方式

在前端性能优化中，首屏的优化可谓是重中之重。浏览器渲染页面需要先加载HTML元素，再下载、解析、执行外部引入的CSS样式文件，最终组合为浏览器可渲染的DOM树。所以如果把首屏元素所需的样式书写为内联的形式，那么就大大减小了与外部文件样式相结合的这个过程。

但这种优化手段做起来却没有那么容易，如果首屏需要显示哪些元素相对固定还好说，但现在大家比较习惯组件复用化开发，很多时候首屏需要显示的组件，很可能也会被非首屏复用，但是又不能把组件完全开发成内联样式的形式。所以这就又需要对组件当前是否处于首屏做区分判断。不过虽然组件重用性比较高，但真实项目开发中，首屏的布局必定会有一些独特之处，而这些关键的独特之处就是做内联样式的最佳实践。

5 多用样式继承

例如一个按钮元素，内部包含icon和文字，那么为父元素添加cursor样式属性，就可以使整个按钮元素改变手型样式效果；例如color、font-family这些样式属性，具有极强的穿透继承能力，就可以尽量少的重复编写。

6 减少http请求

例如我们常用的cssSprite技术，它可以将多个icon图片排列成一张大图片，通过backgroud-position属性定位的方式显示需要的图片；例如将小icon图片转为base64编码的形式；例如通过webpack将CSS文件压缩等方式，都是希望减少http请求，降低文件加载速度。

---

刷题思考

    有关CSS的性能优化这个考点，考察批次很高，而且其实很多知识点都相对基础且杂乱，再加上很多求职者面试前比较重视Javascript和框架方面的考点整理，很容易忽略CSS考点的整理。

    一旦面试官问到CSS性能优化这个问题，求职者一定是回答的越多越好，不怕回答的乱，就怕回答的少。因为要考察一名前端工程师，到底平时利用CSS只是完成任务，还是真正从点滴去磨炼技术，CSS优化将会是一个非常容易暴露功底的考点。

---

类似考点

    既然CSS优化如此重要，在掌握了本小节中的参考答案后，面试官很可能还会提出以下这些问题，例如请你说一说，页面在进行重绘操作时，哪些CSS样式属性会降低浏览器的渲染性能？例如你知道哪些CSS样式属性不会继承吗？例如你知道用*这种通配规则有什么缺点吗？