前端性能优化有哪些？

做项目时间长了，尤其项目做得越多就会进行思考，有哪些进行优化的地方，一段时间之后回看自己的代码，就会感慨这是我写的代码吗，所有重构，优化，对于代码很重要，结合自己工作经验以及网上查找总结；

1、打包工具webpack，gulp方面：

• 项目工程化，模块化，组件化；
• 升级到新版本，编辑工具提升提供支撑；
• 升级相关插件，旧版本插件很影响性能；
• 资源整合/压缩，拆包，分包，进行按需加载；
• 尽量压缩编译后的js文件体积；
• dll单独处理一些react，vue库；

2、代码优化方面

• 组件封装，代码复用，减少代码冗余；
• 及时释放内存，清理定时器，释放闭包等；
• js减少代码循环，减少dom操作；
• 减少cookie体积；
• html中css放最上面，js加载放最下面；
• css避免使用多层选择器嵌套，抽离公共样式；
• react，vue项目遍历列表时，不适用index作为key，增加列表事件委托；
• react项目按需加载业务模块，拆包；
• 图片懒加载，预加载，分页等等操作；
• stroage灵活运用，localstroage，sessionstroage

3、获取接口，资源方面

• 增加文件服务器，应用服务器与文件服务器分离；
• 减少接口请求数，避免频繁调用接口；
• 合理使用浏览器缓存机制，强制缓存，协商缓存
• 图片等资源适当使用cdn加速；
• 服务端启用gzip压缩，一般默认开启；

 当然优化还有很多方面，我们也应该关注，后续完善；