2013WPO最新网站性能优化教程.ppt

Web Performance Optimization 网站性能优化 ! About me 网络电视事业部 开发工程师 changyou52@ /changyou52 常优 / 大优 Web Performance 网站性能 ! 什么是网站性能 为什么要做性能优化 谁去做 怎么做 一点实践 Amazon： 慢 0.1s = 1% 的用户放弃交易 Yahoo! ： 慢 0.4s = 5-9% 的用户放弃访问 [ EXP .1 ] Google ： 慢 0.5s = 20% 的用户放弃访问 10s 0.1~1s 自由浏览 0.1 s 立即发生 1~5s 浏览有阻碍 5~8s 损失50% 10s 损失99% 8s 5s 1s 0.1s 时间 用户体验 [ EXP .2 ] 什么是网站性能？ What 页面快速 系统伸缩自如 服务稳定可靠 为什么做 网 站性能优化？ The page is ： an application with a data connection to a server Why …. 谁去做？ Who 前端工程师 ? or 运维工程师 ? 分析 评估 Analysis 下载HTML文档时间 4% …………………………….…….. no cache 下载HTML文档时间 cache 20% 70% 结论 Conclusion 前端性能 怎么做？ 减少HTTP请求！ How 预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 RTT ( Round-Trip Time ) 服务器 HTTP 请求 过程 客户端 客户端 读取cache 处理数据 渲染元素 预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 查询DNS 预处理 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 浏览器DNS 系统DNS DNS服务器 预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache TCP/IP连接 CDN Host User-Agent Mozilla/5.0 GeckoFirefox/3.6.12 Accept text/html,application/xhtml+xml,application/xml Accept-Language zh-cn,zh Accept-Encoding gzip,deflate Accept-Charset GB2312,utf-8 Keep-Alive 115 Connection keep-alive Cookie ALLYESID4=01A1BC8DCF97116F 预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 发送header信息 预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 服务器负载 数据库查询 服务端缓存 预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 受带宽影响 JS，CSS，HTML 做gzip压缩 删除js，css文件的注释 删除无效的css 缓存改动不大的文件 缓存favicon.ico文件 精简HTML 减少DOM元素 优化img文件 文件大小 预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 响应304请求 Cache-Control cache-control: max-agecache-control: private cache-control: no-cache Expires expires: Sat, 04 Dec 2010 01:00:43 GMT 预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 不要对img进行Gzip压缩 预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache HTML 减少DOM IMG注明：width，height CSS CSS放在顶部 避免@import 避免使用低效选择符CSS JavaScript script放在head内？