web前端开发，如何提高页面性能优化？

  • 内容方面
  1. 减少HTTP请求次数
  2. 减少DOM操作
  3. 减少DNS查询
  4. 使用Ajax 可缓存
  • css方面
  1. 把css样式HTML代码页的上端
  2. 从页面中分离css代码，从外部引入
  3. 压缩代码
  4. 不要使用@import
  5. 避免css表达式
  • js方面
  1. 脚本放到HTML代码页底部
  2. 从页面中分离js代码，从外部引入
  3. 压缩代码
  4. 减少对DOM的访问
  5. 移除重复的脚本
  • 图片方面
  1. 优化图片（少用图片用css3新特性代替，使用矢量图代替位图）
    矢量图：图标字体。 位图：GIF、JPG、PNG
  2. 不要在HTML中使用缩放图片
  3. 使用恰当的图片格式
  4. 按照HTTP协议设置合理的缓存
  5. 用css或js实现预加载
  6. WebP图片格式能给前端带来优化
    WebP格式：谷歌开发一种旨在加快图片加载速度的图片格式

更多推荐

web前端开发,如何提高页面性能优化？