【前端性能优化见解】

第一章：页面渲染优化

1.路由懒加载

未开启路由懒加载的话，webpack打包不会按路由拆分js文件，那么首次进入会加载非当前路由资源，影响首屏加载速度

2.非可视区域组件异步动态挂载组件

不加载非可视化区域资源，有利于提升加载速度。如弹窗，非可视化区域组件建议使用动态异步组件挂载

3.非可视化区域图片懒加载

不加载非可视化区域图片，有利于提升加载速度，推荐vue-lazyload

4.使用svg组件替代图片

svg组件是dom结构，比加载图片多发起http请求，性能更好

5.使用BFC

对于动画区域或者更新频率非常快区域，约束为BFC，局部重绘重排提升性能

6.使用虚拟列表

对于数据量大的长列表，往往会出现滚动卡顿；使用虚拟列表按需滚动加载提升性能，推荐使用
vue-virtual-scroll-list

7.使用计算属性computed

8.使用keep-alive

9.使用v-memo

10.使用pwa缓存

启用pwa缓存css｜js｜img静态资源，使用缓存策略优先使用缓存，立即后台静默更新缓存。提升加载性能。

第二章：内存优化

1.未使用dom及时手动释放内存

2.定时器，事件监听及时取消释放

3.闭包手动释放

4.第三库调用已有api释放内存

项目中使用的第三方库，一般都提供销毁api，在使用过后及时调用销毁api释放内存

第三章：css性能小结

1.使用BFC

对于动画区域或者更新频率非常快区域，约束为BFC，局部重绘重排提升性能

2.使用content-visible+contain-intrinsic-size

设置content-visible：auto，通俗讲是按需渲染可视化区域内容，跳过非可视化区域内容，提升性能

3.实时更新区域避免使用表格table布局

表格布局因为导致大量重绘重排，对于实时数据更新区域要避免使用表格布局提升性能

第四章：高性能js

1.加载和执行小结

js的阻塞特性：当浏览器在执行js代码的时候，不能同时做其他事情

1. 把文件放在body标签后面，避免阻塞，
2. 合并脚本，减少<script>标签。
3. 采用无阻塞异步下载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" />

第六章：部署优化

1.nginx启用http2

http2的二进制侦和多路复用，可以突破并发请求

2.压缩js｜css|img资源；开启gzip压缩，开启http协商缓存

3.启用CDN加速