前端性能优化

1.网络请求

DNS 查询优化

• 减少请求域名数量

减少请求数

• 合并文件 css
• 合并 js

• Sprites（精灵图）

  
  
  spirits.png
  
  
  spirit.png

• 小图标进行 base64转换

减小请求体积

• 压缩 HTML CSS JS

• 浏览器同域并发限制（增加请求域名量）

• Cookie 隔离

  本域.png

  非本域.png

非本域图片请求头中默认携带的无用信息数量明显少了很多

• 开启gzip
• 使用更小体积的图片（svg, webp）
• 减少cookie大小

2.静态资源

懒加载

• vue 路由懒加载
• 图片懒加载

预加载

• 预加载相关资源
• 公共数据抽离，缓存

3.首页渲染

减少等待时间

• 页面占位符
• 预览图片

减少使用拖慢页面的元素

• iframe标签
• eval
• @import

非当前页面元素在渲染完页面后加载

• 埋点
• 图片预渲染
• 相关页面预渲染

4.页面交互

减少操作页面的次数

• 合并修改页面的操作
• 合并css修改
• 采用更合适的事件绑定模式

减少重绘回流范围

• 避免页面跳转
• 只更新相关元素