前两天被人问到前端的优化有哪些，我支支吾吾也只能说出两三条，表示很惭愧。

说到前端优化的必修课，那就是Yahoo的前端优化性能规则，里面都是别人的经验总结，有 35 条之多，这是先分类在文章最后，之后会个别阐述我针对最初的 14 条，借鉴别人的翻译成果和我自己的解读。

35条分类

标注 ＊ 号的是最初的14条

  • 内容
    • 减少HTTP请求 *
    • 减少DNS查询 *
    • 避免重定向 *
    • Ajax缓存化 *
    • 后载入组件
    • 预先载入组件
    • 减少DOM元素数量
    • 跨域分离组件
    • 最少化iframe
    • 避免404错误
  • 服务端
    • 使用CDN（内容分布网络） *
    • 增加过期时间或者可控制缓存的请求头 *
    • 使用Gzip组件 *
    • 配置ETags（实体标签） *
    • 提前刷新缓冲区
    • Ajax请求使用Get方法
    • 避免空的图片src
  • Cookie
    • 减少Cookie大小
    • 为组件使用无Cookie域
  • CSS
    • 将样式放在顶部 *
    • 避免使用CSS表达式 *
    • 选择而不要@import
    • 避免过滤器
  • JavaScript
    • 将JS放在底部 *
    • 使用外部的JS和CSS *
    • 压缩JS和CSS *
    • 去掉重复的脚本 *
    • 最小化Dom读取
    • 开发灵活的事件处理器
  • 图片
    • 优化图片
    • 优化CSS Sprites（CSS精灵）
    • 在HTML中不要缩放图片
    • 制作小的和可缓存的favicon.ico
  • 移动
    • 组件维持在25kb以下
    • 将组件放入复合的文档中