前端优化法则
前两天被人问到前端的优化有哪些，我支支吾吾也只能说出两三条，表示很惭愧。
说到前端优化的必修课，那就是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以下
- 将组件放入复合的文档中