减少http请求
性能黄金法则
只有10％-20％的最终用户响应时间花在接收请求的HTML文档上，剩下的80％-90％时间花在HTML文档所引用的所有组件（图片，script，css，flash等等）进行的HTTP请求上。
改善响应时间的最简单途径就是减少组件的数量，井由此减少HTTP请求的数量。
实现
- 图片地图
将多个图片合井为一张图片，然后以位置信息定位超链接。把HTTP请求减少为一个，可以保证设计的完整性和功能的齐全性
<map><area>标签</area></map>
-
CSSSprites
CSSSprites中文翻译为CSS精灵，通过使用合并图片，通过指定css的backgroud-image和backgroud-position来显示元素。
backgroud-position属性
backgroud-position:x y;
x和y可以写负值也可以写正值，我们可以想象图片的左上方为（0，0），以（0，0）坐标向右是为负数的x轴，以（0，0）坐标向下是为负数的y轴。
图片地图与cSS精灵的响应时间基本上相同，但比使用各自独立图片的方式要快50％以上. -
合井脚本和样式表
使用外部的js和css文件引用的方式，因为这要比直接写在页面中性能要更好一点
独立的一个js比用多个js文件组成的页面载入要快38％.把多个脚本合井为一个脚本，把多个样式表合并为一个样式表。 -
图片使用Base64编码减少页面请求数,采用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入。
<img src="data:image/g(f;base64,/9j/4AAQSkZJ......">
浏览器缓存
缓存分类
HTTP缓存模型中，如果请求成功会有三种情况.
- 200 from cache:直接从本地缓存中获取响应，最快速，最省流量，因为根本没有向服务器发送请求
- 304 NotModified：协商缓存，浏览器在本地没有命中的情况下,请求头中发送一定的校验数据到服务端，如果服务端数据没有改变,浏览器从本地缓存响应，返回304.快速，发送的数据很少，只返回一些基本的响应头信息，数据量很
小，不发送实际响应体 - 200 OK：以上两种缓存全都失败，服务器返回完整响应。没有用
到缓存，相对最慢。
本地缓存
浏览器认为本地缓存可以使用，不会去请求服务端
相关Header
Pragma：Http1.0时代的遗留产物，该字段被设置为no-cache时，会告知浏览器禁用本地缓存，即次都向服务器发送请求。
Expires：HTTPI.0时代用来启用本地缓存的字段，expires值对应一个形如Thu，31 Dec 2037 23:55:55GMT的格林威治时间，告诉浏览器缓存实现的时刻，如果还没到该时刻，表明缓存有效，无需发送请求。
Cache-Control：HTTP1.1针对Expires时间不一致的解决方案，运用cache-contro咭知浏览器缓存过期的时间间隔而不是时刻，即使具体时间不一致，也不影响缓存的管理。
Cache-Control
no-store：禁止浏览器缓存响应
no-cache：不允许直接使用本地缓存，先发起请求和服务器协商
max-age=delta-seconds：告知浏览器该响应本地缓存有效的最长期限，以秒为单位
优先级
Pragma>Cache-Control>Expires
协商缓存
当浏览器没有命中本地缓存，如本地缓存过期或者响应中声明不允许直接使用本地缓存，那么浏览器肯定会发起服务端请求.服务端会验证数据是否修改，如果没有通知浏览器使用本地缓存。
相关Header
If-Modified-Since：得到资源的最后修改时间后，会将这个信息通过If·Modified-Since提交到服务器做检查，如果没有修改，返回304状态码.
If-Modified-Since：Mon,28Sep201508：06：43GMT
ETag：HTTPI.I推出，文件的指纹标识符，如果文件内容修改，指纹会改变
Etag：”78437822c6739"
If-None-Match：本地缓存失效，会携带此值去请求服务端，服务端判断该资源是否改变，如果没有改变，直接使用本地缓存，返回304。
适合缓存的内容
不变的图像，如logo，图标等。js、“s静态文件
可下载的内容，媒体文件
建议使用协商缓存
HTML文件
经常替换的图片
经常修改的js、css文件.
js、css文件的加载可以加入文件的签名来拒绝缓存
index.css?签名
index.签名.js
不建议缓存的内容
用户隐私等敏感数据
经常改变的api数据接口
Nginx配置缓存策略
本地缓存配置
add_header指令：添加状态码为2xX和3xX的响应头信息
add_header name value [always];
可以设置Pragma/Expires/Cache-Control可以继承
expires指令：通知浏览器过期时长
expires time;
为负值时表示cache-control:no-cache;
当为正或者0时，就表示Cache-Control:max-age=指定的时间；
当为max时，会把Expires置为"Thu, 31 Dec 2037 23：55：55 GMT"，Cache-Control设置到10年；
location ~ .*.(js.css)?$
{
expires 12h；
}
协 商 缓 存 相 关 配 置
Etag 指 令 ： 指 定 签 名
etag on | off 默认是on
前 端 代 码 和 资 源 的 压 缩
优 势 :让 资 源 文 件 更 小 ， 加 快 文 件 在 网 络 中 的 传 输 ， 让 网 页 更 快 的 展 现 降 低 带 宽 和 流 量 开 消
压 缩 方 式
JS 、 CSS 、 图 片 、 HTML 代 码 的 压 缩
Gzip 压 缩
JavaScript 代 码 压 缩
JavaScript 压 缩 的 原 理 一 般 是 去 掉 多 余 的 空 格 和 回 车 、 替 换 长 变 量 名 、 简 化 一 些 代 码 写 法 等 。
常用压缩工具: UglifyJS ,YUI Compressor. Closure Compiler
cSS 代 码 压 缩
原理和JavaScript 压 缩 原 理 类 似 ， 同 样 是 去 除 空 白 符 、 注 释 井 且 优
化 一 些 css 语 义 规 则 等
常用压缩工具: YUI Compressor. CSS Compressor
HTML 代 码 压 缩
不 建 议 使 用 代 码 压 缩 ， 有 时 会 破 坏 代 码 结 构 ， 可 以 使 用 Gzip 压 缩
当 然 也 可 以 使 用 htmlcompressor 工 具 ， 不 过 转 换 后 一 定 要 检 查 代
码 结 构 。
图 片 压 缩
除 了 代 码 的 压 缩 外 ， 有 时 对 图 片 的 压 缩 也 是 很 有 必 要 ， 一 般 情 况 下
图 片 在 Web 系 统 的 比 重 都 比 较 大 。
压缩工具: tinypng. JpegMini. ImageOptim
Nginx配置压缩
gzip on|off; //是否开启gzip
gzip_buffers 32 4k|16 8k //缓冲(在内存中缓存几块，每块多大 )
gzip_comp_level [1-9] #推荐6（压缩级别，级别越大，越浪费cpu资源 ）
gzip_disable //正则匹配UA 什么样的uri不进行gzip
gzip_min_length 200 # 开始压缩的最小长度
gzip_http_version 1.0|1.1 //开始压缩的http协议版本
gzip_proxied //设置请求者代理服务器，该如何缓存内容
gzip_types text/plain application/xml //对哪些类型的文件用压缩(txt,xml,html,css)
gzip_vary onloff //是否传输gzip压缩标志
其 他 工 具
自动化构建工具 Grunt
cdn加速
本 地 cache加 速 ， 提 高 了 企 业 站 点 （ 尤 其 含 有 大 量 图 片 和 静 态 页 面 站
点 ） 的 访 问 速 度 。
跨 运 营 商 的 网 络 加 速 ， 保 证 不 同 网 络 的 用 户 都 得 到 良 好 的 访 问 质 量
远 程 访 问 用 户 根 据 DNS 负 载 均 衡 技 术 智 能 自 动 选 择 cache服 务 器
场景
站 点 或 者 应 用 中 大 量 静 态 资 源 的 加 速 分 发 ， 例 如 ：css,js,图 片 和
HTML
大 文 件 下 载
直 播 网 站 等
实现
BAT的cdn服务，lvs4层负载均衡，Nginx七层负载均衡,使 用 squid 反 向 代 理 ， 或 者 Nginx 等 的 反 向 代 理
独立图片服务器
分 担 Web 服 务 器 的 I / 0 负 载 · 将 耗 费 资 源 的 图 片 服 务 分 离 出 来 ， 提 高 服 务 器 的 性 能 和 稳 定 性 。
能 够 专 门 对 图 片 服 务 器 进 行 优 化 · 为 图 片 服 务 设 置 有 针 对 性 的 缓 存 方 案 ， 减 少 带 宽 成 本 ， 提 高 访 问 速 度 。
提 高 网 站 的 可 扩 展 性 ． 通 过 增 加 图 片 服 务 器 ， 提 高 图 片 吞 吐 能 力 。
采 用 独 立 域 名
同一 域 名 下 浏 览 器 的 发 连 接 数 有 限 制 ，无法 突 破 浏 览 器 连 接 数 的 限 制 ，由于cookie的 原 因 ， 对 缓 存 不 利 ， 大 部 分 Web cache 都 只 缓 存 不 带 cookie 的 请 求 , 导 致 每 次 的 图 片 请 求 都 不 能 命 中chache。