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

46
让我们戴上 有色眼 ----Web 性能优化分享 QQ 空间产品中心 Stonehuang

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

Page 1: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

让我们戴上有色眼镜

----Web性能优化分享QQ空间产品中心

Stonehuang

Page 2: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

Web性能优化分享

对于一个不断发展的Web应用,优化如同逆水行舟,不进则退。

Page 3: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
Page 4: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
Page 5: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
Page 6: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
Page 7: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

闭着眼睛也能优化

页面内容实现动静分离页面 HTML用 JS生成全面推广 Ajax技术前台对不同业务模块数据做mash-up

动态数据实现合并和静态化异步化

… …各种各样看似合理的尝试和瞎忙活

Page 8: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

我们早期的优化成果

好像,大概,应该,也许,可能有些效果吧?

… …数据 是很少滴!我们居然成功了,这要感谢我们前面有那么多的瓶颈,还有那么多公认的优化准则(银弹)可以套用

Page 9: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

优化平台期

我们做了很多优化,打开速度也感觉快了很多,抱怨了少了一些,可

… …是哪个优化贡献最大?有多大影响?所有用户都快了吗?够快了吗?还能再快些吗?为什么有的时候还是感觉慢?为什么有些用户还是抱怨慢?

Page 10: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

优化平台期

公认的优化手段几乎都用上了,还有新的银弹吗?有些优化手段代价很高,值得做吗?有些优化手段似乎相互矛盾,听谁的呢?为什么优化效果有反弹?

Page 11: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

带上有色眼镜

转换不同的角度审视 web应用用不同的监控手段监控 web应用的不同方面为了满足自己的独特视角,发明自己独特的监控方式和工具想尽办法,发现自己真正的优化点每个优化有没效果,都需要有反馈

Page 12: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

早期的监控

Page 13: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

早期的监控

Page 14: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

早期的监控自产自销的简单数据分析工具

Page 15: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

早期的监控自产自销的简单数据分析工具

Page 16: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

持续进化的测速系统

Page 17: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

持续进化的测速系统

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

持续进化的测速系统

Page 19: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

持续进化的测速系统

Page 20: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

持续进化的测速系统

Page 21: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

持续进化的测速系统

Page 22: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

持续进化的测速系统

Page 23: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

持续进化的测速系统

教育网 12月份

Page 24: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

持续进化的测速系统

教育网 1月份

Page 25: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

持续进化的测速系统

Page 26: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

Gomez数据采样分析工具

Page 27: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

HttpWatch分析工具

Page 28: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

HttpWatch分析工具

Page 29: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

限速工具

Page 30: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

限速工具

Page 31: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

YSlow

Page 32: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

YSlow

Page 33: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

自产自销的小工具

Page 34: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

自产自销的小工具

Page 35: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

透过有色眼镜看问题

从静态化率波动我们看到了:每个新特性对数据产生的影响每次数据迁移带来的影响最迫切需要主动静态化的数据程序的 bug(相册无封面、个人信息转义符,甚至留言板 XSS)服务器压力不均造成的影响当前系统的趋势是在变好还是变坏

Page 36: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

透过有色眼镜看问题

从时间点统计曲线我们看到了:每天 24个时段的用户感受如何各个省份各个 ISP当前情况如何用户花多少时间看到页面用户花多少时间才能和页面交互这些时间是怎么花掉的哪些用户花费的时间特别多我们应该从哪里下手继续优化

Page 37: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

透过有色眼镜看问题

用各种第三方工具我们看到了页面打开过程一般会发生些什么事情某一个用户在打开某个页面时发生了什么什么时候浏览器在发呆哪些过程产生了堵塞,为什么堵塞有没有不必要的请求和不必要的流量如果网速很慢,会发生什么事情如果电脑很慢,会发生什么事情怎么让用户感觉好一点

Page 38: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

用有色眼镜看待优化手段

我们做了许多些别人建议的事情合并图片,合并脚本,压缩代码,使用 Gzip,,合并 CSS,控制 cookie膨胀,使用 CDN, SEO……

Page 39: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

用有色眼镜看待优化手段

