你在前端有做过哪些性能优化

web性能优化辅助工具
Lighthouse
01:加载优化
加载优化
压缩合并
代码分割，可以基于路由或动态加载
第三方模块放在CDN
大模块异步加载，例如：Echarts，可以使用require.ensure，在加载成功后，在显示对应图标
小模块适度合并，将一些零散的小模块合并一起加载，速度较快
可以使用pefetch预加载，在分布场景中非常适合
02：图片优化
小图使用雪碧图，iconFot,base64
图片使用懒加载
webp代替其他格式
图片一定要压缩
可以使用的img的srcset，根据不同分辨率显示不同尺寸图片，这样既保证显示效果，又能节省宽带，提高加载速度
03：CSS优化
1.css写在头部
2.避免css表达式
3.移除空置的css规则
4.避免行内style样式
04.js优化
1.js写在body底部
2js用defer放在头部，提高加载时间，又不阻塞dom解析
3.script标签添加crossorigin，方便错误收集
05.渲染优化
06：首屏优化
07：打包优化