🏒

雅虎前端优化35则

This wiki is built in Notion. Here are all the tips you need to contribute.

1. 内容

1.1 减少/最小化 http 请求

1.2 减少 DNS 查询

1.3 避免跳转

1.4 让 ajax 缓存

1.5 延迟加载组件

1.6 预加载组件

1.7 减少操作 dom 数

1.8 把组件分到不同的域名

1.9 最小化 iframe 的数量

1.10 不要 404

2. 服务器

2.1 使用 CDN

2.2 加Expires或者Cache-Control头部

2.3 使用 Gzip 压缩组件

2.4 实体标记

实体标记(Entity tags,ETag)是服务器和浏览器之间判断浏览器缓存中某个组件是否匹配服务器端原组件的一种机制。

2.5 早一点刷新buffer(尽早给浏览器数据)

2.6 ajax请求用get

2.7 避免空src的图片

3. Cookie

3.1 减少 cookie 大小

3.2 用没有cookie的域名提供组件

4. CSS

4.1 把样式放在顶部

4.2 避免 CSS 表达式

4.3 选择 <link> 而不是 @import

4.4 避免使用(IE)过滤器

5. JavaScript

5.1 把脚本放在底部

5.2 使用外部 JS 和 CSS

5.3 压缩 JS 和 CSS

5.4 删除重复的脚本

5.5 最小化 DOM 访问

5.6 开发聪明的事件处理

6. 图片

6.1 优化图片

6.2 优化 CSS 雪碧图

6.3 不要在 html 中缩放图片

6.4 favicon.ico 小且缓存

7. Mobile

7.1 保持组件小于 25K

7.2 打包组件到一个多部父文档

打包组件到一个多部父文档类似于带附件的邮件。它帮助你在一个http请求中获取多个组件,但注意,iPhone不支持。