但即使是专家建议和公认的准则,我们也要进行自己的思考和审视拆分域名,尽可能并行下载?有更好的办法吗?页面标准化?用户价值在哪里?跨浏览器?非 IE浏览器的用户有多少?使用 IE的用户要付出的代价是什么?混淆压缩代码来减少流量?是否有更好的办法?

Page 40: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

只有不断创新,才能持续优化

我们还进行了一些自己的思考和尝试网页使用本地持久存储:使用 User Data和 Share Object动态数据 No Cache:尝试允许和控制动态数据 Cache,并尝试让 CGI放回 304全面改造 AJAX为 JSON+AJAX动态页面分阶段渲染DNS解析错误的矫正优化指南

Page 41: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

CheckList* 资源检查(针对 html, js, swf, css,图片等)

是否新增加了文件请求?是否有 404请求?新增加的文件请求响应中是否有 expirex头(好头)?新增加的文件请求响应中是否有 etag头(坏头)?新增加的文件请求是否支持 gzip压缩?新增加的文件请求下载过程是否有 block?新增加的文件请求下载过程是否导致其他资源 block?新增加的文件请求能否延迟加载?是否减少了文件请求或者合并了文件请求?新增加的请求能否被浏览器缓存?新增加的请求是否适合进行长时间缓存?在 empty cache和 full cache两种情况下,是否有重复的文件请求?在 empty cache和 full cache两种情况下,是否有 abort的文件请求

?新增加的文件请求是否需要通过一个 301/302跳转(针对 imgcache)新增加的文件是否适合分散到新域名下?

Page 42: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

CheckList* Js检查

新增加的 js请求能否合并到现有的 js请求或者页面请求中?新增加的 js请求是否在关键路径上 ?新增加的 js请求能否放到 body之后加载?能否延迟异步加载?新增加的 js文件是否重写了大量已有 js文件的代码?Js文件能否进行混淆和压缩?循环中的计算有没有能提出到循环外进行的?有没有大量连续的字符串连接操作(如有考虑用数组 join)

* CSS检查新增加的 CSS是否有相互 import?新增加的 CSS是否大量复写了原有 CSS 文件的大量规则?新增加的多个 CSS能否合并?CSS能否直接写到 html页面中 (可复用性高吗 ?)?是否使用了 expression?是否在 hover样式中重新声明了背景图片(会导致重复请求)?

Page 43: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

CheckList* 限速检查

是否进行过 netlimiter限速测试?在限制 IE下载进程为 2个和 8个两种情况下打开页面的速度是否有明显

差异?是否进行过 cpukiller限速测试?

* http检查DNS Lookup次数:Block 请求个数(请求的):关键路径上 Block请求个数

*Cookie检查是否创建了新的 cookie?是否创建了新的文件 cookie?是否创建了新的 qq.com域名 cookie?能否用 user-data或者 share object代替 cookie?

* 图片检查新增加的图片能否延迟到用户要看的时候再加载?新增加的图片是否用 innerHTML方式填充到页面中的(可能导致重复请

求)?新增加的图片是否需要进行预加载?新增加的图片能否合并到已有的图片中?

Page 44: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

CheckList* Html检查

是否使用了 iframe?Css是否写在 head中?Script是否(能否)写到页面最下面?Html文件能否进行混淆和压缩?Inline的 css是否使用了了 expression,是否在 hover样式中重新声明了背景

图片?* flash检查

Flash是否使用了比较耗费 cpu的渲染效果 ?Flash是否超过了 100k?Flash是否需要下载额外的网络资源 ?Flash能否延迟加载 ?

* Ajax检查页面能否分阶段渲染?页面能否边显示(或者交互)边渲染写操作是否用 post方式提交读操作能否用 json方式请求?CGI能否允许 cache,能否支持 304响应,能否支持 Gzip压缩

Page 45: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

Web优化的与众不同

对于一个永远 beta版的 web应用,每个版本都可能带来新的瓶颈只有不断随着产品而进化的监控手段,持续不断的监控,才能及时了解最新的瓶颈,发现最新的优化点。

Page 46: 腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享

谢谢

The End