前端性能优化

一个项目，想要一个良好的用户体验，做好性能优化必不可少，因为用户的留存率和页面加载性能息息相关。根据google做出的数据统计，页面访问时长从1s增加到3s，用户跳出率增加32%。

性能优化可以分为两大块，即 加载时的优化 和 运行时的优化，下面看看在这两个阶段分别可以做哪些优化。

1、加载时优化

1）减少HTTP请求和减少HTTP请求大小

 一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等8个步骤。当请求较多时就会严重消耗性能，这就是为什么要将多个小文件合并为一个大文件（如:雪碧图），从而减少 HTTP 请求次数的原因。即使开启了 keep-alive，也会是一个挺大的消耗。而减少每个http请求的大小，比如减少没必要的图片，JS，CSS以及HTML等，对文件进行压缩优化，开启GZIP压缩传输内容。

2）使用服务器端渲染

当客户端渲染时，他是获取 HTML 文件，根据需要 下载 JavaScript 文件，运行文件，生成 DOM，再渲染。这个在无形之中会拖慢我们的性能，也会增加白屏时间，如果使用服务器端渲染，服务端直接返回一整个页面的HTML结构，客户端只需解析 HTML即可。

3）静态资源使用 CDN

CDN就是内容分发网络，它是一组分布在多个不同地理位置的 Web 服务器。我们知道，当服务器离用户越远时，延迟就越高。CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。

4）CSS 写头部，JavaScript 写底部

所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久，那页面白屏时间过长，就会影响用户体验。所以 JS 放在底部，等 HTML 解析完再加载 JS 文件。

       那为什么 CSS 文件还要放在头部？因为先加载 HTML 再加载 CSS，会让用户第一时间看到的页面是没有样式的、“丑陋”的，为了避免这种情况发生，就需要将 CSS 文件放在头部。 另外，JS 文件也不是不可以放在头部，只要给 script 标签加上 defer 或async 属性进行异步下载，延迟执行。

5）字体图标代替图片图标

字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。

6）利用缓存不重复加载相同的资源

     为了避免用户每次访问网站都得请求文件，可以设置缓存减少http请求消耗，根据实际业务确定采取强缓存还是协商缓存。

7）图片优化

     a、图片延迟加载，就是在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片。

     b、降低图片质量，图片100% 的质量和 90% 的质量通常看不出来区别，尤其是用来当背景图的时候。我们可以在用 PS 切背景图时， 将图片切成 JPG 格式，并且将它压缩到 60% 的质量，这样基本看不出来 区别。

     c、利用 CSS3 效果代替图片，有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择 CSS3 效果更好。因为代码大小通常是图片大小的几分之一甚至几十分之一。

     d、使用雪碧图，通过将所有小icon集合到一张大图中，然后通过position控制显示，能有效减少http请求数量，减少网络开销。

     e、使用更高压缩比格式的图片，如：webp，同等图片画质的情况下，高压缩比格式的图片体积更小，能够更快完成文件传输，节省网络流量。

     f、使用MediaQuery 或 srcset根据不同屏幕加载不同大小图片，针对不同的移动端屏幕尺寸和分辨率，输出不同大小的图片或背景图能保证在用户体验不降低的前提下节省网络流量，加快部分机型的图片加载速度，这在移动端非常值得推荐。

     g、使用较小的图片，合理使用base64内嵌图片，在页面使用的背景图片不多且较小的情况下，可以将图片转化成base64编码嵌入到HTML页面或CSS文件中，这样可以减少页面的HTTP请求数。

8）通过 webpack 按需加载代码

        懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加  快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载，因为用户不可能每次都把所有的页面、功能都使用一遍。

9）避免页面中空的href和src

当link标签的href属性为空，或者script、img、iframe标签的src属性为空的时候，浏览器在渲染的过程中还是会把href和src的空内容进行加载，直到加载失败。这样就阻塞了页面中其他资源的下载进程，并且最后加载的内容是无效的，因此要尽量避免。

10）减少页面重定向

       一次重定向大概600毫秒的时间开销，为了保证用户能尽快看到页面内容，尽量避免页面的重定向。

11）静态资源不同域名存放

浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的，因此可以由多个域名的主机来存放不同的静态资源，增大页面加载时资源的并行下载数。

12）使用get请求

POST请求会首先发送文件头，然后发送HTTP正文的数据。两个报文包，而使用GET只需发送头部，所以在拉取数据时使用GET请求效率更高。

2、运行时优化

1）减少重绘重排

用 JavaScript 修改样式时，最好不要直接写样式，而是替换 class 来改变样式。再一个就是，如果要对 DOM 元素执行一系列操作，可以将 DOM 元素脱离文档流，修改完成后，再将它带回文档。推荐使用隐藏元素（display:none）或文档碎片，都能很好的实现这个方案。

2）使用事件委托

       事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术， 使用事件委托可以节省内存。因为在页面上每挂载一个函数，就需要在内存上开辟一块空间，页面的事件挂载数量直接影响页面的性能。

3）if-else 对比 switch

     当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。不过，switch 只能用于 case 值为常量的分支结构，而 if-else 更加灵活。

4）不要覆盖原生方法

     无论你的 JavaScript 代码如何优化，都比不上原生方法。因为原生方法是用底层语言写的，并且被编译成机器码，成为浏览器的一部分。当原生方法可用时，尽量使用它们，特别是数学运算和 DOM 操作。

5）降低CSS 选择器的复杂性

     浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。所以，尽可能的降低CSS 选择器的复杂性。

6）使用 flexbox 布局

        在早期的 CSS 布局方式中我们能对元素实行绝对定位、相对定位或浮动定位。而现在，我们有了 flexbo布局方式，它比起早期的布局方式来说更有优势，那就是性能比较好。不过 flexbox 兼容性还是有点问题，不是所有浏览器都支持它，所以要谨慎使用。

7）用 transform 和 opacity 属性更改来实现动画

     在 CSS 中，transforms 和 opacity 这两个属性更改不会触发重排与重绘，它们是可以由合成器单独处理的属性。

 

 

ps：学习成长过程的简单记录，如有不恰当之处，欢迎交流！