1. 手腾手腾 JSJS 源版本 量更新方案资 增源版本 量更新方案资 增
waynelu(t.qq.com/waynelu)waynelu(t.qq.com/waynelu)
2014-042014-04

2. about meabout me
勇福卢勇福卢 （（ wayneluwaynelu ））
微博微博 ::
http://t.qq.com/wayneluhttp://t.qq.com/waynelu
http://www.weibo.com/u/1849616271http://www.weibo.com/u/1849616271
github:github:
https://github.com/luyongfugxhttps://github.com/luyongfugx

3. 提纲提纲
背景和问题背景和问题
传统传统 cdncdn 静 源方式存态资 储静 源方式存态资 储 jsjs
html5html5 存 方式存离线 储 储存 方式存离线 储 储 jsjs
jsjs 量更新算法增 设计量更新算法增 设计
 量更新接入方案增量更新接入方案增
 效果实战效果实战

4. 背景和问题背景和问题
2014.3.1-2014.3.312014.3.1-2014.3.31 期 手 的几个间 腾期 手 的几个间 腾 webappwebapp
共 布发共 布发 ::1212 次，次，
布 隔发 间布 隔发 间 ::22 ～～ 33 天，天，
每次修改每次修改 js:js:33 至至 44 个个
jsjs 求请求请 ::22 亿亿多次多次
jsjs 修改修改 :: 基本小于基本小于 5%5% ，不超过，不超过 20%20% 的。的。

5. 背景和问题背景和问题
在快速迭代的敏捷 程中，我 通开发过 们在快速迭代的敏捷 程中，我 通开发过 们
快速更新版本及 响 了用 需求和过 时 应 户快速更新版本及 响 了用 需求和过 时 应 户 bugbug
修 ，但是我 同 也浪 了用 看重的复 们 时 费 户极为修 ，但是我 同 也浪 了用 看重的复 们 时 费 户极为
流量 源！！！资流量 源！！！资

6. 传统传统 cdncdn 静 源方式存态资 储静 源方式存态资 储 jsjs
cdn+cdn+ 器浏览器浏览 cachecache
点优点优 ::
1.1. ，容易简单 维护，容易简单 维护
2.304 cache2.304 cache
缺点：缺点：
1.1. 存会 效，用 强制刷新 可能会有缓 实 户 时存会 效，用 强制刷新 可能会有缓 实 户 时 httphttp 求请求请
2.2. 快速迭代版本 程中少量修改，全量更新过快速迭代版本 程中少量修改，全量更新过

