More Related Content
Similar to 手机腾讯网Js资源版本增量更新方案w3ctech (20)
手机腾讯网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
- 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'
通过滚动查找比对,得到新的文件构成如下通过滚动查找比对,得到新的文件构成如下
- 16. 打包工具 方式的 缺点实现 优打包工具 方式的 缺点实现 优
点:优点:优
离 完成,然后直接上线 传离 完成,然后直接上线 传 cdncdn ,跟 方式没有区传统 别,跟 方式没有区传统 别
缺点缺点 ::
只能跨一个版本 增量更新实现只能跨一个版本 增量更新实现
回退版本是需要全量更新对回退版本是需要全量更新对
- 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
- 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