前端性能优化

1.减少HTTP请求

一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。

2.使用http2

http2相比http1有以下优点
1.解析速度更快。服务器解析 HTTP1.1 的请求时，必须不断地读入字节，直到遇到分隔符 CRLF 为止。而解析 HTTP2 的请求就不用这么麻烦，因为 HTTP2 是基于帧的协议，每个帧都有表示帧长度的字段
2.多路复用。
3.首部压缩。HTTP/2 在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键－值对，对于相同的数据，不再通过每次请求和响应发送。
4.服务器推送。HTTP2 新增的一个强大的新功能，就是服务器可以对一个客户端请求发送多个响应
5.优先级
6.流量控制。由于一个 TCP 连接流量带宽（根据客户端到服务器的网络带宽而定）是固定的，当有多个请求并发时，一个请求占的流量多，另一个请求占的流量就会少。流量控制可以对不同的流的流量进行精确控制。

3.使用服务端渲染

客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。
服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。
优点：首屏渲染快，SEO 好。
缺点：配置麻烦，增加了服务器的计算压力。

4.静态资源使用CDN

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

5. 将 CSS 放在文件头部，JavaScript 文件放在底部

所有放在head标签里的css和js文件都会阻塞渲染（css不会阻塞dom解析），如果这些css和js需要加载和解析很久的话，页面就空白了，所以js文件要放到底部。
css为什么放在头部？
先加载HTMl再加载css会让用户第一时间看到的页面是没有样式、为了避免这种情况，就要将css文件放在头部。
js文件加上defer属性就可以了，异步下载，延迟执行。

6.使用字体图标iconfont代替图片图标

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

7.善用缓存，不重复加载相同的资源

为了避免用户每次访问网站都得请求文件，我们可以通过添加 Expires 或 max-age 来控制这一行为。Expires 设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用缓存。而 max-age 是一个相对时间，建议使用 max-age 代替 Expires 。

8.压缩文件

压缩文件可以减少文件下载时间，让用户体验性更好。webpack可以使用：
JavaScript：UglifyPlugin
Css：MiniCssExtractPlugin
Html：HtmlWebpackPlugin

9.图片优化

1.图片懒加载。延迟加载。

·先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。对于图片很多的网站来说，一次性加载全部图片，会对用户体验造成很大的影响，所以需要使用图片延迟加载。

2.响应式图片

响应式图片的优点是浏览器能够根据屏幕大小自动加载合适的图片

3.调整图片大小

4.降低图片质量

5.尽可能利用 CSS3 效果代替图片

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

10.webpack按需加载，提取第三库代码，减少ES6转为ES5的冗余代码

11.减少重排、重绘

12. 使用事件委托

13.避免页面卡顿

目前大多数设备的屏幕刷新率为 60 次/秒。因此，如果在页面中有一个动画或渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致。
其中每个帧的预算时间仅比 16 毫秒多一点 (1 秒/ 60 = 16.66 毫秒)。但实际上，浏览器有整理工作要做，因此您的所有工作需要在 10 毫秒内完成。如果无法符合此预算，帧率将下降，并且内容会在屏幕上抖动。 此现象通常称为卡顿，会对用户体验产生负面影响。
假如你用 JavaScript 修改了 DOM，并触发样式修改，经历重排重绘最后画到屏幕上。如果这其中任意一项的执行时间过长，都会导致渲染这一帧的时间过长，平均帧率就会下降。假设这一帧花了 50 ms，那么此时的帧率为 1s / 50ms = 20fps，页面看起来就像卡顿了一样。

14.使用requestAnimationFrame来实现视觉变化

从第 16 点我们可以知道，大多数设备屏幕刷新率为 60 次/秒，也就是说每一帧的平均时间为 16.66 毫秒。在使用 JavaScript 实现动画效果的时候，最好的情况就是每次代码都是在帧的开头开始执行。而保证 JavaScript 在帧开始时运行的唯一方式是使用 requestAnimationFrame。

function updateScreen(time) {
  // Make visual updates here.
}
requestAnimationFrame(updateScreen);

requestAnimationFrame 的基本思想让页面重绘的频率与这个刷新频率保持同步

15. 不要覆盖原生方法

16. 降低 CSS 选择器的复杂性

17. 使用 flexbox 而不是较早的布局模型

它比起早期的布局方式来说有个优势，那就是性能比较好

18. 使用 transform 和 opacity 属性更改来实现动画

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

检查加载性能

一个网站加载性能如何主要看白屏时间和首屏时间。
白屏时间：指从输入网址，到页面开始显示内容的时间
首屏时间：指从输入网址，到页面完全渲染的时间。

<script>
  new Date() - performance.timing.navigationStart
  // 通过 domLoading 和 navigationStart 也可以
  performance.timing.domLoading - performance.timing.navigationStart
</script>

在 window.onload 事件里执行 new Date() - performance.timing.navigationStart 即可获取首屏时间。

检查运行性能

配合 chrome 的开发者工具，我们可以查看网站在运行时的性能。
打开网站，按 F12 选择 performance，点击左上角的灰色圆点，变成红色就代表开始记录了。这时可以模仿用户使用网站，在使用完毕后，点击 stop，然后你就能看到网站运行期间的性能报告。如果有红色的块，代表有掉帧的情况；如果是绿色，则代表 FPS 很好。performance 的具体使用方法请用搜索引擎搜索一下，毕竟篇幅有限。