网站性能优化

网站性能优化!整理Aboutme网络电视事业部开发工程师changyou52@/changyou52

常优

/

大优WebPerformance网站性能!

什么是网站性能

为什么要做性能优化

谁去做

怎么做

一点实践Amazon：

慢0.1s=1%

的用户放弃交易Yahoo!：

慢

0.4s=5-9%

的用户放弃访问[EXP.1]Google：

慢

0.5s=20%

的用户放弃访问10s0.1~1s自由浏览<0.1s立即发生1~5s浏览有阻碍5~8s损失50%10s损失99%8s5s1s0.1s时间用户体验[EXP.2]什么是网站性能？What页面快速系统伸缩自如服务稳定可靠

为什么做

网

站性能优化？Thepageis：an

application

withadataconnectiontoaserverWhy….谁去做？Who前端工程师?

or

运维工程师?分析&

评估Analysis/index.shtml下载HTML文档时间4%…………….……..nocache下载HTML文档时间/index.shtmlcache20%>70%结论Conclusion前端性能怎么做？减少HTTP请求！How预处理查询DNS建立链接发送请求等待响应返回数据RTT(Round-TripTime)

服务器HTTP请求过程客户端客户端读取cache处理数据渲染元素预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache读取本地缓存数据查询DNS预处理建立链接发送请求等待响应返回数据处理数据渲染元素读取cache浏览器DNS系统DNSDNS服务器预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cacheTCP/IP连接CDNHostUser-AgentMozilla/5.0Gecko/20101026Firefox/3.6.12Accepttext/html,application/xhtml+xml,application/xmlAccept-Languagezh-cn,zhAccept-Encodinggzip,deflateAccept-CharsetGB2312,utf-8Keep-Alive115Connectionkeep-aliveCookieALLYESID4=01A1BC8DCF97116F预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache发送header信息预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache服务器负载数据库查询服务端缓存预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache受带宽影响

JS，CSS，HTML做gzip压缩删除js，css文件的注释删除无效的css缓存改动不大的文件

缓存favicon.ico文件精简HTML

减少DOM元素优化img文件

文件大小预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache

响应304请求Cache-Controlcache-control:max-age=31536000cache-control:privatecache-control:no-cacheExpires

expires:Sat,04Dec201001:00:43GMT预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache不要对img进行Gzip压缩预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cacheHTML

减少DOM

IMG注明：width，heightCSS

CSS放在顶部

避免@import

避免使用低效选择符CSSJavaScript

script放在head内？

JavaScript放在底部

算法，循环解析HTML，样式计算，布局，DOM操作，JS解析怎么做？减少HTTP请求！

CSS,JS进行合并

AjaxGET代替POST

CSS图片地图缓存How

Googlepagespeed

Yahoo!YslowMicrosoftFiddler2

GooglespeedtracerReferenceTools

Firebug一些实践Practice2010.2cachenocacheTime:7.671Time:2.089首页284.9K，整个网页902.3K17个JS文件,74K5个Iframe,25K冷静！发现问题解决问题改进反馈问题执行力进化到下一阶段任何一个好的产品都不是被设计出来的！1.精简HTML&JavascriptHTML去掉注释，回车符，以及无效字节可节省

65K(28%）JavaScript利用JSMin/YUICompressor工具（每个JS文件可降低26%文件大小）2.合并JavaScript&CSS/jsca/js/pwin.js/jsca/js/template.js/library/column/2010/09/20/C28048/script/asian.js/nettv/Library/ibugu/ibugu_new/flash/js_flash_gateway.js/nettv/Library/ibugu/ibugu_new/js/changelights.js/nettv/Library/ibugu/js/calendar.js/nettv/Library/ibugu/js/changelights.js/nettv/Library/ibugu/js/jquery-1.3.2.min.js/nettv/Library/ibugu/js/lightbox.js/nettv/Library/ibugu/js/tagchange_new.js/nettv/Library/ibugu/js/change_flash.js/bmgad_wpu_cc.js/bmgad_wpu_show_check.js/bmgad_wpu_show_cntv.js/bnnr/alysxc.js/main/s?user=cntv|bugu|shouye_fubiao&db=cntv&border=0&local=yes&js=ie/jsca/css/style_controlbar.css/nettv/Library/ibugu/ibugu_new/css/common.css/nettv/Library/ibugu/ibugu_new/css/headfoot.css/nettv/Library/ibugu/ibugu_new/css/index.cssJavaScriptCSS(/p/minify/)Minify<scripttype="text/javascript”src="/nettv/Library/ibugu/js/jquery-1.3.2.min.js”></script><scripttype="text/javascript”src="/nettv/Library/ibugu/js/lightbox.js”></script><scripttype="text/javascript”src="/nettv/Library/ibugu/js/tagchange_new.js”</script><scripttype="text/javascript”src="/nettv/Library/ibugu/js/change_flash.js”></script><scripttype="text/javascript”src="/min/f=nettv/Library/ibugu/js/jquery-1.3.2.min.js,nettv/Library/ibugu/js/lightbox.js,nettv/Library/ibugu/js/tagchange_new.js,nettv/Library/ibugu/js/change_flash.js”>script>Copymin文件夹到网站目录下，配置min/config.phpApache配置mod_Rewrite

或者使用g参数（需配置min/groupsConfig.php）Done！<tdwidth="13%"align="center"><imgwidth="16"height="15"src="/nettv/ibugu/Library/ibugu/C10003000015/images/icon_tv2.jpg"/></td>28X283.CSSsprites.no3{background:transparenturl(../images/no713.jpg);background-position:0-30px;width:15px;height:15px;}/写入img：第一时间显示logo图和背景，避免空白和无背景<bodyonload=“if(document.images)newImage().src='/images/nav_logo8.png”>在img标签中指定尺寸：提升浏览器渲染效率<h1><atitle="GotoGoogleHome"href="/webhp?hl=en"id="logo">Google<imgwidth="164"height="106"alt=""src="/images/nav_logo.png"/></a></h1>预处理4.JavaScript放到底部，

CSS放到顶部CSS放到header中：避免白屏Javascript放置底部：避免阻塞下载JS，CSS写在html内？还是外部link？5.减少DNS查询<iframewidth=“685”scrolling=“no”height=“90”src=“/main/s?user=cntv|bugu|shouye_changtong01&db=cntv&border=0&local=yes”marginwidth=“0”

marginheight="0"></iframe>广告与页面分离增加并行下载数提升整站下载时间/index.shtml(88%reduction)./jsca/templates/pwin_toolbar_banner.html(45%reduction)/jsca/templates/pwin_toolbar_text_unlogin.html(36%reduction)压缩html文件，js文件，css文件。可减少文件大小至少60%6.Gzip压缩组件TYPESIZEGZIPURLdoc284.6K26.1K/index.shtmlJS57.2K19.7K/nettv/Library/ibugu/js/jquery-1.3.2.min.jsJS6.9K1.3K/nettv/Library/ibugu/js/tagchange_new.jsJS1.3K0.3K/nettv/Library/ibugu/js/changelights.jsJS5.5K1.6K/nettv/Library/ibugu/js/calendar.jsJS7.3K2.7K/Library/a2.jscss5.5K1.4K/nettv/Library/ibugu/ibugu_new/css/index.css7.添加Expires头14个JS,CSS静态文件缓存时间很短。Cache-Control：max-age=1800

/nettv/Library/ibugu/ibugu_new/css/index.css/jsca/css/style_controlbar.css/nettv/Library/ibugu/js/jquery-1.3.2.min.js/nettv/Library/ibugu/js/tagchange_new.js/nettv