性能优化最核心的部分就是减少请求数量和资源下载量
性能判断指标
image
DnsTime:DNS解析时间 （选择合适的DNS服务商 DNS预解析）
ConnectTime：tcp连接时间 （忽略）
SSLTime：SSL安全连接时间 （忽略）
RequestTime：发送请求所用时间
FirstByteTime(TTFB)：“最初的网络请求被发起”到“从服务器接收到第一个字节前”所花费的毫秒数（优化后端性能，购买更好的服务器内存、CPU、带宽等等）
ReponseTime 资源下载时间
性能测试工具
在这里推荐几款性能测试工具
性能优化手段
文本文件优化
首先从减少资源大小方面入手，首先就是我们的代码层面竟可能的精简
- 比如公共代码的提取（通常在项目中我们会把代码分成业务代码，业务代码中的公共代码和第三方公共库）当然这些都是Webpack的code slipt功能来做的
- 只加载我们需要的代码（treeshaking）,例如我们在使用lodash等等库的时候，我们往往只用到了部分功能，那么我们可以只需要加载我们需要使用的代码片段。首先是从代码源上面较少代码的体积。
- 压缩代码（去掉注释，空格，使用更短的变量名等等），当然这些webpack插件已经帮我们实现好了
- 服务端开启gzip压缩，我们可以通过判断
Content-Encoding这个响应头，当然我们也可以直接通过这个在线工具。
到了现在我们的代码在大小方面或许没有多少优化空间了，但是最后还讲一点，就是有时候在引入库的时候，我们首先要思考是不是非得要引入这个库，因为有可能我们只用到了一点点，比如jQuery，在这里我推荐一个网站也许你并不需要jQuery
接下来就是从减少请求数量开始，我们常见的方式就是代码的合并，例如我们可能在webpack中会有一个bundle专门用来存放第三方库的代码，而不是每个库我都给他打包成一个bundle，实际也是为了减少请求数。
图片优化
图片优化我们可以主要从如下四个方面：
- 1 选择正确的格式
- 2 选择合适的大小
- 3 去除元数据适当压缩
- 4 图片懒加载
首先我们从图片格式说起，我们最常见的格式就是PNG，JPG和Gif。对于gif我们都知道是在有动画效果的时候我们去使用，但是对于png和jpg我们该什么场景下去使用。首先png是一种无损格式，支持半透明，一般图片占用体积非常大，可能动不动就上M了。jpg是一种有损格式，不支持半透明效果。所以在一般情况下我们建议在没有透明效果的要求下，我们都应该使用jpg格式。因为在同等视觉效果下，jpg可能是png的一半体积。当然现在还有一些其他更现代化的格式例如webp等等，视觉效果更好，支持动画，透明而且占用体积小，这基本就是我们理想中的图片格式，但是遗憾的就是目前的支持情况不太好，可以期待一下。
image
选择合适的大小，这个很容易明白，就是根据图片在网站中展示的真是大小来进行图片的尺寸更改，因为在一般情况下，设计给我们切得图都是1000 甚至2000像素的，但是在网页中我们可能只展示四五百左右的像素，所以图片尺寸调整也是非常重要的
图片压缩，在照片中会存在一些照片基本信息（例如地理位置，曝光度等等），实际上这些数据对于我们来说是无用的，这一部分数据通常可能有20~30k左右，因此我们可以采用一些工具将这些元数据给去掉。一些图片压缩工具：
http://www.verexif.com/en/
https://tinypng.com/
最后就是图片懒加载，这个是非常有用的手段，然后实施起来也很简单，甚至不用我们自己去写js代码。这里主要推荐下面两款图片按需加载的库。
https://github.com/aFarkas/lazysizes
https://github.com/tuupola/jquery_lazyload
我们可以先加载一张低分辨率的，然后等图片真正到了可视区域再去加载真实图片。
当然还有一些其他图片优化相关的比如响应式图片，但是由于我还没有真正实践过，所以暂且不谈。
更多关于图片优化内容可以参考这篇文章：
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/
缓存
其实缓存才是性能优化里面最重要的一环，而一般缓存都是需要后端来进行配合。
关于缓存相关的请求头
expires: 绝对时间 （客户端的时间可能不准确）
cache-control: 相对时间
last-modify：服务器端绝对时间 （只能精确到1s，如果是在1s之内放生变化，还是会用缓存的）
Etag：根据内容生成的一个hash值
优先级 cache-control > expires > etag > last-modify
强缓存 200 from memory from disk
协商缓存 304
离线缓存
这一块应该是PWA相关的知识，离线缓存主要用来提升应用处于离线下的用户体验，但是由于现在还没有实践过，所以就到这了。
性能监控
我们在做性能测试的时候其实我们都是在自己的机器上测试的，但是我们其实并不知道用户所处的真正的环境，那么我们为了获取用户真实的数据我们可以做呢？我们可以通过performance API 写一个性能监控脚本 然后将获取到的真实数据上报到我们的服务器上面。
image
var pageNav = performance.getEntriesByType("navigation")[0];
var dnsTime = pageNav.domainLookupEnd - pageNav.domainLookupStart;
// Request plus response time (network only)
var totalTime = pageNav.responseEnd - pageNav.requestStart;
// Response time only (download)
var downloadTime = pageNav.responseEnd - pageNav.responseStart;
// Time to First Byte (TTFB)
var ttfb = pageNav.responseStart - pageNav.requestStart;
参考链接；https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/
在这里由于我也没有真正做过，所以不详细讲，大家有兴趣可以参考这篇文章
网友评论