第一章：页面渲染优化
1.压缩js｜css｜img静态资源减少http请求，使用体积小第三方库
2.路由懒加载
未开启路由懒加载的话，webpack打包不会按路由拆分js文件，那么首次进入会加载非当前路由资源，影响首屏加载速度
3.非可视区域组件异步动态挂载组件
不加载非可视化区域资源，有利于提升加载速度。如弹窗，非可视化区域组件建议使用动态异步组件挂载
4.非可视化区域图片懒加载
不加载非可视化区域图片，有利于提升加载速度，推荐vue-lazyload
5.使用svg组件替代图片
svg组件是dom结构，比加载图片多发起http请求，性能更好
6.使用BFC
对于动画区域或者更新频率非常快区域，约束为BFC，局部重绘重排提升性能
7.使用虚拟列表
对于数据量大的长列表，往往会出现滚动卡顿；使用虚拟列表按需滚动加载提升性能，推荐使用 vue-virtual-scroll-list
8.使用计算属性computed
9.使用keep-alive
10.使用v-memo
11.使用pwa缓存
启用pwa缓存css｜js｜img静态资源，使用缓存策略优先使用缓存，立即后台静默更新缓存。提升加载性能。
12.生产环境去除console日志打印
第二章：内存优化
1.未使用dom及时手动释放内存
2.定时器，事件监听及时取消释放
为提升性能，当使用事件监听器，加入被动监听属性passive；当属性passive的值为true的时候，
代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动 （passive）监听器。目前Chrome主要利用该特性来优化页面的滑动性能
3.闭包手动释放
4.第三库调用已有api释放内存
项目中使用的第三方库，一般都提供销毁api，在使用过后及时调用销毁api释放内存
第三章：css性能小结
1.使用BFC
对于动画区域或者更新频率非常快区域，约束为BFC，局部重绘重排提升性能
2.使用content-visible+contain-intrinsic-size
设置content-visible：auto，通俗讲是按需渲染可视化区域内容，跳过非可视化区域内容，提升性能
3.实时更新区域避免使用表格table布局
表格布局因为导致大量重绘重排，对于实时数据更新区域要避免使用表格布局提升性能
第四章：高性能js
1.加载和执行小结
js的阻塞特性：当浏览器在执行js代码的时候，不能同时做其他事情
- 把文件放在body标签后面，避免阻塞，
- 合并脚本，减少
<script>标签。 - 采用无阻塞异步下载js。使用script的defer和async属性 异步下载。动态创建script标签和执行代码。
2.数据存取小结
性能问题：一个标识符所在的位置越深，它的读写速度也就越慢。因此，函数中读写局部变量总是最快的，而读写全局变量通常是最慢的。
建议：将全局变量存储到局部变量，加快读写速度。
闭包，原型，嵌套对象。
优化建议：将常用的跨作用域变量存储到局部变量，然后直接访问局部变量。
3.dom操作小结
3.1. dom操作天生就慢，尽量减少dom操作，减少访问dom的次数。
3.2. 使用document.querySelect来做选择器，比其他方式快。
3.3. 使用事件委托来减少事件处理器的数量。
4.算法和流程控制小结
4.1. for、while和do-while循环性能差不多，for-in循环速度只有前面几种类型的1/7，所以尽量避免使用for-in循环，除非你需要遍历一个属性数量未知的对象。
forEach比for慢，如果运行速度要求严格，不建议使用。
4.2. if-else与switch：条件数量越大，越倾向于使用map键值映射
第五章：网络优化
5.1 对于数据量大的报文，采用压缩报文，对于实时推送数据，采用增量推送
5.2 设置 DNS 预解析：
5.2.1 用meta信息设置dns预解析
<meta http-equiv="x-dns-prefetch-control" content="on" />
5.2.2 使用HTML的DNS预解析标签：在页面 header 中使用 link 标签来强制对 DNS 预解析
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
5.2.3 启用http协商缓存
第六章：部署优化
1.nginx启用http2
http2的二进制侦和多路复用，可以突破并发请求
