网站性能优化.

网站性能优化!整理Aboutme网络电视事业部开发工程师[e-mail]/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：anapplicationwithadataconnectiontoaserverWhy….谁去做？Who前端工程师?or运维工程师?分析&评估Analysis下载HTML文档时间4%…………………………….……..nocache下载HTML文档时间结论Conclusion前端性能怎么做？减少HTTP请求！How预处理查询DNS建立链接发送请求等待响应返回数据RTT(Round-TripTime)服务器HTTP请求过程客户端客户端读取cache处理数据渲染元素预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache读取本地缓存数据查询DNS预处理建立链接发送请求等待响应返回数据处理数据渲染元素读取cache浏览器DNS系统DNSDNS服务器预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cacheTCP/IP连接CDNHost=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-cacheExpiresexpires:Sat,04Dec201001:00:43GMT预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache不要对img进行Gzip压缩预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cacheHTML减少DOMIMG注明：width，heightCSSCSS放在顶部避免@import避免使用低效选择符CSSJavaScriptscript放在head内？JavaScript放在底部算法，循环解析HTML，样式计算，布局，DOM操作，JS解析怎么做？减少HTTP请求！CSS,JS进行合并AjaxGET代替POSTCSS图片地图缓存HowGooglepagespeedYahoo!YslowMicrosoftFiddler2GooglespeedtracerReferenceToolsFirebug一些实践Practice:2.089，整个网页902.3K17个JS文件,74K5个Iframe,25K冷静！发现问题解决问题改进反馈问题执行力进化到下一阶段任何一个好的产品都不是被设计出来的！去掉注释，回车符，以及无效字节可节省65K(28%）JavaScript利用JSMin/YUICompressor工具（每个JS文件可降低26%文件大小）://bugu.cntv.cn/jsca/js/pwin.js://bugu.cntv.cn/library/column/2010/09/20/C28048/script/asian.js://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/js/changelights.js://bugu.cntv.cn/nettv/Library/ibugu/js/changelights.js://bugu.cntv.cn/nettv/Library/ibugu/js/lightbox.js://bugu.cntv.cn/nettv/Library/ibugu/js/change_flash.js://js.bmgad.com/bmgad_wpu_show_check.js://a.cntv.cn/bnnr/alysxc.js=cntv|bugu|shouye_fubiao&db=cntv&border=0&local=yes&js=ie://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/css/common.css://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/css/index.cssJavaScriptCSS()Minifyscripttype=text/javascript”src=”/scriptscripttype=text/javascript”src=”/scriptscripttype=text/javascript”src=”/scriptscripttype=text/javascript”src=”/scriptscripttype=text/javascript”src==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.phpApache配置mod_Rewrite或者使用g参数（需配置min/groupsConfig.php）Done！tdwidth=13%align=centerimgwidth=16height=15src=/nettv/ibugu/Library/ibugu/C10003000015/images/icon_tv2.jpg//td28X28{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标签中指定尺寸：提升浏览器渲染效率h1atitle=GotoGoogleHomehref==enid=logoGoogleimgwidth=164height=106alt=src=/images/nav_logo.png//a/h1预处理放到底部，CSS放到顶部CSS放到header中：避免白屏Javascript放置底部：避免阻塞下载JS，CSS写在html内？还是外部link？=“685”scrolling=“no”height=“90”src=“=cntv|bugu