前端性能优化（一）雅虎军规

雅虎军规

• 内容主体：

1. 尽量减少HTTP请求数
2. 减少DNS查找
3. 避免重定向
4. 让Ajax可缓存
5. 延迟加载组件
6. 预加载组件
7. 减少DOM元素的数量
   善用css伪类
   按需加载，减少不必要的渲染
   结构合理，语义化标签
8. 跨域分离组件
   分离组件可以最大化并行下载，但要确保只用不超过2-4个域，因为存在DNS查找的代价。
9. 尽量少用iframe
10. 杜绝404

• css部分：

1. 把样式表放在顶部
2. 避免使用CSS表达式
3. 选择<link>舍弃@import
4. 避免使用滤镜

• js部分：

1. 去除重复脚本
2. 尽量减少DOM访问
3. 用智能的事件处理器
   事件委托
4. 把脚本放在底部

   5-6个script请求，每个文件大小gzip后30kb左右

• javascript, css部分:

1. 把JavaScript和CSS放到外面
2. 压缩JavaScript和CSS

• 图片

1. 优化图片
2. 优化CSS Sprite
3. 不要用HTML缩放图片
4. 用小的可缓存的favicon.ico（P.S. 收藏夹图标）

   svg图片的使用；CSS Sprites（雪碧图/精灵图）；tinypngjs（图片压缩工具）

• cookie

1. 给cookie减肥
2. 把组件放在不含cookie的域下

• 移动端

1. 保证所有组件都小于25K
   这个限制是因为iPhone不能缓存大于25K的组件
2. 把组件打包到一个复合文档里

• 服务器

1. Gzip组件
2. 避免图片src属性为空
3. 配置ETags
4. 对Ajax用GET请求
5. 尽早清空缓冲区
6. 使用CDN（内容分发网络）
7. 添上Expires或者Cache-Control HTTP头