前端页面性能优化

开发

• http combo（js、css、ajax）合并资源请求，减少接口请求
• dns perfetch，尽量减少dns域名数量，并访问前预解析dns
• 优先首屏渲染，非必须资源延迟加载，包括js、image等
• 使用cdn访问资源

• css

  • css放 </head> 前
  • css减少表达式、@import、通配符等使用
  • 避免位置、大小等会引起 reflow 的操作

• js

  • js放 </body>  前
  • js减少dom访问，合理的事件监听
  • 减少dom层级
  • 逻辑和组件复用，减少代码
• iconfront 减少请求和请求体积
• bundle 公共代码（框架、ui库等）提取，单独引用，减少变更是需要重新下载的代码

编译时

• 混淆和压缩（css、js、html、image）减少体积
• gzip 压缩，减少传输体积
• commons chunk 提取公共代码，减少体积
• image sprite 雪碧图，减少请求
• combine（css、js）合并文件，减少请求
• cdn 域名替换，提升访问速度

服务端

• gzip 压缩，提升资源传输速度

• cache 缓存文件

  • Cache-Control 缓存机制
  • Expires 过期时间，如果 Cache-Control 设置 max-age 将被忽略
  • Etag 标示符，防止空中碰撞
  • Last-Modified 最后修改时间，比较是否一致
• cdn combo 合并资源请求，减少请求
• ajax combo 服务接口请求合并，减少请求
• 减少 cookie 长度
• 禁止 redirect 重定向
• 防止出现 404 请求
• SSL/https