Your SlideShare is downloading. ×
0
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

420

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
420
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×