前端性能优化方案

1、加载优化

  • 雪碧图
  • 图片、列表的懒加载,路由懒加载
  • 静态资源使用cdn分发网络
  • 异步加载第三方资源
  • 首屏加载,预加载,代码压缩,减少打包的静态资源体积
  • ssr服务器渲染

2、 缓存优化

  • 合理的使用浏览器缓存,强缓存,协商缓存,sessionStorage,localStorage

3、代码优化

  • 减少不必要的请求,删除无用代码
  • 耗时过长的js进程会阻塞主进程,使用web work去处理
  • 避免内存泄露的方式(闭包,定时器,全局变量)
  • style标签放在head中,优先加载样式资源,防止闪屏
  • script标签放在body底部,并异步执行,防止阻塞页面加载

4、减少重绘回流

  • 样式集中改变,好的方式是使用动态 class
  • 使用display: none后元素不会存在渲染树中,在对元素进行操作
  • 通过 documentFragment 创建 dom 片段,在它上面批量操作 dom ,操作完后再添加到文档中,这样只有一次重排
  • 使用 BFC 脱离文档流,重排开销小
  • js的防抖和节流
  • 使用requestAnimationFrame执行动画
  • css3的动画标签加上absolute使之脱离文档流

6、vue 性能优化

  • 图片懒加载: vue-lazyLoad
  • 虚拟滚动
  • 函数式组件
  • v-show/ keep-alive 复用 dom
  • deffer延时渲染组件(requestIdleCallback)
  • 时间切片 time slicing

6、webpack优化

  • 通过webpack对代码进行gzip压缩
  • 通过treeshaking删除无用代码
  • 转换内存小的图片为base64格式等
  • 使用webpack按需加载代码,提取第三方库

7、SEO优化

  • 语义化标签
  • 减少iframe的使用
  • 图片加上alt描述

你可能感兴趣的:(前端,性能优化,javascript)