前端性能优化方案

186 阅读1分钟

1,前端性能优化

减少数据请求

  • js文件合并压缩
  • css文件合并压缩
  • 使用合适尺寸的图片,不要缩放图片
  • 使用雪碧图
  • 使用字体图标
  • 使用图片懒加载
  • 小图片使用base64 图片
  • 使用页面缓存
  • 音频视频取消预加载

代码书写习惯

  • 减少操作DOM(减少DOM的回流和重绘)使用数据驱动的框架
  • 对于动画来说,能用css解决的久不用js(能用transform解决 的不用css样式,transfrom:translateZ(0) 开启硬件加速,不会引发回流,或者使用定位的元素也可以,脱离文档流,不会对其他元素在成影响)能用requestAnimationFrame解决的久不用定时器(requestAnimationFrames 在浏览器休眠状态会停止,减少不必要的损耗
  • 避免使用iframe(它会嵌套页面,父级页面渲染的时候把子页面也渲染了
  • 尽可能使用事件委托
  • 避免使用死循环和循环嵌套循环
  • 低耦合高内聚,尽可能实现代码封装,减少冗余代码
  • 项目中尽可能使用异步编程来模拟多线程,避免主线程阻塞
  • 尽量减少css表达式的使用,如果必须使用,尽量做到读写分离
  • 函数防抖和函数节流
  • 减少使用filter滤镜的使用
  • 尽量减少css选择器的层级
  • 不要使用table布局
  • 手动回收堆栈内存(赋值为null)
  • 减少使用eval(主要原因是防止代码压缩时候由于符号书写不规范导致错误)
  • 在js中减少闭包的使用(容易造成内存泄漏) 开启gzip压缩