开始我们都知道性能对于一个网站来说是非常重要的，所以很多公司都会招聘人员来优化网站性能，网上也有很多关于网站性能优化的文章。什么是性能？简单的说就是用户打开一个网站，直到网页完全呈现在用户面前所花费的时间。研究表明，用户打开网页最满意的时间是2-5秒。如果他们等待超过10秒，99%的用户将关闭网页。.影响网站性能的因素有很多。我们将专注于前端讨论。首先我们来了解一下网页的解析过程。主要过程是：1.解析HTML构建DOM树；2、解析css构建CSSOM树；3、根据DOM树和CSSOM构建RenderingTree（渲染树）；4.布局页面位置计算布局；5、油漆绘图；css的加载不会阻塞DOM树的解析，但是会阻塞DOM树的渲染和后续js语句的执行，所以需要对css进行优化。对于这个问题，我们可以从以下几个方面来考虑优化。1、结合构建工具（webpack、gulp...），打包压缩css文件，提取常用样式，删除多余样式、空格、注释。2.减少样式选择器的层级，减少样式匹配时间。3、尽量使用类选择器来增强样式的复用；css中有重绘（redraw）和回流（reflow）两个重要的知识点，repaint主要是对某个DOM元素进行重绘，reflow就是reflow。对于整个页面的重排，我们都知道这两个特性都会消耗网页性能，它们的触发场景也不同。不涉及DOM元素任何排版的变化都是repaints，比如元素的color/text-align/text-decoration等的变化，除了上面提到的DOM元素样式修改，基本都是reflow，比如作为涉及long、width、lineheight、border、display和其他样式修改的任何元素。很多时候我们无法避免造成repaint和reflow，但是我们还是需要通过各种方法来降低这两个特性。我们可以从以下几个方面来考虑优化。1、尽可能通过改变DOM末尾的class来修改元素的style属性：尽可能减少受影响的DOM元素。2、避免设置多个内联样式：使用普通类方法设置样式，避免设置样式时访问DOM的低效率。3、设置动画元素的position属性为fixed或absolute：由于当前元素独立于DOM流，所以只有当前元素，即元素重绘受到影响。4.牺牲流畅度来满足性能：动画精度过高会导致更多的repaint/reflow，牺牲精度可以满足性能损失，达到性能和流畅度的平衡。5.避免使用表格进行布局：改变表格中每个元素的大小和内容都会导致整个表格重新计算，从而导致大量的重绘或回流。使用div代替可以执行有针对性的重绘并避免不必要的回流。6、避免在CSS中使用表达式：expression、calc等，可能会造成多次重绘和回流。7.将css放在head中，减少repaint和reflow；接下来，让我们讨论base64图像和CssSprites（Sprite图像或css精灵）。我们会在网页中使用很多图标。如果每个图标都是单独的一张图片，那么在网页加载的时候，会出现多次请求图片的情况，显然会影响网页的性能，所以我们必须采取措施优化网页中图标的使用。cssSprites（雪碧）：将很多小图整合成一张大图，利用css中的background-image属性和background-position属性来定位某个图片位置，从而实现大图中某个部分的小图图片的效果。优点：减少网页的http请求，提高网页加载速度；合并多张小图片，减少资源体积。缺点：图片需要前期处理，增加了工作量；不利于修改和维护。Base64编码：base64是互联网上传输8Bit字节码最常用的一种编码方式。要求每三个8Bit字节转换为四个6Bit字节。Base64是互联网上最常用的方法。传输8Bit字节码的编码方式之一，一般来说就是将资源的原始二进制形式转换成由64个字符基本单元组成的串串。优点：减少http请求；图片可以避免跨域问题。缺点：低版本IE不兼容；过多使用base64图片会使css过大，不利于css的加载和解析；在网页开发中，我们经常会引入图片，我们也会使用以上两种方法来对网页进行优化处理。它们有不同的使用场景。CssSprites主要针对一些不需要经常改动的小图片，比如表情、logo等，Base64主要适用于几千字节以下的图片。如果图片太大，则得不偿失。我已经雄辩地写了一些关于CSS优化的东西。当然，我也吸取了前人的智慧。让我们总结一下。关于CSS优化的知识相信还是有很多的，继续学习吧！！
