HTTP协议简介与前端架构优化.ppt

http协议简介及前端架构优化 2009-06-17 http协议简介及前端架构优化 Http协议简介 使用Firebug分析协议与调试 前端架构与设计优化 我们的任务--------掀起一个衣角 HTTP协议简介 快递员一天的工作 HTTP协议简介 快递员竟然是个MM HTTP协议简介 快递员MM的服务质量 200 302、301 400、404 500、502 工具介绍 1、Firebug,Httpfox,httpwatch 2、YSlow FireBug使用 2、快递MM在这里---偷窥无罪（一） 简析请求、响应报文 FireBug使用 3、快递MM在这里---偷窥无罪（二） 再大胆一点！！！ HTTP协议简介 1、Cookies－甜心美女 2、session 会说话的美女 前端页面优化与架构优化 1、页面优化 2、架构优化 前端优化（一）内容篇 1. 尽量减少HTTP请求 2. 避免跳转 3. 缓存Ajax 4. 延迟加载与预加载 5. 减少DOM元素数量 6. 用域名划分页面内容 7. 避免404错误 前端优化（二）服务器篇 1. 使用CDN（内容分发网络） 2. 为文件头指定Expires或Cache-Control 3. Gzip压缩文件内容 4. 配置ETag 5. 尽早刷新输出缓冲 6. 优先使用GET 前端优化（三）JS篇 1. 把脚本置于页面底部 2. 使用外部JavaScript和CSS 3. 削减JavaScript和CSS 4. 剔除重复脚本 5. 减少DOM访问，缓存 前端页面优化（四）CSS篇 1. 把样式表置于顶部 2. 避免使用CSS表达式（Expression） 3. 使用外部JavaScript和CSS 4. 削减JavaScript和CSS 5. 避免使用滤镜 总结 动静分离 --- 给MM减负 合并---合并图片、JS、CSS 压缩 --- 再减负 Keep-alive ---不要让MM跑来跑去 缓存---让MM停下来 渲染优化 * * *