前端性能优化从css说起

       我们都知道性能对于一个网站来说相当重要，以至于很多公司都会专门招聘人员优化网站性能，网上关于探讨网站性能优化的文章也非常多。性能是什么呢？简单来说，就是用户打开网站到网页完全呈现在用户面前所耗费的时间，研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。
       影响网站的性能有多重因素，我们就着重从前端方面来进行探讨，首先我们先了解一下网页的解析过程。

主要过程有：1.解析HTML构建DOM树 ；2.解析css构建CSSOM树 ；3.根据DOM树和CSSOM来构造 Rendering Tree（渲染树）；4.Layout页面位置计算布局； 5.Paint绘制；css的加载不会阻塞DOM树的解析，但是会阻塞DOM树的渲染和后面js语句的执行，所以说才有了优化css的必要性，针对这一问题，我们可以从以下方面进行考虑优化。

1.结合构建工具（webpack,gulp...），对css文件进行打包压缩，抽离公共样式，删除多余的样式、空格、注释。
2.减少样式选择器的层级，减少样式匹配时间。        
3.尽量使用class选择器，增强样式的复用；

       css中还有两个重要的知识点repaint(重绘)和reflow(回流)，repaint主要是针对某一个DOM元素进行的重绘，reflow则是回流，针对整个页面的重排，我们都知道这两个特性都会消耗网页性能，他们的触发场景也是不同的。不涉及任何DOM元素排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动，除上面所提到的DOM元素style修改基本为reflow，例如元素的任何涉及长、宽、行高、边框、display等style的修改。很多时候我们是无法避免引起repaint和reflow，但是我们还是要尽量通过各种方法来减少引起这两个特性,我们可以从以下方面进行考虑优化。

1.尽可能在DOM末梢通过改变class来修改元素的style属性：尽可能的减少受影响的DOM元素。
2.避免设置多项内联样式：使用常用的class的方式进行设置样式，以避免设置样式时访问DOM的低效率。
3.设置动画元素position属性为fixed或者absolute：由于当前元素从DOM流中独立出来，因此受影响的只有当前元素，元素repaint。
4.牺牲平滑度满足性能：动画精度太强，会造成更多次的repaint/reflow，牺牲精度，能满足性能的损耗，获取性能和平滑度的平衡。
5.避免使用table进行布局：table的每个元素的大小以及内容的改动，都会导致整个table进行重新计算，造成大幅度的repaint或者reflow。改用div则可以进行针对性的repaint和避免不必要的reflow。
6.避免在CSS中使用运算式：expression、calc、等等，可能会造成多次repaint和reflow。
7.css放在head中,减少引起repaint和reflow;

       接下来我们再来讨论一下base64图片与CssSprites（雪碧图或css精灵），在网页中我们会用到很多图标，如果每一个图标是单独的一张图片，那网页加载的时候，就会有多个请求去请求图片，显而易见会影响网页性能，所以要采取方法对网页中图标使用进行优化处理。
       Css Sprites（雪碧图）：将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。优点：减少网页的http请求，提升网页加载速度；合并多张小图片，减少资源体积。缺点：前期需要处理图片，增加工程量；不利于改动和维护。
       base64编码：base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，要求把每三个8Bit的字节转换为四个6Bit的字节，Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，通俗点来讲就是将资源原本二进制形式转成以64个字符基本单位，所组成的一串字符串。优点：减少http请求；图片可以避免跨域问题。缺点：低版本IE不兼容；过多使用base64图片会使得css过大，不利于css加载和解析；
       在网页开发中我们经常会在引入图片，也会使用到上面两种方法来优化处理网页，他们有各自不同的使用场景。Css Sprites 主要针对一些不需要经常变动的小图片，如表情，标志等，base64主要适用于小于几k的图片，图片太大的话反而得不偿失。
       洋洋洒洒写了一些关于css优化的东西，当然也汲取了前辈们的智慧，算是总结一下吧，我相信关于css的优化知识还有很多，不断学习吧！！