前端性能优化之Yahoo军规

一、减少HTTP请求数

• 合并图片
• 合并JavaScript
• 合并CSS

二、使用内容分发网络（CDN）

三、添加Expire/Cache-Control头

• expire存储一个时间值，即过期时间，若没超过过期时间，则继续使用本资源，不发送HTTP请求
• cache-control控制页面的缓存机制

四、启用Gzip压缩

五、将CSS放到页面最上面

• 避免页面出现空白（IE）或闪烁（Firefox等）

六、将script放到页面最下面

七、避免在CSS中使用表达式

• CSS表达式即CSS属性的值，是JavaScript表达式计算的结果

八、将JS和CSS放到外部文件中

• 提高JS和CSS的复用性和可维护性
• 减小HTML页面体积
• 缺点：增加了页面的请求数，可通过缓存优化
• 当灵活变通使用，以下情况适合将JS和CSS放到页面中：
  • 只在当前一个页面中应用，其他页面不会用到
  • 不经常被访问
  • JS和CSS很少

九、减少DNS查询

• 缓存，IE（30m），Firefox和Safari（60s）
• 缓存时间长，减少DNS的重复查找，节省时间
• 缓存时间短，及时检测网站服务器的变化，保证正确性

十、压缩JavaScript和CSS

• 去除不必要的空白、换行、注释
• 简写方法名、参数名压缩js

十一、避免重定向

十二、移除重复的脚步

十三、配置实体标签ETag（Entity Tag）

• 属于HTTP协议，受web服务支持
• 使用特殊字符串来标识某个请求资源版本
• 若ETag一致，则使用本地资源，不再从服务器获取

十四、使用ajax缓存

• post请求不能被缓存，get请求可以缓存