《《网站性能优化》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《网站性能优化》PPT课件.ppt（41页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Web Performance OptimizationWeb Performance Optimization网站性能优化!About meAbout me网络电视事业部 开发工程师 常优 /大优大优Web PerformanceWeb Performance网站性能!什么是网站性能 为什么要做性能优化 谁去做 怎么做 一点实践Amazon：慢慢 0.1s =1%的用户放弃交的用户放弃交易易Yahoo!Yahoo!：慢慢 0.4s=5-9%的用户放弃访问的用户放弃访问 EXP.1 Google Google ：慢慢 0.5s=20%的用户放弃访问的用户放弃访问10s10s0.11s 0.11
2、s 自由浏览自由浏览0.1 s 70%结论Conclusiononclusion前端性能怎么做？减少HTTP请求！Howow预处理预处理查询查询DNSDNS建立链接建立链接发送请求发送请求等待响应等待响应返回数据返回数据RTT(Round-Trip Time)服务器服务器HTTP请求过程客户端客户端客户端客户端读取读取cachecache处理数据处理数据渲染元素渲染元素预处理预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache读取本地缓存数据读取本地缓存数据查询查询DNSDNS预处理建立链接发送请求等待响应返回数据处理数据渲染元素读取cache浏览器浏览器DNSDNS
3、系统系统DNSDNSDNSDNS服务器服务器预处理查询DNS建立链接建立链接发送请求等待响应返回数据处理数据渲染元素读取cacheTCP/IPTCP/IP连接连接CDNCDNHUser-AgentMozilla/5.0 Gecko/20101026 Firefox/3.6.12Accepttext/html,application/xhtml+xml,application/xmlAccept-Languagezh-cn,zhAccept-Encodinggzip,deflateAccept-CharsetGB2312,utf-8Keep-Alive115Connectionkeep-aliv
4、eCookieALLYESID4=01A1BC8DCF97116F预处理查询DNS建立链接发送请求发送请求等待响应返回数据处理数据渲染元素读取cache发送发送headerheader信息信息预处理查询DNS建立链接发送请求等待响应等待响应返回数据处理数据渲染元素读取cache服务器负载数据库查询服务端缓存预处理查询DNS建立链接发送请求等待响应返回数据返回数据处理数据渲染元素读取cache受带宽影响 JS，CSS，HTML 做gzip压缩 删除js，css文件的注释 删除无效的css 缓存改动不大的文件缓存favicon.ico文件 精简HTML减少DOM元素 优化img文件文件大小预处理查
5、询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取读取cachecache 响应304请求Cache-Controlcache-control:max-age=31536000cache-control:privatecache-control:no-cacheExpires expires:Sat,04 Dec 2010 01:00:43 GMT预处理查询DNS建立链接发送请求等待响应返回数据处理数据处理数据渲染元素读取cache不要对img进行Gzip压缩预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素渲染元素读取cacheHTML 减少DOM IMG注明：wid
6、th，heightCSS CSS放在顶部 避免import 避免使用低效选择符CSSJavaScript script放在head内？JavaScript放在底部 算法，循环解析HTML，样式计算，布局，DOM操作，JS解析怎么做？减少HTTP请求！CSS,JSCSS,JS进行合并进行合并 Ajax GET Ajax GET代替代替POSTPOST CSS CSS图片地图图片地图 缓存缓存Howow Google page speedGoogle page speed Yahoo!YslowYahoo!Yslow Microsoft Fiddler2 Microsoft Fiddler2 Go
7、ogle speed tracerGoogle speed tracerReferenceReferenceToolsTools Fire bugFire bug一些实践Practiceractice2010.2cacheno cacheTime:7.671 Time:7.671 Time:2.089 Time:2.089 首页首页284.9K284.9K，整个网页，整个网页902.3K902.3K1717个个JSJS文件文件,74K,74K5 5个个Iframe,25KIframe,25K冷静！发现问题发现问题解决问题解决问题改进改进反馈反馈问题问题执行力执行力进化到下进化到下一阶段一阶段任
8、何一个好的产品都不是被设计出来的！任何一个好的产品都不是被设计出来的！1.1.精简精简 HTML&JavascriptHTML&JavascriptHTML去掉注释，回车符，以及无效字节可节省 65K(28%）JavaScript利用 JSMin/YUI Compressor 工具（每个JS文件可降低26%文件大小）2.2.合并合并 JavaScript&CSSJavaScript&CSShttp:/ type=text/javascript”src=”scriptCopy min文件夹 到 网站目录下，配置 min/config.phpApache配置 mod_Rewrite 或者使用g参数
9、（需配置min/groupsConfig.php）Done！28X283.3.CSS spritesCSS sprites.no3 background:transparent url(./images/no713.jpg);background-position:0-30px;width:15px;height:15px;l写入img：第一时间显示logo图和背景，避免空白和无背景l在img标签中指定尺寸：提升浏览器渲染效率Googlel预处理4.JavaScript4.JavaScript放到底部放到底部 ，CSS CSS放到顶部放到顶部CSS放到header中：避免白屏Javascrip
10、t放置底部：避免阻塞下载JS，CSS 写在html内？还是外部link？5.5.减少减少DNSDNS查询查询广告与页面分离增加并行下载数提升整站下载时间(88%reduction).(45%reduction)(36%reduction)压缩html文件，js文件，css文件。可减少文件大小至少60%6.Gzip6.Gzip压缩组件压缩组件TYPESIZEGZIPURLdoc284.6K26.1Khttp:/ JS57.2K19.7Khttp:/ 个JS,CSS 静态文件缓存时间很短。Cache-Control：max-age=1800修订文件名，将版本号加入其中，并设置长久的Expires淘宝：淘宝：20101125.js平均载入时间为平均载入时间为 9.1 9.1 秒，比秒，比 85%85%的网站慢的网站慢URLTIME/9.5/live_cctv5/index.shtml9.1/live/index.shtml9.3/cctv5/index.shtml9.6/live_channel1/index.shtml9.2/cctv1/index.shtml9.4ThanksThanksQ&A