前端性能优化 - Githubissues

性能优化最核心的部分就是减少请求数量和资源下载量

性能判断指标

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等等，视觉效果更好，支持动画，透明而且占用体积小，这基本就是我们理想中的图片格式，但是遗憾的就是目前的支持情况不太好，可以期待一下。

选择合适的大小，这个很容易明白，就是根据图片在网站中展示的真是大小来进行图片的尺寸更改，因为在一般情况下，设计给我们切得图都是1000 甚至2000像素的，但是在网页中我们可能只展示四五百左右的像素，所以图片尺寸调整也是非常重要的

图片压缩，在照片中会存在一些照片基本信息（例如地理位置，曝光度等等），实际上这些数据对于我们来说是无用的，这一部分数据通常可能有20~30k左右，因此我们可以采用一些工具将这些元数据给去掉。一些图片压缩工具： http://www.verexif.com/en/ https://tinypng.com/

最后就是图片懒加载，这个是非常有用的手段，然后实施起来也很简单，甚至不用我们自己去写js代码。这里主要推荐下面两款图片按需加载的库。 https://github.com/aFarkas/lazysizes https://github.com/tuupola/jquery_lazyload 我们可以先加载一张低分辨率的，然后等图片真正到了可视区域再去加载真实图片。

当然还有一些其他图片优化相关的比如响应式图片，但是由于我还没有真正实践过，所以暂且不谈。

缓存

其实缓存才是性能优化里面最重要的一环，而一般缓存都是需要后端来进行配合。关于缓存相关的请求头 expires: 绝对时间（客户端的时间可能不准确） cache-control: 相对时间 last-modify：服务器端绝对时间（只能精确到1s，如果是在1s之内放生变化，还是会用缓存的） Etag：根据内容生成的一个hash值

优先级 cache-control > expires > etag > last-modify 强缓存 200 from memory from disk
协商缓存 304

离线缓存

这一块应该是PWA相关的知识，离线缓存主要用来提升应用处于离线下的用户体验，但是由于现在还没有实践过，所以就到这了。

性能监控

我们在做性能测试的时候其实我们都是在自己的机器上测试的，但是我们其实并不知道用户所处的真正的环境，那么我们为了获取用户真实的数据我们可以做呢？我们可以通过performance API 写一个性能监控脚本然后将获取到的真实数据上报到我们的服务器上面。

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/

https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing?hl=zh-cn

在这里由于我也没有真正做过，所以不详细讲，大家有兴趣可以参考这篇文章

参考文章

谷歌开发文档-性能优化

djlxiaoshi / blog

前端性能优化 #8