前端性能优化

原理

什么是前端性能？

想要做前端的性能优化，首先要知道什么是前端的性能，

前端性能，就是评估一个网站做的好还是不好，可以从多个方面去评估：页面流畅度，响应速度，用户交互是否友好等

浏览器是如何工作的

前端项目是离不开浏览器的，在浏览器输入一个URL地址，到在浏览器视窗中显示出这个网址所对应的页面，以及用户的一些交互操作过程。

所以，了解浏览器是如何工作的对于了解前端性能是个至关重要的事情。

那么从在浏览器中输入一个网址，到浏览器把这个页面展示出来，这中间都经历了哪些事情呢？

1. 域名解析，把域名解析成对应的IP地址，这一步是由DNS服务器来完成的

2. 建立TCP链接

3. 发送HTTP请求

4. 服务器会处理请求

5. 返回响应的结果

6. 关闭TCP链接

7. 浏览器解析html生成DOM树。解析css，生成css规则树。生成渲染树

8. 浏览器进行布局渲染

影响前端性能的因素

从以上浏览器的工作原理可以分析出来，有哪些因素会影响前端的性能：

1. 延迟/RTT

   从发起一个请求到服务器返回中间等待的时间称作延迟

2. 带宽

   我们从服务器下载一个文件的时间 = 文件的大小 / 带宽。

   而我们的浏览器或者操作系统，有一套复杂的方法来控制允许使用的实际带宽大小

3. 静态资源

   图片、视频、css、js文件，这些文件下载和解析的时间

4. DNS解析

   域名解析耗费的时间

5. TCP握手

   三次握手，四次握手耗费的时间

6. SSL握手时间

工具

合理的使用工具可以帮助我们做前端的性能优化

性能检测工具

首先要知道网站的性能瓶颈或突破口在哪里，找到问题，才能找到解决方法

1. PageSpeed Insights，专注于线上环境

2. Chrome User Experience Report，专注于线上用户的使用数据

3. chrome search console Speed Report (beta)

4. Fireperf

确定性能优化的方向

1. audit panel

   给开发者使用的，对网站的项目进行一个跑分，在Chrome浏览器的工具面板里面，执行之后会生成一个报告，包含网站的一些运行情况，帮组定位网站有哪些性能优化的点

2. performance budget

   可以和webpack或者lighthouth一起使用

3. profile panel

   给开发者使用的，在Chrome浏览器的工具面板里面

4. 持续监控

方法

优化性能方法都是围绕着，上面的影响性能的因素来解决的

CDN优化

缓存

合理使用浏览器的缓存策略

优化带宽的使用

1. 延迟加载

   懒加载：图片懒加载

2. 提前加载

   提前加载一些关键的资源，这些资源的加载情况直接影响到网页能否使用。

   preload提前加载资源、prefetch可以让浏览器在空闲时间提前加载后面要用到的资源

3. 不加载

   利用缓存，减少二次下载

资源文件

通过减少资源文件的体积，来进行资源文件的请求返回速度。

1. broti压缩

2. http2.0头文件压缩

3. minification 牺牲代码的可读性，减少体积

4. tree shaking 摇树优化

5. 移除一些体积非常大，但是很少使用到的库

6. webpack 有一些构建的时候可以使用的压缩工具

DNS优化

1. 减少domain数量，减少DNS解析的数量

2. DNS prefetch 在浏览器空闲的时候去解析一下这个DNS

减少TCP开销

1. 减少多次重定向，页面的重定向是非常昂贵的

   使用SPA减少重定向

2. 使用CDN

使用HTTP2.0