前端性能优化有哪些？

前端有哪些性能优化？
前端性能优化分两部分
1、加载性能优化
2、渲染性能优化
一、加载性能优化
本质：
　　• 1、减少请求次数；
　　• 2、减少请求资源的大小；
　　• 3、网络优化；
1、 减少请求次数方式
     1）图片资源
　　○ CSS雪碧图：把一些常用、重复使用的小图合并成一张大图
　　○ 图片懒加载：
　　   利用css的loading属性。视区外图片先不加载，当进入视区或者进入视区之前的某个位置加载。
　　○ 使用字体图标 iconFont
　 2）合理利用缓存
    3）合并CSS文件和JS文件
         减少HTTP请求数量和提高网站加载速度
2、减少资源大小
    1）资源压缩
         压缩图片；使用webp代替其他格式；图片使用懒加载；可以使用img的srcset，根据不同分辨率显示不同尺寸图片
    2）Tree Shaking技术
         Tree Shaking: 无用导出将在生产环境进行删除，到达减少资源体积的效果；
3、网络优化
    1）CND：就近原则
    2）Http2.0
4、其他
    ○ 路由懒加载
    ○ 第三方组件按需加载

二、渲染性能优化

    1）资源加载优先级控制
　　• css引入放在head标签尾部，script脚本防砸body标签尾部；
　　• 脚本与DOM/其它脚本的依赖关系很强：对<script>设置defer
　　• 脚本与DOM/其它脚本的依赖关系不强：对<script>设置async
　　• preload 加载当前路由必需资源，优先级高，一般对于 Bundle资源使用preload；
　　• refetch 优先级低，在浏览器 idle 状态时加载资源，一般用以加载非首页资源；
　　• preload/prefetch
           preload/prefetch 可控制 HTTP 请求优先级，从而达到关键请求更快响应的目的；
           dns-prefetch，可对主机地址的 DNS 进行预解析。
       • js和css的引入位置/script类型设置
    2）减少重排重绘
         • 减少页面DOM操作；
         • 对 DOM 元素执行一系列操作，可以将 DOM 元素脱离文档流，修改完成后，再将它带回文档。例如：隐藏元素（display:none）、文档碎片（DocumentFragement）等（虚拟dom）；
         • 用 JavaScript 修改样式时，最好不要直接修改单个样式属性，而是替换 class 来改变样式；
         • 合理使用防抖和节流；
    3）利用缓存
        • 页面缓存（keep-alive），接口缓存（减少数据更新导致的页面刷新）
    4）Web Worker
       • 用于那些处理纯数据，或者与浏览器 UI 无关的长时间运行脚本；

三、vue优化
    1) 路由懒加载组件
    2) keep-alive 缓存组件，保持原显示状态
    3) 列表项添加key，保证唯一
    4) v-if 和 v-for 不要用在一个标签上，它会在每个项上进行 v-if 判断