前端性能优化

规则1-减少HTTP请求

a.图片地图－一个图片关联多个URL
b.CSS Sprites
c.内联图片
d.合并脚本和样式表

规则2-使用CDN

CDN用于发布静态内容，如图片，脚本，样式表和flash等。

规则3-添加Expires头

Expires是添加一个未来的时间点，而max-age则表示要持续的时间段，设置它的首部Cache－Control:max-age=3600000。两者若同时出现max-age将重写Expires。另外，Apache的mod_expires模块可以将Expires设置为加上一个时间段后的时间。
更新：更改文件名

规则4-压缩组件

图片和pdf已经是被压缩过的，最好不要再压缩
服务器中添加Vary:Accept-Encoding头，以驱使代理执行正确的操作，即向支持压缩的浏览器发送经过压缩的内容，向不支持压缩的浏览器发送未压缩的内容。

规则5-将样式表放在顶部

在web中html页面就是进度显示器

规则6-将脚本放在底部

－脚本会阻塞对其后面内容的呈现（脚本下载时，页面会停止渲染）
－脚本会阻塞对其后面组件的下载（脚本下载时会阻止其他下载，并行下载被禁用，即使使用了不同的主机名）

规则7-避免CSS表达式

替代：使用一次性CSS表达式或使用事件监听

规则8-使用外部JS和CSS

页面查看次数少的网站使用内联会更快些
针对访问次数多的使用外部JS和CSS可以缓存并且可以组件重用
动态内联：借助cookie，若不存在cookie则说明很可能是第一次访问，此时使用内联（当页面下载完后，服务器添加js在页面动态下载外部文件并设置cookie）；若存在cookie则尝试使用缓存

规则9-减少DNS查找

DNS缓存：浏览器缓存，用户计算机缓存，局域网缓存，ISP缓存等
TTL：Time-to-live，由服务器设置（RFC建议设置为一天，顶级网站可能要短一些，因为要考虑的快速故障转移，方便更新）
操作系统缓存会考虑ttl，但是浏览器通常会忽略，并设置自己的时间。此外，keep-live特性会覆盖ttl和浏览器设置的时间。浏览器对缓存的DNS有数目限制。

规则10-精简JS

混淆：缩短变量名，去掉注释和空白符
精简：去掉注释和空白符

规则11-避免重定向

301-永久转移
302-暂时转移
304-Not Modified使用缓存

规则12-移除重复脚本

重复脚本损失性能的原因：不必要的http请求和执行js浪费的时间
规则13-配置或移除ETag
ETag：实体标签，是web服务器和浏览器用于确认缓存组件有效性的一种机制。它是唯一标示一个组件的一个特定版本的字符串。其唯一约束是字符串必须用引号包着。

规则14-使Ajax可缓存

关于HTTP一些首部的补充

概念 浏览器 服务器 备注 压缩 Accept-Encoding Content-Encoding 条件请求GET If-Modified-Since Last-Modified 仍需发送请求去验证 Expires Expires 通常在第一次请求时由服务器端返回。只要没过期，浏览器就会使用缓存而不会发送请求 Keep-Live Connection Connection 一般浏览器都是默认开启的，要关闭需要任何一端显式Connection:close。HTTP 1.1中定义的管道可以在一个单独的socket上发送多个请求而无需等待响应。性能优于keep-live