腾讯大讲堂14HTML5在海量业务上的深度运用

腾讯大讲堂分享相伴成长DJT.QQ.COMHTML5在海量业务上的深度运⽤用陈⼦子舜12年8月23⽇日星期四•⺴⽹网名PuterJam•2006年加盟腾讯公司•来腾讯之前干了啥？•写PJBlog•在腾讯之后干了啥？•QQ空间的各种重构，前端性能优化，架构设计•开放平台的各种第三⽅方接⼊入解决⽅方案•SNS应⽤用产品在终端领域的探索12年8月23⽇日星期四充满憧憬的⼀一次技术变⾰革12年8月23⽇日星期四76个组织参与W3CHTML⼯工作组12年8月23⽇日星期四我们依然存在很多担忧12年8月23⽇日星期四各种担忧•国内都是IE6的“忠实”⽤用户•那么多HTML5技术我如何开始学起？•学HTML5只能在⼿手机上⽤用么？•我如何⽤用到我的项⺫⽬目⾥里？•...12年8月23⽇日星期四8月份浏览器统计12年8月23⽇日星期四27.96%IE651.42%IE8来⾃自QQ空间的浏览器数据12年8月23⽇日星期四7.93%Chrome来⾃自QQ空间的浏览器数据12年8月23⽇日星期四什么是HTML5?12年8月23⽇日星期四⺫⽬目录•从⺴⽹网络请求开始•⽤用户使⽤用中的体验挖掘•总结12年8月23⽇日星期四从⺴⽹网络请求开始12年8月23⽇日星期四掀开潘多拉盒⼦子的⼀一句话newActiveXObject(Microsoft.XMLHTTP);12年8月23⽇日星期四早期的AJAX的实现12年8月23⽇日星期四AJAX异步请求b1.qzone.qq.comb2.qzone.qq.comb3.qzone.qq.com...bx.qzone.qq.comMicrosoft.XMLHTTPuser.qzone.qq.com12年8月23⽇日星期四跨域早期的技术挑战12年8月23⽇日星期四AJAX异步请求:⽅方案1b1.qzone.qq.comb2.qzone.qq.comb3.qzone.qq.com...bx.qzone.qq.comuser.qzone.qq.comProxyIframe•请求数过多•⻚页⾯面渲染影响较⼤大•Proxy⻚页⾯面维护成本⾼高12年8月23⽇日星期四AJAX异步请求:⽅方案2scriptsrc/scriptcallback({...})b1.qzone.qq.comb2.qzone.qq.comb3.qzone.qq.com...bx.qzone.qq.comuser.qzone.qq.com看起来是⼀一个⾮非常完美的⽅方案了？实际情况真的是这样么？12年8月23⽇日星期四•给前端的数据需要callback开始，但是其他平台不需要呢？•服务器异常，不可⽤用，⽤用户⺴⽹网络异常请求很慢，⽤用户访问的业务连接不上怎么办？•想在请求的头部给后端送更多参数。•如何更好得提交Post请求呢？???JSONP⽅方案的实际问题12年8月23⽇日星期四•虽然我们对这些问题都有对应解决⽅方案•但是我们并不觉得现有解决⽅方案很完美12年8月23⽇日星期四空间⼩小助⼿手年8月23⽇日星期四XmlHttpRequest2.0带来什么好处•增强跨平台的数据移植性•更加强⼤大的数据可控性•多样化的数据提交⽅方式12年8月23⽇日星期四XmlHttpRequest2.0数据可控性•httpheader处理•数据安全和中断处理•新的ProgressEventonreadystatechangeonloadstartonprogressonabortonerroronloadontimeoutonloadend12年8月23⽇日星期四XmlHttpRequest2.0数据收发⽅方式•通常的字符串⽅方式DomString•POST数据⽤用到的FormData•(new  FormData()).append(key,  value)•⼆二进制数据ArrayBufferView•⼆二进制⼤大对象Blob•new  Blob([value],{type:application/javascript})12年8月23⽇日星期四回归XHR,现在开始部署12年8月23⽇日星期四来⾃自朋友⺴⽹网的实践12年8月23⽇日星期四CORS⽅方案Cross-OriginResourceSharing12年8月23⽇日星期四CORS⽅方案home.pengyou.comapi.pengyou.comCross-OriginResourceSharing12年8月23⽇日星期四Access-Control-Allow-Origin:::CORS⽅方案home.pengyou.comapi.pengyou.com域名⽩白名单12年8月23⽇日星期四使⽤用CORS前的兼容⼯工作12年8月23⽇日星期四CORS/XDR在实际项⺫⽬目中的表现0.6237s0.7304s0.7384s0.7384s1.0356sProxy⽆无缓存：Proxy缓存：0.6157s0.2972s+-==-12年8月23⽇日星期四只是将是我们必须经历的⼀一次有意义的升级。12年8月23⽇日星期四是否可以回归原点？从不跨域开始？部署XHR的更多思考12年8月23⽇日星期四TGW动态加速Nginx部署XHR的更多思考QZHTTPLVS12年8月23⽇日星期四怎么帮助⽤用户定位？12年8月23⽇日星期四测量是优化的第⼀一步12年8月23⽇日星期四Timing•新的性能测量接⼝口•NavigationTiming•performance.now•⽀支持的浏览器•IE9/IE10ChromeFirefox12年8月23⽇日星期四NavigationTimingperformance.now()12年8月23⽇日星期四是Web还是Application?12年8月23⽇日星期四收发邮件56.1%浏览新闻53.5%搜索引擎51.5%获取信息41.0%论坛/BBS/讨论组36.9%在线视频/下载36.3%即时通讯34.5%在线⾳音乐/下载34.4%⽂文件上传/下载(不含⾳音乐和影视)32.9%⺴⽹网络游戏26.6%2006年末⺴⽹网民常⽤用⺴⽹网络服务12年8月23⽇日星期四即时通讯82.8%搜索引擎79.7%⺴⽹网络⾳音乐76.4%⺴⽹网络新闻73.0%博客/个⼈人空间65.7%⺴⽹网络视频65.1%⺴⽹网络游戏61.6%微博50.9%电⼦子邮件48.1%社交⺴⽹网络46.6%2012年中⺴⽹网民常⽤用⺴⽹网络服务12年8月23⽇日星期四⺴⽹网络变成⼀一种⽣生活⽅方式12年8月23⽇日星期四•37%的⽤用户会停留10分钟•23%的⽤用户会在停留30分钟•12%的⽤用户会停留接近1⼩小时QQ空间⽤用户停留时⻓长12年8月23⽇日星期四12年8月23⽇日星期四更多业务挑战•到底我们的业务在不同⽤用户硬件环境上性能如何？•我们的业务在运⾏行过程中能否更快？•只是⾸首屏加载快是绝对不够的。12年8月23⽇日星期四运⾏行中优化⽤用户使⽤用中的体验挖掘12年8月23⽇日星期四向客户端学习优化和技巧•更深⼊入的性能优化技巧12年8月23⽇日星期四更深⼊入的性能优化思考•如何发现我们⻚页⾯面性能杀⼿手？•如果你正在为⼿手机在开发webapp，你考虑过⽤用户终端的内存瓶颈么？•我们⻚页⾯面的功耗如何？12年8月23⽇日星期四⻚页⾯面爆卡的主要原因：CPU资源12年8月23⽇日星期四⼤大胆尝试:获取CPU12年8月23⽇日星期四我们是如何采集CPU•浏览器虽然没有采集接⼝口，但是浏览器是有CPU调度的接⼝口的•setTimeout/setInterval12年8月23⽇日星期四12年8月23⽇日星期四去除Iframe优化12年8月23⽇日星期四去除Iframe优化12年8月23⽇日星期四去除后的CPU性能提升12年8月23⽇日星期四去除后的CPU性能提升12年8月23⽇日星期四去除后的CPU性能提升12年8月23⽇日星期四HTML5对渲染的优化•GPU带来的体验提升12年8月23⽇日星期四webkit的⻚页⾯面渲染⼩小知识HTMLHeadBodyTitleDivdisplay=”none”DivSpanDiv12年8月23⽇日星期四webkit的⻚页⾯面渲染⼩小知识HTMLHeadBodyTitleDivdisplay=”none”DivSpanDivRenderObjectRenderObjectRenderObjectRenderObjectRenderObjectRenderObject12年8月23⽇日星期四webkit的⻚页⾯面渲染⼩小知识HTMLHeadBodyTitleDivdisplay=”none”DivSpanDivRenderLayoutRenderLayoutRenderLayoutRenderTextRenderLayerBacking12年8月23⽇日星期四webkit的⻚页⾯面渲染⼩小知识HTMLHeadBodyTitleDivdisplay=”none”DivSpanDivRenderObjectRenderObjectRenderObjectRenderObjectRenderObjectRenderObjectRenderLayoutRenderLayoutRenderLayoutRenderTextRenderLayerBacking主线程(CPU)GPU线程GPUacceleratedcompositor12年8月23⽇日星期四如何利⽤用GPU资源•WebKitGPU加速层•Canvas2D/3D(WebGL)•布局合成（LayoutCompositing）•CSS3线性过渡动画（transitions）•CSS32D/3D形变（transforms）•WebGL和视频(video)12年8月23⽇日星期四HTML5GPU加速的银弹12年8月23⽇日星期四•放弃使⽤用setTimeout/setInterval动画•简单过渡动画使⽤用css3transition•使⽤用css3transform取代以往的位移，以及未来的所有形变⾏行为HTML5GPU加速银弹12年8月23⽇日星期四⾼高精度的拖拽实验12年8月23⽇日星期四浏览器动画的⾥里程碑•requestAnimationFrame12年8月23⽇日星期四怎么去学习和运⽤用HTML5•保持⾜足够的好奇⼼心和坚持实践•以更⾼高标准去挑战现有业务•直接尝试新的解决⽅方案，思考做向下兼容12年8月23⽇日星期四Q&A12年8月23⽇日星期四更多精彩尽在[第8期]架构之美：开放环境下的网络架构[第7期]QQ空间技术架构之峥嵘岁月[第6期]QQ基础数据库架构演变之路[第4期]Q+开放平台技术沙龙[第3期]搜搜首席架构师朱会灿：搜索引擎演变史[第2期]微内核插件式懒加载客户端架构[第5期]微信之道：至简[第9期]智能应用和云服务：手机浏览器的未来之门[第10期]开放之路：成就创新的四把钥匙[第1期]1亿在线背后的技术挑战查看更多