腾讯大讲堂18-让我们戴上有色眼镜--Qzone前台架构的优化分享.ppt

让我们戴上有色眼镜,-Web性能优化分享 QQ空间产品中心 Stonehuang,Web性能优化分享,对于一个不断发展的Web应用，优化如同逆水行舟，不进则退。,闭着眼睛也能优化,页面内容实现动静分离 页面HTML用JS生成 全面推广Ajax技术 前台对不同业务模块数据做mash-up 动态数据实现合并和静态化 异步化 各种各样看似合理的尝试和瞎忙活,我们早期的优化成果,好像，大概，应该，也许，可能有些效果吧？ 数据是很少滴！ 我们居然成功了，这要感谢我们前面有那么多的瓶颈，还有那么多公认的优化准则（银弹）可以套用,优化平台期,我们做了很多优化，打开速度也感觉快了很多，抱怨了少了一些，可是 哪个优化贡献最大？有多大影响？ 所有用户都快了吗？ 够快了吗？还能再快些吗？ 为什么有的时候还是感觉慢？ 为什么有些用户还是抱怨慢？,优化平台期,公认的优化手段几乎都用上了，还有新的银弹吗？ 有些优化手段代价很高，值得做吗？ 有些优化手段似乎相互矛盾，听谁的呢？ 为什么优化效果有反弹？,带上有色眼镜,转换不同的角度审视web应用 用不同的监控手段监控web应用的不同方面 为了满足自己的独特视角，发明自己独特的监控方式和工具 想尽办法，发现自己真正的优化点 每个优化有没效果，都需要有反馈,早期的监控,早期的监控,早期的监控,自产自销的简单数据分析工具,早期的监控,自产自销的简单数据分析工具,持续进化的测速系统,持续进化的测速系统,持续进化的测速系统,持续进化的测速系统,持续进化的测速系统,持续进化的测速系统,持续进化的测速系统,持续进化的测速系统,教育网12月份,持续进化的测速系统,教育网1月份,持续进化的测速系统,Gomez数据采样分析工具,HttpWatch分析工具,HttpWatch分析工具,限速工具,限速工具,YSlow,YSlow,自产自销的小工具,自产自销的小工具,透过有色眼镜看问题,从静态化率波动我们看到了： 每个新特性对数据产生的影响 每次数据迁移带来的影响 最迫切需要主动静态化的数据 程序的bug（相册无封面、个人信息转义符，甚至留言板XSS） 服务器压力不均造成的影响 当前系统的趋势是在变好还是变坏,透过有色眼镜看问题,从时间点统计曲线我们看到了： 每天24个时段的用户感受如何 各个省份各个ISP当前情况如何 用户花多少时间看到页面 用户花多少时间才能和页面交互 这些时间是怎么花掉的 哪些用户花费的时间特别多 我们应该从哪里下手继续优化,透过有色眼镜看问题,用各种第三方工具我们看到了 页面打开过程一般会发生些什么事情 某一个用户在打开某个页面时发生了什么 什么时候浏览器在发呆 哪些过程产生了堵塞，为什么堵塞 有没有不必要的请求和不必要的流量 如果网速很慢，会发生什么事情 如果电脑很慢，会发生什么事情 怎么让用户感觉好一点,用有色眼镜看待优化手段,我们做了许多些别人建议的事情 合并图片，合并脚本，压缩代码，使用Gzip，合并CSS，控制cookie膨胀，使用CDN，SEO,用有色眼镜看待优化手段,但即使是专家建议和公认的准则，我们也要进行自己的思考和审视 拆分域名，尽可能并行下载？有更好的办法吗？ 页面标准化？用户价值在哪里？ 跨浏览器？非IE浏览器的用户有多少？使用IE的用户要付出的代价是什么？ 混淆压缩代码来减少流量？是否有更好的办法？,只有不断创新，才能持续优化,我们还进行了一些自己的思考和尝试 网页使用本地持久存储：使用User Data和Share Object 动态数据No Cache：尝试允许和控制动态数据Cache，并尝试让CGI放回304 全面改造AJAX为JSON+AJAX 动态页面分阶段渲染 DNS解析错误的矫正 优化指南,CheckList,* 资源检查（针对html，js，swf，css，图片等） 是否新增加了文件请求？ 是否有404请求？ 新增加的文件请求响应中是否有expirex头（好头）？ 新增加的文件请求响应中是否有etag头（坏头）？ 新增加的文件请求是否支持gzip压缩？ 新增加的文件请求下载过程是否有block? 新增加的文件请求下载过程是否导致其他资源block? 新增加的文件请求能否延迟加载？ 是否减少了文件请求或者合并了文件请求？ 新增加的请求能否被浏览器缓存？ 新增加的请求是否适合进行长时间缓存？ 在empty cache和full cache两种情况下，是否有重复的文件请求？ 在empty cache和full cache两种情况下，是否有abort的文件请求？ 新增加的文件请求是否需要通过一个301/302跳转 （针对imgcache）新增加的文件是否适合分散到新域名下？,CheckList,* Js检查 新增加的js请求能否合并到现有的js请求或者页面请求中？ 新增加的js请求是否在关键路径上? 新增加的js请求能否放到body之后加载？能否延迟异步加载？ 新增加的js文件是否重写了大量已有js文件的代码？ Js文件能否进行混淆和压缩？ 循环中的计算有没有能提出到循环外进行的？ 有没有大量连续的字符串连接操作（如有考虑用数组join） * CSS检查 新增加的CSS是否有相互import？ 新增加的CSS是否大量复写了原有CSS文件的大量规则？ 新增加的多个CSS能否合并？ CSS能否直接写到html页面中(可复用性高吗?)？ 是否使用了expression？ 是否在hover样式中重新声明了背景图片（会导致重复请求）？,CheckList,* 限速检查 是否进行过netlimiter限速测试？ 在限制IE下载进程为2个和8个两种情况下打开页面的速度是否有明显差异？ 是否进行过cpukiller限速测试？ * http检查 DNS Lookup次数： Block 请求个数（请求的）： 关键路径上Block请求个数 *Cookie检查 是否创建了新的cookie? 是否创建了新的文件cookie? 是否创建了新的域名cookie? 能否用user-data或者share object代替cookie？ * 图片检查 新增加的图片能否延迟到用户要看的时候再加载？ 新增加的图片是否用innerHTML方式填充到页面中的（可能导致重复请求）？ 新增加的图片是否需要进行预加载？ 新增加的图片能否合并到已有的图片中？,CheckList,* Html检查 是否使用了iframe？ Css是否写在head中？ Script是否（能否）写到页面最下面？ Html文件能否进行混淆和压缩？ Inline的css是否使用了了expression,是否在hover样式中重新声明了背景图片？ * flash检查 Flash是否使用了比较耗费cpu的渲染效果? Flash是否超过了100k？ Flash是否需要下载额外的网络资源? Flash能否延迟加载? * Ajax检查 页面能否分阶段渲染？ 页面能否边显示（或者交互）边渲染 写操作是否用post方式提交