• 缓存如何工作？
• 浏览器缓存
• 代理服务器缓存

• Expires
• Cache-Control: max-age
• Last-Modified
• ETag
• HTML5 AppCache

GET /xxx HTTP/1.1
Host: xxx
If-Modified-Since: Tue, 18 Dec 2012 05:12:18 GMT
If-None-Match: "xxxx"

HTTP/1.x 304 Not Modified

• 尽量缓存所有静态资源
• Expires设置为1个月至1年
• Expires比Cache-Control: max-age有更广泛支持
• Vary header (IE)
• 去掉除Accept-Encoding和User-Agent外的所有其他值
• 或去掉整个Vary头

• NO query string (url?xxx)
• 不要缓存带cookie的资源 (Cache-control: private)
• 注意代理服务器处理gzip JS/CSS的问题
• Cache-control: private
• Vary: Accept-Encoding 让代理保存压缩/已解压两份

• 请求的“一生”
• 优化请求时间
• 优化请求数量
• 并行化请求

• 优化DNS查询时间
• 尽量使用相同域名（以URL区分资源）
• dev.qq.com > www.qq.com/dev
• 减少DNS查询次数
• 相同域名允许浏览器重用TCP链接
• 负责渲染页面的JS等资源应与页面使用相同域名
• 优化重定向
• 去除非必要的重定向
• 服务器重写
• 尽可能使用HTTP进行重定向（而不是JS）

• 考虑将JS合并成两个文件
• 一个放到head，包含渲染页面所必须的代码
• 另一个待页面加载完毕后再加载
• 尽量减小head所包含的JS文件数量和体积

• 避免使用CSS @import
• 合并成一个文件
• 拆分成多个link（并行加载）

• 通过使用多个域名来加大并行加载数
• 同一个资源总是使用同一个同一个域名

• 优化请求头大小
• 优化请求内容大小
• 优化静态资源

• 去除无用或重复的cookie
• 在服务端保存cookie
• 使用无cookie服务端下发静态资源

• gzip
• CSS selector按a-z顺序
• HTML节点属性按a-z顺序
• 统一命名风格
• 统一单/双引号
• minify JavaScript, CSS, HTML
• closure compiler
• yui compressor
• jsmin
• ...
• 避免gizp图片、视频、pdf等二进制文件

• 优化CSS
• 优化图像渲染
• 提前HTML解析和JS执行

• 避免CSS Selector匹配大量节点
• 避免使用 *
• 多使用class/id来收窄范围
• 避免冗余规则（比如div#someid）
• 避免复杂多层级的selector
• 避免CSS Expression
• 使用JS来替代，性能更佳
• 把CSS引用翻到head内（避免页面重绘）

• 避免多余的页面重绘
• 浏览器可在图片加载完成前提前渲染（占坑）

• 响应头部
• HTML meta标签

• 硬件资源有限
• 移动互联网高延时、高RTT

• 延迟解析JavaScript
• 延迟加载
• <script defer>
• 把JavaScript代码放到注释里（Gmail）
• 1KB JS = 1ms
• 把JavaScript等静态文件存到LocalStorage

• CSS3 Transitions
• CSS3 3D Transforms
• HTML5 Rocks