性能优化对于前端同学来说是非常重要的一个技能点，这里对性能优化涉及到的知识点做了一个小小的总结。标题名为'不完全概要’是因为，性能优化的手段层出不穷，本文列举的并不完全，有些方向比较大的点这里也不会深入探究。本文分性能指标、优化措施、调优工具三个方向列举了一些概要性的知识点，而实际上每一个知识点背后还隐藏着非常非常多的信息，等着大家去挖掘。

如有知识点不准确或其它建议、意见，欢迎沟通。

性能指标

首字节时间

文档返回第一额字节的时间，也叫ttfb时间，反应后端响应性能及网络状况指标。

白屏时间

用户看到页面展示第一个元素的时间，该指标意义不大。

首屏时间 Speed Index

用户从点开链接到看到第一屏内容所需要的时间。这个指标是我们最关心的，时间越短，用户留存的意愿越高，而如果时间越长，用户留存度越低，并呈指数式下降。一般我们希望首屏时间控制在1s以内，才能提供较好的用户体验，当然这个时间越短越好，最好是用户完全感受不到页面的加载过程。影响首屏时间的主要因素包括前端资源的加载速度、服务器响应速度、js执行速度。

FPS

1s内页面渲染的帧数，60fps为佳，fps越高，页面约流畅，反之越卡顿。

指标计算

可以通过浏览器提供的performance Api来获取，具体实现如下：

// TTFB 读取页面第一个字节的时间
times.ttfbTime = t.responseStart - t.navigationStart;
// 白屏时间
times.blankTime = (t.domInteractive || t.domLoading) - t.fetchStart;
// 首屏时间
times.domReadyTime = t.domContentLoadedEventEnd - t.fetchStart;
// fps
// chrome开发工具可以直接查看，也可以通过raf来计算，或者是最新的frameTiming API

参考阅读： Frame Timing 如何监控网页的卡顿

优化措施

资源优化

减少资源数

因为浏览器的限制，同一域名下允许并行加载的资源数受到了限制，一般是6个请求，这也是出于对浏览器进程的保护的一个措施。过多的资源会阻塞后续资源无法第一时间执行，导致核心流程被挂起。常见的处理方式有合并js、合并接口、图片懒加载、图片转base64等。

减小资源体积

在带宽固定的情况下，资源体积越小，页面加载的速度越快。常见的处理方式有：混淆压缩、图片压缩、tree shaking、gzip压缩等。

CDN加速

cdn的目的有两个，一是就近缓存资源加载，避免直接请求服务器；二是cdn域名越多，可并行加载的资源数也就越多。

加载顺序优化

由于js的单线程设计，直接影响页面展示的资源应优先加载。资源顺序一般是css > 业务js > 字体文件 > 图片 > 非业务js。

按需加载

模块按需加载：

如组件库按需加载，只加载使用到的组件；
```
import { Button } from 'elementUi';
Vue.use(Button);
```

路由按需加载：

单页应用通过import动态加载路由资源，可以减少首页的资源体积，从而达到首屏优化的效果；

const Index = () => import('.\/index.vue');
export default [
    {
        path: 'index',
        name: 'index',
        component: Index
    }
]

预加载

DNS预解析
使用preload预加载必定需要的资源
使用prefetch预加载可能需要的资源
客户端预加载webview技术
客户端动态下发资源预加载技术

缓存优化

http缓存

memory cache：缓存在内存中，出现场景为preloader 和 preload，用于保证同一个页面的相同资源不会重复请求。不关闭tab，直接F5，就是这种情况，读取速度比disk cache更快。
disk cache：缓存在硬盘中，可以跨站点、跨会话使用，硬盘空间不足时，浏览器会清理掉较老的缓存。
强缓存：可以通过Expires来设置缓存到期时间，设置的是绝对时间，可以通过更改客户端时间来避开过期，可能与服务端时间不一致。也可以通过cache-control：max-age=3600来设置相对缓存时间。一般在nginx层，我们会给html文件设置为no-cache，给其它静态文件设置一小时、一天、30天甚至更长的时间，而通过构建工具做版本控制来更新缓存。
协商缓存：当强缓存失效时，通过对比客户端缓存标识和服务端对比，如果文件未更新，则返回304，可以继续使用缓存。如果失效，则重新下载文件，并更新缓存文件及新的缓存规则。标识是Last-modify和if-modify-since 另一组是Etag和if-none-match，Etag是根据文件内容生成的hash，则会更准确。

浏览器数据存储

业务中，可以将需要用到的数据存储到浏览器中，在下次使用时优先使用。存储方式包括：localStorage、sessionStorage、IndexdDb、Web SQL、Cookies，不同数据存储的特点、应用场景、兼容性略有不同。

编码优化

通过提高编码质量以最优代码提供最好的用户体验，一般包括以下几点：

避免内存泄漏，避免高内存、高cpu运行
避免逻辑错误阻塞流程
避免浏览器兼容性导致的问题
避免页面崩溃、卡顿、不可用
减少重排、重绘导致的页面跳动
通过节流、防抖处理高频操作
避免高频、高耗操作，如dom操作
使用requestAnimationFrame设计动画
尽量使用css而不是js，因为css渲染进程是独立的，不会阻塞js执行
……

新技术优化

SSR：也叫服务端渲染，主要解决单页面应用带来的seo不友好问题，以及白屏时间较长的问题。
PWA：也叫渐进式网页应用，PWA通过引入 Service Worker 来解决离线存储和消息推送的问题。

调优工具

Chrome Audits

使用lightHouse生成 web 性能报告，给出了当前网页的性能指标评估和优化建议。
Chrome Performance

提供更全、更细的性能分析报告。
前端监控平台

提供丰富的性能指标统计、错误上报、用户行为分析等。

性能优化不完全概要