改善 web 性能的措施

Content

1. 尽可能的减少HTTP请求

减少组件(图片，脚本，样式表、Flash等）的数量，并由此减少http请求的数量。

• CSS Sprites：

将多个图片合并到一个单独的图片中，再结合css的background-position属性一起使用，通过合并图片减少http请求。

适用场景：若需要在页面中为背景，按钮，导航栏，链接等提供大量图片，可使用CSS Sprites。

• 合并脚本和样式表：

若不同页面需要不同的脚本，可能脚本合并的组合数会比较多。

2. 使用 CDN（内容分发网络）

• DNS缓存：

在用户请求了一个主机名后，DNS信息会留在操作系统的DNS缓存中，之后对于该主机名的请求将无需进行过多的DNS查找。

• 通过使用keep-Alive和较少的域名来减少DNS查找：

keep-Alive通过重用现有连接避免了重复的DNS查找，减少唯一主机名的数量可以减少DNS查找。

• 建议：

可以将组件分别放在至少2个，但不要超过4个主机名下，这是在减少DNS查找和允许高度并行下载之间作出的很好的权衡。

3. 避免重定向

重定向会延迟整个HTML文档的传输，在HTML文档到达之前，页面中不会呈现出任何东西，也没有任何组件会被下载。

4. 使 AJAX 可缓存
5. 压缩组件（使用gzip编码压缩http响应包）

压缩HTML文档、样式表和脚本。

压缩成本：服务器端会花费额外的CPU周期来完成压缩，客户端要对压缩文件进行解压缩。

6. 预加载组件
7. 减少 DOM 元素的数量
8. 将组件分散在多个域
9. 最小化 iframe 框架的数量
10. 避免 404 状态码的出现
11. 减少 DNS 查找

运用浏览器缓存。

Server

1. 使用 CDN
2. 添加 Expires 或 Cache-Control 头
3. 使用 gzip 压缩组件
4. 配置实体标签 Etags
5. 尽早释放服务器缓存
6. 使用 get 发送 Ajax 请求
7. 避免出现空的 img src
8. 使用 AJAX 缓存

• 分批加载
• 局部更新

Cookie

1. 减少 cookie 的尺寸

cookie存放在本地，但是每次发送服务器请求的时候都会被发送到服务器端。

2. 针对 Web 组件使用域名无关性的 Cookie

CSS

1. 把 CSS样式表用 link导入放在顶部

避免页面出现空白或者闪烁。

2. 避免使用 CSS 表达式
3. 优先选择用 link 导入CSS样式而不是 @import
4. 避免使用过滤器

JavaScript

1. 把 JavaScript 放在底部
2. 使用外部的JavaScript和CSS

• 提高组件的重用率。
• 减小了页面体积。
• 提高了组件的可维护性。

写在页面内的情况：

• 只应用于一个页面的时候。
• 不经常被访问到的页面。
• 脚本和样式很少的情况下。

3. 精简 JavaScript 和 CSS

• 去除不必要的空格符、格式符、注释符。
• 简写方法名、参数名压缩 JS脚本。

4. 移除重复的脚本
5. 最小化 DOM 访问
6. 开发智能事件处理程序

Images

1. 使用比较小的图片
2. 使用 CSS Sprites（合图）
3. 不要在 HTML 中使用 图片的缩放方法

会调用浏览器本身的一些渲染引擎。

4. 让图标资源小一些并使其可缓存