减少HTTP请求数—前端性能优化 1

　　雅虎前端优化总结的35 条前端性能优化军规第一条：减少 HTTP 请求数。Web 前端 80% 的响应时间花在图片、样式、脚本等资源下载上。最直接的方式是减少页面所需资源，但并不现实。所以，减少 HTTP 请求数主要的途径是：

合并 JS/CSS 文件

服务器端（CDN）自动合并，基于 Node.js 的文件合并工具，通过把所有脚本放在一个文件中的方式来减少请求数。

最好的优化是做到页面只加载一个 CSS 和一个 JS。

使用 CSS Sprite

将背景图片合并成一个文件，通过 background-image 和 background-position 控制显示

行内图片（Base64 编码）

使用 Data URI scheme 将图片嵌入 HTML 或者 CSS 中；或者将 CSS、JS、图片直接嵌入 HTML 中，会增加文件大小，也可能产生浏览器兼容及其他性能问题。

减少页面的 HTTP 请求数是个起点，这是提升站点首次访问速度的重要指导原则。

 

前端性能优化系列教程：

减少HTTP请求数—前端性能优化 1

使用CDN(内容分发网络)—前端性能优化 2

Expires 或 Cache-Control 响应头—前端性能优化 3

使用 Gzip 压缩—前端性能优化 4

将 CSS 放在页面顶部—前端性能优化 5

将 JavaScript 放在页面底部—前端性能优化 6

避免使用 CSS 表达式—前端性能优化 7

使用外部 JavaScript 和 CSS—前端性能优化 8

减少 DNS 查询—前端性能优化 9

压缩 JavaScript 和 CSS—前端性能优化 10

避免 301/302 重定向—前端性能优化 11

移除重复的 JavaScript 脚本—前端性能优化 12

设置 ETags 来控制缓存—前端性能优化 13

缓存 Ajax 请求—前端性能优化 14

尽早输出（flush）缓冲—前端性能优化 15

Ajax 时尽量使用 GET 方法—前端性能优化 16

延迟加载—前端性能优化 17

预加载—前端性能优化 18

减少 DOM 元素数量—前端性能优化 19

使用多个域名—前端性能优化 20

避免使用 iframe—前端性能优化 21

杜绝 404—前端性能优化 22

给 Cookie 减肥—前端性能优化 23

使用不带 Cookie 的域名—前端性能优化 24

减少 DOM 操作—前端性能优化 25

使用高效的事件处理—前端性能优化 26

使用<link>替代@import—前端性能优化 27

不要使用 filter—前端性能优化 28

优化图片—前端性能优化 29

优化 CSS Sprite—前端性能优化 30

不要在 HTML 中缩放图片—前端性能优化 31

使用体积小、可缓存的 favicon.ico—前端性能优化 32

文件不要大于 25K—前端性能优化 33

分段（multipart）文档—前端性能优化 34

避免图片 src 为空—前端性能优化 35