2亿QQ在线背后的 Web敏捷开发模式 -...
Transcript of 2亿QQ在线背后的 Web敏捷开发模式 -...
![Page 1: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/1.jpg)
2亿QQ在线背后的Web敏捷开发模式
郭学亨@腾讯公司
![Page 2: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/2.jpg)
QQ web开发的挑战
Web运行环境的优化(版本依赖、调试)
如何解决JS文件加载不可靠问题?
多测试环境及异常现场重新的探索
目录
![Page 3: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/3.jpg)
什么是QQ web ?
![Page 4: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/4.jpg)
PC QQ
![Page 5: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/5.jpg)
PC QQ
![Page 6: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/6.jpg)
手Q
![Page 7: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/7.jpg)
QQ web开发的挑战 ?
![Page 8: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/8.jpg)
QQ同时在线突破两亿
2亿2
1
01999年 2010年3月5日 2014年4月11日
(亿)
1亿
1000万
![Page 9: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/9.jpg)
QQ Web业务规模
8000万+
活跃账户数:8.48亿
日登录数:90亿
业务数:100余个
平均PV:
![Page 10: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/10.jpg)
用户的体验预期是客户端。
1、高性能:空白页容忍度低
2、流畅度:CPU/内存占用
3、无障碍;可操作性,容错性
![Page 11: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/11.jpg)
1、如何解决客户端环境问题?
![Page 12: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/12.jpg)
如何解决客户端环境问题?
Ⅰ、对QQ webkit化的改造1、各版本IE兼容性问题
2、性能和稳定性
3、无法跟踪的错误
![Page 14: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/14.jpg)
测试项 QQ2012
(IE)QQ2013 1.90
(webkit)
chrome 17.0
safari 4.0.5
IE 8 对比结论
1.v8 JS性能测试(越高越好)
强制终止
6115 6209 1713 24.7(50次点击确认,太惨了)
远好于
2.页面加载效率测试(越小越好)
859ms 44ms 45ms 88ms 702ms 提升20倍
3.CSS3渲染能力(越小越好)
强制刷新
14s 10s 254s 734s 远好于
4.HTML5支持(越高越好)
40分 348分 375分 217分 47分 提高8倍
QQ webkit整合测试
![Page 15: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/15.jpg)
0
0.2
0.4
0.6
0.8
1
1.2
群mini 资料故事
QQ2012(IE) QQ2013(webkit)
QQ webkit整合效果
![Page 16: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/16.jpg)
如何解决客户端环境问题?
Ⅱ、QQ内嵌稳定性优化1、webkit crash率
2、webkit内存占用大
![Page 17: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/17.jpg)
QQ和webkit进程分离
![Page 18: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/18.jpg)
如何解决客户端环境问题?
Ⅲ、QQ Common API1、新接口版本迭代问题
2、版本普及率
3、代码复用问题
![Page 19: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/19.jpg)
Common API实现
1、JSC API
2、External方法
PC:
终端:
1、QQWebViewController
2、jsbridge://Module/Method?p={...}
![Page 20: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/20.jpg)
Common API for PC
![Page 21: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/21.jpg)
Common API for 手Q
11个模块
100个API
![Page 22: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/22.jpg)
客户端运行环境
Ⅴ、调试方法的探索1、webview的限制
2、窗口大小的限制
3、手机场景的限制
![Page 23: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/23.jpg)
调试方式初探—自定义工具
![Page 24: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/24.jpg)
调试方式初探
![Page 25: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/25.jpg)
调试方式初探—浏览器扩展
![Page 26: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/26.jpg)
调试方式初探—扩展浏览器
![Page 27: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/27.jpg)
调试方式初探—扩展屏幕
![Page 28: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/28.jpg)
调试方式初探—breakpoint(aaordwolfs)
![Page 29: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/29.jpg)
调试方式初探—breakpoint
![Page 30: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/30.jpg)
调试方式初探—扩展客户端
![Page 31: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/31.jpg)
2、如何解决JavaScript异常?
![Page 32: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/32.jpg)
JS异常发现
BadJS 问题排查
1、try/catch
2、window.onerror
![Page 33: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/33.jpg)
JS异常发现
window.onerror = function(
errorMessage, //常规
scriptURI, //常规
lineNumber, //常规
columnNumber, //部分IE、chrome
errorStack //chrome 30+
)
![Page 34: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/34.jpg)
JS异常发现
![Page 35: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/35.jpg)
JS异常发现
![Page 36: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/36.jpg)
JS异常发现
Plan A:a、设置script标签的crossorigin
<script src="http://somremotesite.com/script.js" crossorigin></script>
b、设置javascript文件的HTTP头
Access-Control-Allow-Origin: http://qq.com
Plan B:Source/WebCore/dom/ScriptExecutionContext.cpp ,301-309行,
// if (securityOrigin()->canRequest(targetUrl)) { …}
![Page 37: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/37.jpg)
JS异常发现
![Page 38: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/38.jpg)
JS异常处理—文件加载
![Page 39: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/39.jpg)
失败率:0.2377%->0.0481%
JS异常处理—文件加载
![Page 40: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/40.jpg)
1、setTimeout
2、样式检查
3、resource.timing
CSS异常的重试
![Page 41: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/41.jpg)
CSS异常切换--测速的误区
<link type="text/css" rel="stylesheet"
href="http://1.url.cn/q/css/6/quan.min.css" />
<script type="text/javascript"> var a = new Date();</script>
</head>
<body>
<img src="http://imgcache.qq.com/logo.gif" />
<img src="http://csdnimg.cn/_piclogo.gif" />
</body>
</html>
![Page 42: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/42.jpg)
CSS测速的误区
safari Chrome(30-)
firefox IE9 IE7/8 IE6
Link后无script 不阻塞 不阻塞 不阻塞 不阻塞 不阻塞 阻塞
Link后有script 不阻塞 阻塞 阻塞 不阻塞 阻塞 阻塞
![Page 43: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/43.jpg)
CSS异常切换--测速的误区
![Page 44: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/44.jpg)
3、如何解决复杂测试环境问题?
![Page 45: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/45.jpg)
HOST之痛—配置
![Page 46: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/46.jpg)
为什么网站不能访问了!?
HOST之痛—冲突
![Page 47: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/47.jpg)
HOST之痛--mobile
![Page 48: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/48.jpg)
3.1 如何去掉hosts ?
![Page 49: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/49.jpg)
HOST之痛--需求的本质
环境1
环境2
环境3
![Page 50: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/50.jpg)
• 不同域名:
mobile.qq.com VS testmobile.qq.com
• 号码判断:
QQ尾号为单数 => 测试环境
• IP判断:
公司IP => 预发布环境
• 其他?
HOST之痛--现有方案
![Page 51: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/51.jpg)
唯一的Host
HOST之痛--proxy
![Page 52: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/52.jpg)
HOST之痛--让 Host 消失
![Page 53: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/53.jpg)
上网代理配置
• 不能满足频繁更新
• 不能满足多环境切换
HOST之痛--代理脚本
![Page 54: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/54.jpg)
外网反向代理转发用户
IP是公司的?
环境1 环境2
• 需要业务自行开发。
• 需要发布到外网。
• 不能解决CDN问题。
• 公司用户看不到外网。
HOST之痛--转发
![Page 55: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/55.jpg)
HOST之痛--DNS查询过程
![Page 56: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/56.jpg)
• Local DNS
1. 公司用户引导至 NoHost Proxy
2. 业务侧自主配置,快捷方便!
http://gslb.oa.com
HOST之痛--DNS查询过程
![Page 57: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/57.jpg)
HOST之痛—HOST消失了
![Page 58: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/58.jpg)
加载 nohost.js
公司用户? 种下环境Cookie
显示切换按钮
用户切换环境种下新的环境Cookie
刷新页面
HOST之痛—整体方案
![Page 59: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/59.jpg)
3.2 环境切换中的cache问题
![Page 60: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/60.jpg)
加载 nohost.js
公司用户? 种下环境Cookie
显示切换按钮
用户切换环境种下新的环境Cookie
刷新页面
NoHost 记录缓存文件强制请求
所有缓存文件
nohost改进方案
![Page 61: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/61.jpg)
If-Modified-Since: 0Cache-Control: no-cache,no-storePragme: no-cacheNohostCleanCache: Yes
XMLHTTP.setRequestHeader
结果:使用不被缓存的、空的内容覆盖缓存内容
JavaScript 对被缓存的文件发起异步请求:
nohost改进方案—清理cache
![Page 62: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/62.jpg)
3.3 问题排查上的探索
![Page 63: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/63.jpg)
页面提示「服务器繁忙」啦!
在我这里是好的!
刷新页面还是这样吗?
咦,没有了……
不能重现啊……
问题重现—案例
![Page 64: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/64.jpg)
开发者查看HTTP请求
问题重现—云端
![Page 65: 2亿QQ在线背后的 Web敏捷开发模式 - O'Reillyvelocity.oreilly.com.cn/2014/ppts/velocity-beijing-2014-QQ.pdf · 2亿QQ在线背后的 Web敏捷开发模式 ... 目录. 什么是QQ](https://reader034.fdocuments.net/reader034/viewer/2022042516/5fb0eedc96a7d621cf56e238/html5/thumbnails/65.jpg)
gslb DNS
域名查询
访问
HTTP反向代理NoHost插件
im.qq.com10.10.10.10
1.1.1.1
www.qq.com20.20.20.20
2.2.2.2
转发
转发
读取
NoHost配置
读取
存包头 存包体
dump
消息队列
配置页面 Replay页面