前端性能优化

页面内容

• 减少HTTP请求数
  • 合并javascript、css文件。
  • 使用css sprite(逐步被Icon，svg sprite取代)
• 减少DNS查询
• 避免重定向
  • HTTP重定向通过301/302状态码实现
• 缓存ajax请求
• 延迟加载
  • 非首屏使用的数据、样式、脚本、图片等。
  • 用户交互时才会显示的内容。
• 预先加载
• 减少DOM元素数量
• 划分内容到不同域名
• 尽量减少iframe使用
  • 优点：
    • 可以用来加载速度较慢的第三方资源，如广告、徽章。
    • 可以作安全沙箱。
    • 可以并行下载脚本。
  • 缺点：
    • 加载代价昂贵，即使是空的页面。
    • 阻塞页面load事件触发；
    • 内存问题。
• 避免404错误

服务器

• 使用CDN
• 添加Expires或者Cache-Control响应头
• 启用Gzip
• 配置Etag
• 尽早输出缓冲
• Ajax请求使用GET方法
• 避免图片src为空

cookie

• 减少cookie大小
• 静态资源使用无cookie域名

css

• 把样式表表放在head中
• 不要使用css表达式
• 使用代替@import
• 不要使用filter

javascript

• 把脚本放在页面底部
• 使用外部js和css
• 压缩js和css
• 移除重复脚本
• 减少DOM操作
• 使用高效的事件处理

图片

• 优化图片
• 优化CSS Sprite
• 不要在HTML中缩放图片
• 使用体积小、可缓存的favicon.ico

移动端

• 保持单个文件小于25kb
• 打包内容为分段文档