{"action":"created","issue":{"url":"https://api.github.com/repos/amfe/article/issues/21","repository_url":"https://api.github.com/repos/amfe/article","labels_url":"https://api.github.com/repos/amfe/article/issues/21/labels{/name}","comments_url":"https://api.github.com/repos/amfe/article/issues/21/comments","events_url":"https://api.github.com/repos/amfe/article/issues/21/events","html_url":"https://github.com/amfe/article/issues/21","id":118327534,"number":21,"title":"15年双11手淘前端技术巡演 - H5性能最佳实践","user":{"login":"Tancy","id":184419,"avatar_url":"https://avatars.githubusercontent.com/u/184419?v=3","gravatar_id":"","url":"https://api.github.com/users/Tancy","html_url":"https://github.com/Tancy","followers_url":"https://api.github.com/users/Tancy/followers","following_url":"https://api.github.com/users/Tancy/following{/other_user}","gists_url":"https://api.github.com/users/Tancy/gists{/gist_id}","starred_url":"https://api.github.com/users/Tancy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Tancy/subscriptions","organizations_url":"https://api.github.com/users/Tancy/orgs","repos_url":"https://api.github.com/users/Tancy/repos","events_url":"https://api.github.com/users/Tancy/events{/privacy}","received_events_url":"https://api.github.com/users/Tancy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":73,"created_at":"2015-11-23T06:43:41Z","updated_at":"2016-04-22T10:47:35Z","closed_at":null,"body":"## 前言\r\n\r\n2015年是全面『无线化』的一年，在BAT（[财报](http://datanews.caixin.com/2015-11-12/100873339.html)）几家公司都已经超过50%的流量来自移动端，这次 `双11` 更是占到了68.67%无线交易 （[天猫微博](http://weibo.com/1768198384/D3t6poGvr)）。\r\n\r\n手淘中大量的业务采用H5的方式开发，H5体验好坏全面影响着手淘的使用体验。\r\n\r\n今年手机淘宝在技术上重点解决“顿”，“卡”，“慢”的问题，并提出了“521法则” ,具体指：\r\n- App内存节省50%\r\n- 绘制帧率，滑动体验提升20%\r\n- App全链路实现 1S 法则\r\n\t- 强网（4G/Wifi）实现1S首屏（包括图片）加载\r\n\t- 3G 1S首包返回\r\n\t- 2G 1S建连，并且实现高复用 从底层到前端\r\n\r\n其中1S加载完成是H5页面需要解决的重点问题，也是难点。\r\n\r\n下面给大家介绍我们1年多来解决了些什么样的问题，以及带来多少性能的提升。以下每一条都是手淘在无线领域获得的宝贵经验。\r\n\r\n## 系统&网络环境(手淘2015)\r\n\r\n首先给大家介绍一下目前手淘的环境情况（供大家在设备兼容方面参考）。\r\n\r\n### 操作系统\r\n\r\n操作系统方面iOS占比42.23%，Android 占比52.38%，阿里云OS 占比5.29%，Windows Phone 占比 0.1%。\r\n\r\n![_679173aceca648b6a1bfe37c038f00b9](http://img1.tbcdn.cn/L1/461/1/878fbd55747b4c3d20ba948300ea3191c6a0f82c.jpeg)\r\n\r\n\r\n### iOS版本 & Android版本\r\n\r\niOS 系统版本占比情况：\r\n\r\n- iOS 9 49% \r\n- iOS 8 38% \r\n- iOS 7 11%\r\n\r\nAndroid 系统版本对比iOS 碎片化较为严重，所幸4.0以下版本占比小于10%。\r\n\r\n占比如下：\r\n\r\n- 4.4.4版本30%\r\n- 4.4.2版本16%\r\n- 4.3版本11%\r\n- 4.2.2版本10%\r\n- 5.0版本以上10%\r\n\r\n![Banners_and_Alerts_____numbers_5f551394f00e41759c4e026c3eb0763a](http://img4.tbcdn.cn/L1/461/1/6c014e9e8587d2401c11944361138dc41a0bc685.jpeg)\r\n\r\n\r\n### 网络情况\r\n\r\n网络情况方面，得力于近年的3G/4G推广已经占35%，2G网络占比15%左右。\r\n\r\n![PastedGraphic_2_2a17a5229dc441a59c1391a5dbaabbbb](http://img4.tbcdn.cn/L1/461/1/ebf9476497baee78aaf9b63222a73b99b6ba0cc7.jpeg)\r\n\r\n### 运营商\r\n\r\n运营商方面 中国移动占据70%的用户，中国联通18.12%，中国电信11.69%。其中需要注意的是移动3G技术（TD-SCDMA）性能差设备支持少，移动4G容易在信号不理想的地段降级成2G。\r\n\r\n![PastedGraphic_3_0a5b0e4fa03a49eebe9f2c863af34f01](http://img1.tbcdn.cn/L1/461/1/ce92ea160336a992b62992244932a0d31c9d2a23.jpeg)\r\n\r\n## 收集性能数据&建立衡量标准\r\n\r\n淘系H5页面主要在手淘客户端中展现，为了了解H5页面在客户端中的性能表现，我们在WebView容器中做了大量性能数据的采集，以页面，数据接口，单个静态资源为维度采集。\r\n\r\nH5页面：我们以WebView的DidFinishLoad事件触发作为完成加载（Fully Loaded）的时间。\r\n\r\n同时对支持performance.timing的设备收集Timing数据，用于详细分析网络请求各阶段的性能消耗情况。\r\n\r\nWebViewDidFinishLoad 官方解释：Sent after a web view finishes loading a frame. [Android](http://developer.android.com/reference/android/webkit/WebViewClient.html#onPageFinished(android.webkit.WebView, java.lang.String)) [iOS](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebViewDelegate_Protocol/#//apple_ref/occ/intfm/UIWebViewDelegate/webViewDidFinishLoad:)\r\n\r\n## 1年前H5性能状况\r\n\r\n针对几个主要的业务，我们将收集到的用户性能数据整理后得到以下的结果（部分业务按传统的网页性能优化方法优化过）。\r\n\r\n![DraggedImage_25982e5b7f4046efb0f580fc4bd1b005_d2e2135e89d743a8bb3804c208e11a04](http://img2.tbcdn.cn/L1/461/1/ad47c8ba649ccb32df34fc47488d8ec71c66c69e.jpeg)\r\n\r\n性能情况非常不理想，不达标严重。2G下大于10s的占比在50%， 3G：6s内的低于70%近一半。\r\n\r\n## 传统优化\r\n\r\n看到上面的性能情况，我们最先想到的优化方法就是PC时代[YAHOO 23条web性能优化军规](https://developer.yahoo.com/performance/rules.html)。\r\n\r\n首先看看我们日常业务的请求瀑布图是怎么样的，根据这些情况看那些可以用规则去优化。\r\n\r\n![DraggedImage_5e36ed7656a7425d8afabd305bba01dc](http://img2.tbcdn.cn/L1/461/1/00fc70edc0b565e209d7751c8c98dee7bbf81992.jpeg)\r\n\r\n### 请求数优化\r\n\r\n- 在请求数控制方面，将js，css各用combo的方式合并成单个资源。\r\n- 页面图片等等，只加载首屏资源，提升首屏展示速度。\r\n- 使用CSS ,SVG,ICONFONT 替换UI图片\r\n\r\n#### 合理使用IconFont\r\n\r\niconfont对于前端来说有很多优点：自由变化大小 矢量不失真、自由修改颜色、可以添加一些视觉效果如 阴影、旋转、透明度、兼容IE6。\r\n\r\n##### 使用现状\r\n\r\n目前大家都基本上从平台上生成，生成后的文件如下：\r\n\r\n`@font-face {`\r\n`   font-family: \"iconfont\";`\r\n`   src: url('iconfont.eot'); /* IE9*/`\r\n`   src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */`\r\n`   url('iconfont.woff') format('woff'), /* chrome、firefox */`\r\n`   url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/`\r\n`   url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */\r\n `}`\r\n\r\n这样直接引用在项目中，真实在手机上的网络请求如下（在桌面版Chrome浏览器网络中无法看到这些请求）：\r\n\r\n![DraggedImage_4cf266d1fccb4833928f5f6d263c7f86](http://img1.tbcdn.cn/L1/461/1/3df12a8071b1e1ea29d2e8356cf72e171c1c16b4.jpeg)\r\n\r\n这样造成了极大的网络带宽的消耗，这些icon资源往往在界面渲染中占据重要位置。\r\n目前我们移动端只加载ttf一个字体文件，对于较小的文件也可以考虑base64在css文件中。\r\n\r\n### 首屏多个动态接口合并请求\r\n\r\n日常的业务中，一个页面往往拆分出多个异步数据接口（后端开发说：解耦），甚至首屏也需要3-5个接口（如动态banner区块，推荐内容，商品列表等），有些还有嵌套关系。\r\n但是这些对页面性能造成不小的影响。\r\n\r\n![DraggedImage_70cd539eaa23481cb41eac9efd680c9a](http://img3.tbcdn.cn/L1/461/1/c4bd9da070370e58adb2f37aa29303a73872a83d.png)\r\n\r\n手淘中某个接口在各网络下的请求性能，2G，3G下平均的消耗时间在2-6s完成下载。其中几个请求性能稍差点对整个页面影响也深远。\r\n\r\n![_15_11_17_12_04_02dfa888dec3495891b9e5c6fc4eaac5](http://img4.tbcdn.cn/L1/461/1/5bea06a7076bdae1fdb48a87a3acc862d146a40c.jpeg)\r\n\r\n\r\n### 禁止重定向\r\n\r\n在我们CaseByCase的分析中发现，页面&静态资源的重定向会造成巨大的性能损耗。\r\n特别使用前端JS脚本来实现页面跳转的。\r\n\r\n![_3_f60e75b7fefc46ed8d9123fdfa94c2a4](http://img1.tbcdn.cn/L1/461/1/a7a55d98c484db010d3e623c50a74ed1191deb01.jpeg)\r\n\r\n### 图片优化\r\n\r\n手淘的特点就是图片多，图片的性能好坏可不仅仅影响用户体验哦，还直接影响着交易，`钱 钱 钱…`\r\n我们在图片方面做了大量的优化。\r\n\r\n#### 使用WebP格式。\r\n\r\n手淘2年前已经开始使用WebP格式了（主要native使用），1年前H5全面使用，其中iOS 的webview中由手淘以插件的方式支持。我们以手淘线上真实案例来看使用webp格式的前后效果。\r\n案例为：线上的一个活动页面,打开一看其中的banner 就320多KB，整个页面加载457KB，如果就单单banner图片换成webp格式，整个页面的大小就只有181KB。\r\n\r\n`使用WebP前`\r\n\r\n![DraggedImage_c2d16e1273bf429aac2118123c477d02](http://img4.tbcdn.cn/L1/461/1/9059aaae312c3c54c626fff2e1d362cc8eb80efb.jpeg)\r\n\r\n`使用WebP后`\r\n\r\n![DraggedImage_914eb83c506e4e25bed4bcacbe1c546c](http://img1.tbcdn.cn/L1/461/1/dc64d09a7d395618447eb160b591bb5b8b420b94.jpeg)\r\n\r\n`Banner部分对比`\r\n\r\n![DraggedImage_e2a8298a99a44233ab64738a69541eba](http://img4.tbcdn.cn/L1/461/1/3d6f841424e93b7e6b36e21b6966d36968ac9916.jpeg)\r\n\r\n这种业务类型的案例，我们改进一下就可以为用户，为公司`省70%`的流量费用。\r\n\r\n#### 商品图片优化\r\n\r\n商品图片在手淘的各个产品中都是必不可少的，为了适应不同业务需求的需要，我们在CDN服务上生成各个尺寸和质量的图片（近100个规格）。\r\n\r\n- q值：根据手淘网络情况，加载不同质量的商品图片（q30,q50,q75,q90）\r\n- 锐化：根据需要调整图片锐化值\r\n- DPI：根据设备DPI取适当尺寸商品图片\r\n- 合理的使用CDN图片尺寸可以带来下载图片的性能提升，还可以减少不必要的内存消耗。 我们日常中会用到的尺寸，每浪费10像素的宽高都可以造成很大的内存资源浪费。\r\n\r\n计算方式如下：\r\n\r\n![DraggedImage_37ea251e09c44f1dbe24f3b689068cb8](http://img4.tbcdn.cn/L1/461/1/010b7e85430ba10c2d8e8686c5be30bc8c6de8aa.png)\r\n\r\n#### 图片DPI 优化\r\n\r\n根据设备DPI值和图片质量Q值做优化，达到最优视觉体验和加载性能（DPI高，宽高增加后可适当降低质量）。\r\n\r\n![DraggedImage_6b19fe95e2294949bc5c9c2a85cdd12a](http://img1.tbcdn.cn/L1/461/1/cabc2870524a2188568313b698f8c63589df68fe.jpeg)\r\n\r\n#### Sprite图片\r\n\r\nSprite图片（又称：雪碧图）被运用在众多使用了很多小图标的网站上。相对于把每张小图标以单个文件的形式引用到页面上，Sprite图片会只要请求一张图片就够了，减少了请求数提升了加载性能，还有就是方便图标管理。但在移动互联网时代在使用Sprite图片需要合理利用，不然反对性能造成影响。\r\n\r\n##### 解码内存消耗\r\n\r\nDecoded in memory的计算公式： w x h x 4（宽 x 高 x 每个像素4个字节）\r\n如果设备DPI大于1，还需要 X DPI系数。如Retina设备X 4，RetinaHD设备X 9.\r\n\r\n![DraggedImage_d15b37a3f44a453188bbcedcdd9d9f0b](http://img2.tbcdn.cn/L1/461/1/804093e5ccea3635dd72e194943c87b6077437d2.png)\r\n\r\n\r\n\r\n##### 禁止生成大图且利用率少\r\n由于图片在浏览器中的解码方式，合理的生成紧凑的Sprite图片，即可以带来更少的请求数，又高性能低消耗。\r\n\r\n![DraggedImage_2fd69d286e5f4ef18caaa3bc908604f1](http://img1.tbcdn.cn/L1/461/1/be2da3ae9c1a9d6bbd27470e6b3028f648ea3468.png)\r\n\r\n##### 建议合并成如下：\r\n\r\n![DraggedImage_dc8095e9f7514aa8a92252c0445b5434](http://img1.tbcdn.cn/L1/461/1/ceee5692499475c1a92d336923687af9af0f8134.jpeg)\r\n\r\n##### 不建议合并成如下：\r\n\r\n![DraggedImage_1a20c971cf054438bd64dd0043896383](http://img1.tbcdn.cn/L1/461/1/4066811af2497f2b2d133565b0edc13b25715f35.jpeg)\r\n\r\n\r\n\r\n## 结合Native优化\r\n\r\n经过几轮的常规前端性能优化后，页面性能有进步，但是离目标还远远不够。我们也不断的问自己到到底那里慢，那里瓶颈最大。我们开始试着CaseByCase的分析页以及梳理H5在手淘中的全链路性能消耗。\r\n\r\n最终做了一些和native结合的优化思路。\r\n\r\n### HTTPDNS\r\n\r\nDNS解析想必大家都知道，在传统PC时代DNS Lookup基本在几十ms内。而我们通过大量的数据采集和真实网络抓包分析（存在DNS解析的请求），DNS的消耗相当可观，2G网络大量5-10s，3G网络平均也要3-5s。\r\n\r\n案例：iPhone5s  联通3G\r\n\r\n![78783DE2_043F_47C4_947D_2F368A44CD77_4a2da76568a345308af786a15338f704](http://img4.tbcdn.cn/L1/461/1/42403fb3c63b3349d845dd05c0e631e58ecdbe8f.jpeg)\r\n\r\n![DraggedImage_116eabb710e9451bac870de5c9140126](http://img2.tbcdn.cn/L1/461/1/50f6f0fc75c1e3537c876ecd5a83541debf27667.jpeg)\r\n\r\n针对这种情况，手淘开发了一套httpdns，httpdns是面向无线端的域名解析服务，与传统走UDP协议的DNS不同，httpdns基于HTTP协议。 基于HTTP的域名解析，减少域名解析部分的时间并解决DNS劫持的问题。\r\n\r\n手淘httpdns服务在启动的时候就会对白名单的域名进行域名解析,返回对应服务的最近ip（各运营商），端口号，协议类型，心跳 等信息。\r\n\r\n#### 优点\r\n\r\n- 防止域名劫持\r\n\r\n传统DNS由Local DNS解析域名，不同运营商的Local DNS有不同的策略，某些Local DNS可能会劫持特定的域名。采用httpdns能够绕过Local DNS，避免被劫持；另外，httpdns的解析结果包含HMAC校验，也能够防止解析结果被中间网络设备窜改。\r\n\r\n- 更精准的调度\r\n\r\n对域名解析而言，尤其是CDN域名，解析得到的IP应该更靠近客户端的地区和运营商，这样才能有更快的网络访问速度。然而，由于运营商策略的多样性，其推送的Local DNS可能和客户端不在同一个地区，这时得到的解析结果可能不是最优的。httpdns能够得到客户端的出口网关IP，从而能够更准确地判断客户端的地区和运营商，得到更精准的解析结果。\r\n\r\n- 更小的解析延迟和波动\r\n\r\n在2G/3G这种移动网络下，DNS解析的延迟和波动都比较大。就单次解析请求而言，httpdns不会比传统的DNS更快，但通过httpdns客户端SDK的配合，总体而言，能够显著降低解析延迟和波动。httpdns客户端SDK有几个特性：预解析、多域名解析、TTL缓存和异步请求。\r\n\r\n- 额外的域名相关信息\r\n\r\n传统DNS的解析结果只有ip，httpdns的解析结果采用JSON格式，除了ip外，还支持其它域名相关的信息，比如端口、spdy协议等。利用这些额外的信息，APP可以启用或停止某个功能，甚至利用httpdns来做灰度发布，通过httpdns控制灰度的比例。\r\n\r\n### SSL+SPDY协议\r\n\r\n在经过以上的优化方案后，H5页面的性能始终离目标还远。在移动端建连的消耗非常大，在业界也只有SPDY 这个玩意儿比较新颖。\r\n理论上SPDY协议可以完成多路复用的加密全双工通道，显著提升非wifi环境下的网络体验。\r\n\r\n![DraggedImage_2e08b076724a427a9cf91d6f8ab1146b](http://img3.tbcdn.cn/L1/461/1/3a2243247f2bec377d2d22a5c704e75ffb48dbc6.jpeg)\r\n\r\n- 多路复用请求优化\r\n- 服务器推送技术\r\n- SPDY压缩http头\r\n\r\n看着很牛逼的技术，但是等我们第一期上线后发现，从数据上几乎察觉不了变化。\r\n\r\n### 域名收敛\r\n\r\n域名收敛是指尽量控制一个页面中使用的域名数量。为什么要这么做呢？我们前面提到DNS解析，减少域名数量可以降低DNS解析的成本。上文还提到SPDY协议，其中一个特性就是复用请求，使用同一个域名可以更多的复用请求。这个PC时代正好相反，我们原先用多个域名提升并发请求量已提升性能。\r\nPC时代的域名数量类似这样的\r\n\r\n![DraggedImage_fa4838181dc843978eada2f101ed3cd8](http://img4.tbcdn.cn/L1/461/1/4cd1b24ecb5a9a24eb663163f1ad6a1aec16ddd7.jpeg)\r\n\r\n\r\n#### 域名最终形态（建议）\r\n\r\n- 页面请求 域名一个\r\n- 静态资源（css，js） 一个\r\n- 图片资源 一个\r\n- 动态数据一个\r\n- 数据统计一个\r\n\r\n最终结合SSL+SPDY+域名收敛 才发挥出真正的作用。下图是各网络下SSL 和 非SSL 的性能情况。\r\n\r\n![Uploading 魔兔_-_无线统一监控平台 2.jpg…](https://gw.alicdn.com/tps/TB1B43AKFXXXXbIXpXXXXXXXXXX-2326-1146.jpg)\r\n\r\n![](https://gw.alicdn.com/tps/TB1NhIwKFXXXXajXFXXXXXXXXXX-2326-1462.jpg)\r\n\r\n### 动态数据复用状态\r\n\r\n动态数据部分，相信各个公司都差不多，动态数据会有专门的API提供出来。手淘（mtop平台）也一样，接口总会有各种状态，登录失效，令牌过期，签名失效等。手淘使用了重发请求的方式来获取新的签名令牌等。导致如下的情况（始料未及）：\r\n在手淘真实环境中发现一次令牌过期，可以造成10多秒的延迟。\r\n\r\n![DraggedImage_360111fd7f19443990115e75c5b4c071](http://img4.tbcdn.cn/L1/461/1/6972640ac494594b9cc7b1d10c3f662be82c2992.jpeg)\r\n\r\n手淘在启动的时候Native已经做了很多的数据请求，这些也是mtop请求，只是由native程序发出。 我们判断到页面是在手淘客户端中就会使用native发出mtop数据请求，这样就规避了令牌失效，签名失效的问题。\r\n\r\n直本次优化后，我们第一次看到了非常激动人心的数据:`第一次里程碑式的提升`\r\n\r\n`优化前`\r\n\r\n![_1_593a69d6043a4ad3a5143051e27ead2e](http://img1.tbcdn.cn/L1/461/1/fa4ca9cd441d51fb57549dbcf15fbb1ca8064811.jpeg)\r\n\r\n`优化后`\r\n\r\n![_2_313ab932ffc0413f9889c21925f12693](http://img2.tbcdn.cn/L1/461/1/d34ad73ddf6aa07fb70ebd1b54fae05843765a7e.jpeg)\r\n\r\n### 预加载和离线化方案\r\n\r\n手淘中加载H5页面的首屏白屏时间较长，基于此，集团各BU都内部产生了离线包的方案（手淘，航旅，钱包），将静态资源通过Hybrid的方式提前加载到本地。大量了资源预加载给H5页面带来了极大的提升，资源加载时间降到30ms内。\r\n今年双11前，针对预加载方案，在技术上解决了3个痛点\r\n\r\n- 开发成本（开发方式侵入性强）\r\n- 静态资源解Combo\r\n- 更新到达率\r\n\r\n关于 预加载&离线化方案详细技术细节很多，这里先简单阐述这个功能带来的性能提升价值。\r\n\r\n下图案例：\r\n\r\n- 第一个HTML没有预加载，阻塞页面时间较长\r\n- 静态资源部分几ms 级别加载，加载性能非常好\r\n\r\n![lALOAmbUQ80D7M0HgA_1920_1004_40fe7ff23e10467e9f1cf3c02c0498bf](http://img3.tbcdn.cn/L1/461/1/d353a7e60865cd8d4f9664c12db53e9960772bc3.jpeg)\r\n\r\n`这是第二次里程碑式的提升，3G，4G，WIFI网络性能全面提升。`\r\n\r\n截至到这个时间点为止，我们个别业务的性能有了显著的提升。以下是其中一个业务的3个性能优化节点的性能优化对比。其中10s以上加载完成的占比大大的缩小，1s以内的占比上升较高。\r\n\r\n![DraggedImage_4a5daf7dd5cc485d9ce6c44ef83226db](http://img3.tbcdn.cn/L1/461/1/a2320b09124b982fe158efe1a982d68d0a3efa15.jpeg)\r\n\r\n\r\n### 统计方案优化\r\n业务数据统计在日常工作中是必不可少的部分，因统计部分量级不大，往往会忽视掉。其中我们对一个业务CaseByCase的分析后发现。一个中国移动 2G/3G.Edge的用户在请求H5页面的时候 log.mmstat.com 的日志埋点花了近`6s`才加载完成。\r\n\r\n![514E1116_9ECE_4768_8BE8_C2F502D661A0_af89dc8bee8f47708c3881c573124ed2](http://img1.tbcdn.cn/L1/461/1/d4a53d25686b1a912d716e3a81fff683743b1b8e.jpeg)\r\n\r\n![DraggedImage_68e0466f8b59416f8a7a29f3fb0f6524](http://img1.tbcdn.cn/L1/461/1/bb13cd9cb64883c3d17e37a4729c194636a901b0.jpeg)\r\n\r\n后面我们对数据统计部分做了Native的异步上传。效果是这样滴：\r\n\r\niOS：\r\n\r\n![_15_11_17_03_09_f470e9f4998a4a5c86918a92d5525ff7](http://img3.tbcdn.cn/L1/461/1/cabf8aaff759f8b70362daa27f6d0a46ab441eac.jpeg)\r\n\r\nAndroid：\r\n\r\n![_15_11_17_03_10_94376eb235b64ed2974650f4738d8cc4](http://img4.tbcdn.cn/L1/461/1/6dacf2d37ed3cf074764588eab5303f608ae7455.jpeg)\r\n\r\n`第三次里程碑式的提升，2G网络性能全面提升`\r\n\r\n## 渲染优化\r\n\r\n- 禁止使用iframe （阻塞父文档onload事件）\r\n- 禁止使用GIF图片实现Loading 效果 （降低CPU消耗，提升渲染性能）[视频](http://v.youku.com/v_show/id_XODY2OTI5NzI4.html)。\r\n\r\n\r\n## 业务效果\r\n前面说了这么多性能优化，肯定会有问，花了这么多力气，前端到客户端到后端搞了这么多，价值在那里呢。业界google，amazon，microsoft都给过速度性能对业务对GMV的影响。\r\n下面是两个手淘中的业务在持续几个月的性能优化后UV，跳失率，停留时间的变化。\r\n\r\n![DraggedImage_fdb5687616a24cf092473c43f6401678](http://img4.tbcdn.cn/L1/461/1/caee20f2d3d4d42082d97689a49f7958ade4a416.jpeg)\r\n\r\n\r\n![DraggedImage_9acd1efea6424102bb78fb1d1e9b2fec](http://img1.tbcdn.cn/L1/461/1/5d78f6ae74fc23ec494d656f7f8fe8c92f15096d.jpeg)\r\n\r\n\r\n\r\n## 2015 双11 战绩\r\n\r\n好了，说了这么多这次双11搞的怎么样呢？\r\n\r\n![2015_11_H5__numbers_414306f6efe84b3bbde412781cede368](http://img4.tbcdn.cn/L1/461/1/c5b2237afcd3672ddffb8f5c541be39dd435fd03.jpeg)\r\n\r\n![2015_11_H5__numbers](http://img2.tbcdn.cn/L1/461/1/0ec1455fc5dc095c9c6ae1a6cba433f7ece1ee06.jpeg)\r\n\r\n在无线时代，H5页面中的任意一个微小的点都会应网络问题被放大N倍。持续分析用户真实数据和CaseByCase的分析不同业务场景，才能真正找到性能瓶颈。\r\n\r\nH5要达到极致的体验，需要大家跳出前端的圈子，从客户端，后端 一起的角度来共同协助发挥各自的优势才能真正做到极致的体验。后面有更多精彩等这大家。"},"comment":{"url":"https://api.github.com/repos/amfe/article/issues/comments/213375811","html_url":"https://github.com/amfe/article/issues/21#issuecomment-213375811","issue_url":"https://api.github.com/repos/amfe/article/issues/21","id":213375811,"user":{"login":"signer","id":543170,"avatar_url":"https://avatars.githubusercontent.com/u/543170?v=3","gravatar_id":"","url":"https://api.github.com/users/signer","html_url":"https://github.com/signer","followers_url":"https://api.github.com/users/signer/followers","following_url":"https://api.github.com/users/signer/following{/other_user}","gists_url":"https://api.github.com/users/signer/gists{/gist_id}","starred_url":"https://api.github.com/users/signer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/signer/subscriptions","organizations_url":"https://api.github.com/users/signer/orgs","repos_url":"https://api.github.com/users/signer/repos","events_url":"https://api.github.com/users/signer/events{/privacy}","received_events_url":"https://api.github.com/users/signer/received_events","type":"User","site_admin":false},"created_at":"2016-04-22T10:47:34Z","updated_at":"2016-04-22T10:47:34Z","body":"原来如此, 这个域名范围是可配置的吗? 我可以和小二申请加入白名单吗?"}}