7. html5html5 存 方式存离线 储 储存 方式存离线 储 储 jsjs
html5 appcache (html5 appcache ( 存 ）离线 储存 ）离线 储
点：优点：优
真正的离 ，只有版本更新才会有 求线 请真正的离 ，只有版本更新才会有 求线 请
缺点缺点 ::
1.1. 新版本 用刷新体启 验问题新版本 用刷新体启 验问题
2.2. 于 ，灰度等策略比 施难 维护 较难实于 ，灰度等策略比 施难 维护 较难实
3.3. 快速迭代版本 程中少量修改，全量更新过快速迭代版本 程中少量修改，全量更新过

8. 本地存 模 存储 拟离线 储本地存 模 存储 拟离线 储
可行性可行性 ::
1.1. 大小大小 5m,5m, 一般一般 jsjs 小于小于 1m1m
2.2. 跨域 ：问题跨域 ：问题 Access-Control-Allow-Origin:*Access-Control-Allow-Origin:*
3.key-value3.key-value 形式本地数据，用形式本地数据，用 evaleval 行执行执
点：优点：优
1.1. 少不必要的减少不必要的减 httphttp 求请求请 ,, 有更新才有 求，省流量请有更新才有 求，省流量请
2.2. 避免离 存 来的子刷新体线 储带 验问题避免离 存 来的子刷新体线 储带 验问题
3.3. 增量更新增量更新 !!

9. jsjs 增量更新算法设计增量更新算法设计

10. jsjs 增量更新算法设计增量更新算法设计
旧文件分成旧文件分成 nn 块块
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+chunk
5

11. jsjs 增量更新算法设计增量更新算法设计
以以 s=‘1345678abcdefghijklmnopq’s=‘1345678abcdefghijklmnopq’ 修改为修改为
aa=‘13456=‘13456ff78abcd78abcd22efghijklmnopq'efghijklmnopq' 例例
度设块长 为度设块长 为 44 ，源文件分成则，源文件分成则 (( 第一行 号，第二行数据块第一行 号，第二行数据块 ):):
最 增量文件表示如下数终 组 :
[“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'
通过滚动查找比对，得到新的文件构成如下通过滚动查找比对，得到新的文件构成如下

12. jsjs 增量更新算法设计增量更新算法设计
/* @param source/* @param source 是上一个版本内容，是上一个版本内容，
return strResult;return strResult;
}}

13. 器端更新流程浏览器端更新流程浏览

14. serverserver 端 之打包工具实现 实现端 之打包工具实现 实现

15. serverserver 端 之打包工具实现 实现端 之打包工具实现 实现
增量文件和全量文件大小 比对增量文件和全量文件大小 比对
增量文件内容接 ：图增量文件内容接 ：图

16. 打包工具 方式的 缺点实现 优打包工具 方式的 缺点实现 优
点：优点：优
离 完成，然后直接上线 传离 完成，然后直接上线 传 cdncdn ，跟 方式没有区传统 别，跟 方式没有区传统 别
缺点缺点 ::
只能跨一个版本 增量更新实现只能跨一个版本 增量更新实现
回退版本是需要全量更新对回退版本是需要全量更新对

17. 具体 改实现 进具体 改实现 进 -servlet-servlet 代理代理

18. 具体实现具体实现 -servlet-servlet 代理代理
点：优点：优
1.1. 可跨多个版本增量更新可跨多个版本增量更新
2.2. 回退版本也可以增量回退版本也可以增量
3.3. 无需手 生成增量文件动无需手 生成增量文件动
缺点缺点 ::
需要自己能控制需要自己能控制 cdncdn 源服 器务源服 器务
对对 cdncdn 的的 pushpush 是被 的动是被 的动

19. 手机 网增量更新接入方案腾讯手机 网增量更新接入方案腾讯
MT—MT— 手机 网前端 一框架腾讯 统手机 网前端 一框架腾讯 统
特点：特点：
1.1. 基于基于 AMDAMD 的的 jsjs 模 管理加 器块 载模 管理加 器块 载
2.2. 无 接入本地存 ，缝 储无 接入本地存 ，缝 储 jsjs 增量更新，兼容增量更新，兼容
一版本和 个统 单一版本和 个统 单 jsjs 文件 个版本 版本管单 两种文件 个版本 版本管单 两种
理方式理方式
3.mtbuild3.mtbuild 增量文件生成工具，增量文件生成工具， infocdninfocdn 手手
腾腾 jsjs 增量更新增量更新 cdncdn 源源

20. 第三方模 管理工具插件块第三方模 管理工具插件块
seajs:seajs:
storeincstoreinc ，， seajsseajs 增量更新插件增量更新插件 ,, 配套配套 spm-storeinc-buildspm-storeinc-build 来 打包混实现来 打包混实现
淆淆
requirejs:requirejs:
rstoreincrstoreinc ，， requirejsrequirejs 增量更新插件，配套有修改后的混淆打包工具增量更新插件，配套有修改后的混淆打包工具 r.jsr.js
量文件生成代理增量文件生成代理增 ::
phpphp 版：版： storeinc.phpstoreinc.php
NodejsNodejs 版版 : storeincServer.js: storeincServer.js
算法版：纯算法版：纯
makeinc.js,merge.jsmakeinc.js,merge.js

21. 我 正在 建的一个 源 目们 筹 开 项我 正在 建的一个 源 目们 筹 开 项
网址：网址：
http://mt.tencent.comhttp://mt.tencent.com
Github:Github:
https://github.com/mtjs/mthttps://github.com/mtjs/mt

22. 效果实战效果实战
目前接入增量更新的目前接入增量更新的 webapp:webapp:
手 掌上 典腾 车手 掌上 典腾 车
手 秀腾 车手 秀腾 车
手腾手腾 nbanba
手 影腾爱电手 影腾爱电
手 个人中心腾手 个人中心腾
手腾阅读手腾阅读
手 体育猜 。。。。。。。腾 图手 体育猜 。。。。。。。腾 图
详见详见 http://4g.qq.comhttp://4g.qq.com 里的 用轻应里的 用轻应

23. 实战实战效果效果
秀 ，掌上 典，掌上车 车秀 ，掌上 典，掌上车 车 NBANBA 几个几个 webappwebapp 的的 jsjs 源 求方式占比资 请源 求方式占比资 请

24. 效果实战效果实战
2014.3.1-2014.3.312014.3.1-2014.3.31 手 的几个腾手 的几个腾 webappwebapp
jsjs 请求：请求： 22 亿亿多次多次
地存储读取：地存储读取： 11 千千 55 百万百万
全量请求：全量请求： 44 千万千万次次
增量更新请求增量更新请求 ::22 千千 33 百万百万次次
平均每个增量命中比全量节省平均每个增量命中比全量节省 10k10k 数据，通过增量数据，通过增量
更更 新我们大概为用户节省流量新我们大概为用户节省流量：：
（（ 23000000*1023000000*10 ）） /(1024*1024)=219G/(1024*1024)=219G

25. ENDEND
无更新不下 ！！！载
Q&AQ&A