性能优化方案

2024-08-01  本文已影响0人  bozhao

从流量带宽的角度

单页面/多页面
  1. 减小html模版内无效的标签定义
  2. 尽量使用js对模版内标签的创建和定义
  3. 可以将量最大的页面的静态资源放到本地localstorage
服务端渲染

从加载速度的角度

区分图片大小
  1. base64(不宜多的使用base64,会增加带宽)
  2. cdn
  3. 雪碧图
  4. 图片尽量按照格式区分,不需要png的时候就强制不使用png,建议:jpg,gif
静态资源拆分&合并
http2.0
合并http请求
静态资源不宜过大

从首屏渲染的角度

  1. dll缓存公共js
  2. 择机使用CDN外链
  3. 骨架屏
  4. 首屏渲染的静态资源不宜超过5个
  5. 按需加载,之后的页面一个页面是一个js(异步组件除外:按需)
  6. 静态加速和动态加速,提高异地分发性能

缓存和强缓存&浏览器缓存和CDN缓存

  1. 增量更新和自定义版本更新
  2. chunkhash & contenthash & hash

从代码层面

一个view,大致500行+80列
拆包,异步加载&按需加载
  1. 不是每个页面都需要异步加载
  2. 首屏的使用同步减小http请求
  3. 按需的使用异步减小资源体积
  4. 30K的包和10k的包完全可以合并,而不需要多一次网络请求,更甚者以B为单位的更不需要异步加载和按需加载

接口请求层面

  1. 按需请求
  2. 闲时请求
  3. 预请求quicklink
  4. 首屏渲染的接口可以放在路由层面请求,和view的js同步进行
上一篇 下一篇

猜你喜欢

热点阅读