《手腾JS资源版本增量更新方案.pdf》由会员分享，可在线阅读，更多相关《手腾JS资源版本增量更新方案.pdf（25页珍藏版）》请在三一文库上搜索。
1、手腾手腾JS资源版本增量更新方案资源版本增量更新方案 waynelu( 2014-04 about me 卢勇福（waynelu） 微博: http:/ http:/ github: https:/ 提纲 提纲 l 背景和问题 背景和问题 l 传统cdn静态资源方式存储js 传统cdn静态资源方式存储js l html5离线存储方式存储js html5离线存储方式存储js l js增量更新算法设计 js增量更新算法设计 l 增量更新接入方案 增量更新接入方案 l 实战效果 实战效果 背景和问题 2014.3.1-2014.3.31期间手腾的几个webapp 共发布:12次， 发布间隔:23天，
2、 每次修改js:3至4个 js请求:2亿多次 js修改:基本小于5%，不超过20% 的。 背景和问题 在快速迭代的敏捷开发过程中，我们通过 快速更新版本及时响应了用户需求和bug修复， 但是我们同时也浪费了用户极为看重的流量资 源！ 传统cdn静态资源方式存储传统cdn静态资源方式存储js js cdn+cdn+浏览器浏览器cache cache 优点优点: : 1.简单，容易维护 2.304 cache 缺点缺点： 1.缓存会实效，用户强制刷新时可能会有http请求 2.快速迭代版本过程中少量修改，全量更新 html5html5离线存储方式存储离线存储方式存储js js html5 appc
3、ache (html5 appcache (离线存储离线存储） 优点优点： 真正的离线，只有版本更新才会有请求 缺点缺点: : 1.新版本启用刷新体验问题 2.难于维护，灰度等策略比较难实施 3.快速迭代版本过程中少量修改，全量更新 本地存储模拟离线存储本地存储模拟离线存储 可行性可行性: : 1.大小5m,一般js小于1m 2.跨域问题：Access-Control-Allow-Origin:* 3.key-value形式本地数据，用eval执行 优点优点： 1.减少不必要的http请求,有更新才有请求，省流量 2.避免离线存储带来的子刷新体验问题 3.增量更新! js增量更新算法设计 js
4、增量更新算法设计 旧文件分成n块 chunk0 chunk1 chunk2 chunk3 chunk4 chunk5 通过滚动查找得到增量更新文件 chunk0 data1 chunk1 chunk2 data2 chunk3 chunk4 chunk5 最终增量文件表示如下: 1,data1,2,3,data2,4,5,6 进一步合并顺序块得到: 1,1,data1,2,2,data2,4,3 新文件内容: chunk0+data1+chunk1+chunk2+data2+chunk3+chunk4+chunk5 js增量更新算法设计 以 s=1345678abcdefghijklmnopq
5、 修改为 a=13456f78abcd2efghijklmnopq 例 设块长度为4则，源文件分成(第一行块号，第二行数据): 最终增量文件表示如下数组: “a=1“,2,“f“,3,“cd2ef“,5,6,7 进一步合并顺序块，可用一个js数组表示为 “a=1”,2,1,“f”,3,1,“cd2ef”,5,3 s=1 3456 78ab cdef ghij klmn opq 1 2 3 4 5 6 7 新数据新数据 2 新数据新数据 3 新数据新数据 5 6 7 a=1 3456 f 78ab cd2ef ghij klmn opq 通过滚动查找比对，得到新的文件构成如下 js增量更新算法设
6、计 /* param source是上一个版本内容， param trunkSize是块大小， param checksumcode是两个版本间的增量文件数组 */ function merge(source,trunkSize,checkSumCode) var strResult=“; for(var i=0;icheckSumCode.length;i+) var code=checkSumCodei; if(typeof (code)=string) strResult+=code; else var start=code0*trunkSize; var strSize=code1*t
7、runkSize; var oldcode=source.substr(start,strSize); strResult+=oldcode; return strResult; 浏览器端更新流程 server端实现之打包工具实现 server端实现之打包工具实现 增量文件和全量文件大小对比 增量文件内容接图： 打包工具实现方式的优缺点 优点： 离线完成，然后直接上传cdn，跟传统方式没有区别 缺点: 只能跨一个版本实现增量更新 对回退版本是需要全量更新 具体实现改进-servlet代理 具体实现-servlet代理 优点： 1.可跨多个版本增量更新 2.回退版本也可以增量 3.无需手动生成增
8、量文件 缺点: 需要自己能控制cdn源服务器 对cdn的push是被动的 手机腾讯网增量更新接入方案 MT手机腾讯网前端统一框架 特点： 1.基于AMD的js模块管理加载器 2. 无缝接入本地存储，js增量更新，兼容统 一版本和单个js文件单个版本两种版本管理 方式 3.mtbuild增量文件生成工具，infocdn手腾 js增量更新cdn源 第三方模块管理工具插件 seajs: seajs: storeinc，seajs增量更新插件,配套spm-storeinc-build来实现打包混淆 requirejs: requirejs: rstoreinc，requirejs增量更新插件，配套有修
9、改后的混淆打包工具r.js 增量文件生成代理增量文件生成代理: : php 版：storeinc.php Nodejs版: storeincServer.js 纯算法版： makeinc.js,merge.js 我们正在筹建的一个开源项目 网址： http:/ Github: https:/ 实战效果 目前接入增量更新的webapp: 手腾掌上车典 手腾掌上车典 手腾秀车 手腾秀车 手腾nba 手腾nba 手腾爱电影 手腾爱电影 手腾个人中心 手腾个人中心 手腾阅读 手腾阅读 手腾体育猜图。手腾体育猜图。 详见http:/里的轻应用 实战效果 秀车，掌上车典，掌上NBA几个webapp的js资源请求方式占比 实战效果 2014.3.1-2014.3.31手腾的几个webapp js请求：2亿多次 地存储读取：1千5百万 全量请求：4千万次 增量更新请求:2千3百万次 平均每个增量命中比全量节省10k数据，通过增量更 新我们大概为用户节省流量： （23000000*10）/(1024*1024)=219G END 无更新不下载！无更新不下载！ Q&A