性能优化原则
- 多使用内存缓存
- 减少CPU计算， 减少网络加载耗时
- 空间换时间
如何入手
- 让加载更快
- 让渲染更快
让加载更快
- 减少资源体积了；压缩代码（前端压缩打包， 服务端gzip）
- 减少访问次数，合并代码
- ssr服务端渲染
- 使用更快的网络cdn
- 使用缓存（下次进来会更快， 也不是前端能配置的）
让渲染更快
- css放在head， js放在body最下面
- 图片懒加载
- 图片压缩
- 图片转webp格式
- 减少layout（重排; 减少dom查询， 新增删除获取属性等等）
为什么感觉自己啥也没做性能指标基本还是能够达标？
1、代码压缩是优化时间比较多的， 基本都已经配置过了；
2、说白了就是减少http请求， http请求10个也就在10sm级别左右的差距
3、ssr的渲染速度觉得是可以提前几百毫秒的，几百毫秒就已经很多了， 各种小点累积如果能破1秒就能让用户明显感觉到
4、cdn是提升访问速度的， 基本也都配置过了
5、css放在head， js放在body最下面基本默认配置也是这样的
上诉这些基本正常项目都默认配置了， 也都是常规配置就感觉啥也没做
图片优化
图片最为页面大资源的一类， 加载快慢能让用户直接感觉出来， 是重要的优化一环
-
图片懒加载, 主要针对图片资源非常多的网址， 减少不必要的请求， 减轻服务端压力， 比如：电商大促
-
图片压缩：现在手机都是过亿像素， 拍个图片都是M作为单位， 动不动过10M， 这种图片展示给用户肯定慢， 通常上传需要做一次压缩， 或者限制文件大小上传让用户自己压缩了上传（自己压缩上传其实是一个很不好的体验， 让人不舒适的体验也是优化的一环， 特别是C端，得把用户供着， 你的体验不好，就用其他家的了）， 展示的时候调用阿里云的压缩（公司基本有专门的存图片文件的服务， 基本都提供压缩， 注意大的size压缩会失败， 具体多少没关注， 反正十几M的我失败过）
-
图片转webp也是减少图片体积的一种方式（阿里云也是提供了这种服务的）
