网页性能优化

116 阅读1分钟

网络加载

  • DNS预解析
  • 资源预加载
  • 使用CDN资源
  • js资源按需加载
  • 对js、css进行压缩
  • 通过link方式加载,而不是@import

渲染性能

  • css少使用嵌套
  • 少使用标签选择器和通配符
  • 不滥用高消耗样式,如box-shadow、border-radius、filter
  • 减少页面重排重绘
  • 简单动画尽量使用transform,较复杂动画可用css帧动画
  • 利用setTimeout代替setInterval
  • 使用雪碧图
  • 图片懒加载
  • 压缩图片
  • 处理长列表或大量DOM元素时,不要绑定太多的事件监听