共计 2120 个字符，预计需要花费 6 分钟才能阅读完成。
我们都知道性能对于一个网站来说相当重要，以至于很多公司都会专门招聘人员优化网站性能，网上关于探讨网站性能优化的文章也非常多。性能是什么呢？简单来说，就是用户打开网站到网页完全呈现在用户面前所耗费的时间，研究表明：用户最满意的打开网页时间是 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 选择器，增强样式的复用；
中还有两个重要的知识点 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 中使用运算式：学习 CSS 的时候就知道，这个应该避免，不应该加深到这一层再去了解，因为这个的后果确实非常严重，一旦存在动画性的 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 优化的东西，当然也汲取了前辈们的智慧，算是总结一下吧，我相信关于 css 的优化知识还有很多，不断学习吧！！
