手淘双十一521 性能优化项目揭秘
|
亿万用户都会在双十一这一天打开手机淘宝，高兴地在会场页面不断浏览，面对琳琅满目的商品图片，抢着添加购物车，下单付款。为了让用户更顺畅更方便地实现这一切，做到“如丝般顺滑”，双十一前夕手机淘宝成立了“521”（我爱你）性能优化项目，在日常优化基础之上进行三个方面的专项优化攻关，分别是： 1)H5页面的一秒法则； 2)启动时间和页面帧率提升20%； 3)Android内存占用降低50%。 优化过程中遇到的困难，思考后找寻的方案，实施后提取的经验将会在下面这篇文章中详细地介绍给大家。 第一章 一秒法则的实现 “1S法则”是面向Web侧，H5链路上加载性能和体验方向上的一个指标，具体指： “强网”(4G/WIFI)下，1秒完全完成页面加载，包括首屏资源，可看亦可用; 3G下1秒完成首包的返回 2G下1秒完成建连。 在移动网络环境下，http请求和资源加载与有线网络或者PC时代相比有着本质区别，尤其是在2G/3G网络下，往往一个资源请求建连的时间都会是整个Request-Response流程里面的大头，一些小资源上拖累效应尤其明显。例如一个1k的图片，即使在10k/s 的极慢网速下，理论上0.1秒可下载完毕，但由于建立连接的巨大消耗，这样一个请求会要耗上好几秒。 仅仅“建连”这一个点，就能说明移动时代的Web侧性能优化和PC时代目标和方式都相去甚远，要求我们必须从更底层，更细致的去抓，才能取得看起来相对有效的结果。 15年初的性能情况 平均LoadTime-WIFI 平均LoadTime - 4G 平均LoadTime - 2G 3.35s 3.84s 14.34s 可以看到优化前,平均时间很难接近1秒。为了实现优化目标，在技术和实施抓手层面，由底层往上，做了四方面事情： 网络节点：HttpDNS优化 建连复用：SSL化，SPDY建连高复用 容器层面：离线化和预加载方案 前端组件：请求控制，域名收敛，图片库，前端性能CheckList 网络节点：HttpDNS优化 DNS解析想必大家都知道，在传统PC时代DNS Lookup基本在几十ms内。而我们通过大量的数据采集和真实网络抓包分析（存在DNS解析的请求），DNS的消耗相当可观，2G网络大量5-10s，3G网络平均也要3-5s。 针对这种情况，手淘开发了一套HttpDNS－面向无线端的域名解析服务，与传统走UDP协议的DNS不同，HttpDNS基于HTTP协议。基于HTTP的域名解析，减少域名解析部分的时间并解决DNS劫持的问题。 手淘HttpDNS服务在启动的时候就会对白名单的域名进行域名解析,返回对应服务的最近IP(各运营商),端口号,协议类型,心跳等信息。 优点 1.防止域名劫持 传统DNS由Local DNS解析域名，不同运营商的Local DNS有不同的策略，某些Local DNS可能会劫持特定的域名。采用HttpDNS能够绕过Local DNS，避免被劫持；另外，HttpDNS的解析结果包含HMAC校验，也能够防止解析结果被中间网络设备篡改。 2.更精准的调度 对域名解析而言，尤其是CDN域名，解析得到的IP应该更靠近客户端的地区和运营商，这样才能有更快的网络访问速度。然而，由于运营商策略的多样性，其推送的Local DNS可能和客户端不在同一个地区，这时得到的解析结果可能不是最优的。HttpDNS能够得到客户端的出口网关IP，从而能够更准确地判断客户端的地区和运营商，得到更精准的解析结果。 3.更小的解析延迟和波动 在2G/3G这种移动网络下，DNS解析的延迟和波动都比较大。就单次解析请求而言，HttpDNS不会比传统的DNS更快，但通过HttpDNS客户端SDK的配合，总体而言，能够显著降低解析延迟和波动。HttpDNS客户端SDK有几个特性：预解析、多域名解析、TTL缓存和异步请求。 4.额外的域名相关信息 传统DNS的解析结果只有ip，HttpDNS的解析结果采用JSON格式，除了ip外，还支持其它域名相关的信息，比如端口、spdy协议等。利用这些额外的信息，APP可以启用或停止某个功能，甚至利用HttpDNS来做灰度发布，通过HttpDNS控制灰度的比例。 建连复用：SSL化，SPDY建连高复用 出于安全目的，淘宝实现了全站SSL化。本身和H5链路性能优化没有直接的关系，但是从数据层面看，SSL化之后的资源加载耗时都会略优于普通的Http连接。 有读者会有疑惑，SSL化之后每个域名首次请求会额外增加一个“SSL握手”的时间，DNS建连也会比http的状态下要长，这是不可避免的，但是为什么一次完整的RequestRespone 流程耗时会比http状态下短呢？ 合理的解释是：SSL化之后，SPDY可以默认开启，SPDY协议下的传输效率和建连复用效益将最大化。SPDY协议下，资源并发请求数将不再受浏览器webview的并发请求数量限制，并发100+都是可能的。 同时，在保证了域名收敛之后，同样域名下的资源请求将可以完全复用第一次的DNS建连和SSL握手，所以，仅在第一次消耗的时间完全可以被SPDY后续带来的资源传输效率，并发能力，以及连接复用度带来的收益补回来。甚至理论上，越复杂的页面，资源越多的情况，SSL化+SPDY之后在性能上带来的收益越大。 容器层面：离线化和预加载方案 收益最明显，实现中遇到困难最多的就是离线化或者说资源预加载的方案。预加载方案是为了在用户访问H5之前，将页面静态资源（HTML/JS/CSS/IMG...）打包预加载到客户端；用户访问H5时，将网络IO拦截并替换为本地文件IO；从而实现H5加载性能的大幅度提升。
手淘实现要比上面的通用示意图复杂：因为Android和iOS安装包已经很大，所以预加载Zip包（以下简称“包”）都是从服务器端下载到客户端；本地需要记录整体包状态，并在合适的时机与服务器通信并交换状态信息。在包发布更新的过程中要注意，本地版本和服务端最新包之间的差量同步，必要的网络判断，WiFi下才下载等。 面对亿级UV，并且在服务器资源很有限的情况下搞定这个流程，需要借助CDN来扛住压力，实际上CDN扛住了约98%的流量。需要注意的是预加载实际上也是一种缓存，更新比H5稍慢一些，主要受几个因素影响：推送到达率（用户是否在线，用户所在网络质量），总控，服务端策略等，所以需要通过推拉结合的触发策略并优化下载包的体积（增量包）来提升到达率。 （编辑：云计算网_宿迁站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
