![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](https://image.slidesharecdn.com/jsw3ctech-140429202210-phpapp02/85/Js-w3ctech-10-320.jpg)
![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'
通过滚动查找比对，得到新的文件构成如下通过滚动查找比对，得到新的文件构成如下](https://image.slidesharecdn.com/jsw3ctech-140429202210-phpapp02/85/Js-w3ctech-11-320.jpg)
手机腾讯网Js资源版本增量更新方案w3ctech
- 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. 增量更新增量更新 !!
- 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