网站性能优化

网站性能优化什么是网站性能为什么要做性能优化谁去做怎么做一点实践什么是网站性能？页面快速系统伸缩自如服务稳定可靠为什么做网站性能优化？10s0.1~1s自由浏览0.1s立即发生1~5s损失20%5~8s损失50%10s损失99%8s5s1s0.1s时间用户体验谁去做？前端工程师?or运维工程师?分析和评估(httpwatch)下载HTML文档时间4%…………………………….……..nocache谁去做？下载HTML文档时间谁去做？结论70%前端性能HTTP请求过程预处理查询DNS建立链接发送请求等待响应返回数据RTT(Round-TripTime)服务器客户端客户端读取cache处理数据渲染元素1.预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache读取本地缓存数据2查询DNS预处理建立链接发送请求等待响应返回数据处理数据渲染元素读取cache浏览器DNS系统DNSDNS服务器3预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cacheTCP/IP连接CDN4预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache发送header信息5预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache服务器负载数据库查询服务端缓存6预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache受带宽影响JS，CSS，HTML做gzip压缩删除js，css文件的注释删除无效的css缓存改动不大的文件缓存favicon.ico文件精简HTML减少DOM元素优化img文件文件大小7预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache响应304请求Cache-Controlcache-control:max-age=31536000cache-control:privatecache-control:no-cacheExpiresexpires:Sat,04Dec201001:00:43GMT8预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cache不要对img进行Gzip压缩9预处理查询DNS建立链接发送请求等待响应返回数据处理数据渲染元素读取cacheHTML减少DOMIMG注明：width，heightCSSCSS放在顶部避免@import避免使用低效选择符CSSJavaScriptscript放在head内？JavaScript放在底部算法，循环解析HTML，样式计算，布局，DOM操作，JS解析怎么做？1.减少HTTP请求！1.1.图片地图：在一个图片上关联多个url.1.2.CssSprites:将多个图片合并到一个图中。1.3.合并js，css;将单独的文件合并到一个文件夹中，删除注释及空格。2.使用内容发布系统3.添加expires头。4.gzip压缩5.将样式表放在头部，将js放在尾部。怎么做？6.避免css表达式。7.js和css内联或者外置8.精简js(工具有jsmin和Dojo):合并相同的类，移除不使用的类,移除不用的脚本。9.避免重定向:将用户人一个url得新路由到另一个url.10.配置或移除Etag11.使用ajax.(YUI)来进行ajax的开发。工具GooglepagespeedYahoo!YslowhttpwatchGooglespeedtracerReferenceToolsFirebug本次课程结束，谢谢参与！——你理解了吗？