前端性能优化

134 阅读1分钟

1.合理使用缓存

(1) 强缓存

强缓存主要是采用响应头中的Cache-Control和Expires两个字段进行控制的。
no-cache 告知服务器不直接使用缓存,要向原服务器发起请求
no-store 所有内容都不会被保存到缓存中
max-age 最大过期时间
must-revalidate 当前资源一定是向原服务器请求的

(2) 协商缓存 Etag 随机hash码 last-modified 资源最后更新时间,与服务器的时间做对比

(3) localStorage与sesstionStorage

2.减少ajax请求数

目前基本都是单页面应用,通过redux,vuex等,合理使用状态管理,减少不必要的请求

3.外部css资源或js资源整合

尽可能将外部的css,js代码合并成一个,并通过压缩代码来减小代码体积

4.图片整合

将多张图片整合到一起,通过css来控制显示,以减少请求

5.优化请求的requestBody和responseBody

requestBody只传必须的值,同理responseBody只返回必须的值,无用的值要求后端过滤掉(此条需要一定的与后端撕逼的功底

例如:

原始数据结构

过滤后的数据结构

6.请求合并

对于类似的,或者有依赖绑定关系的请求,要求后端进行合并