1、静态资源本地存储及增量更新方案,waynelu2013-06-26,目录,1.当前资源存储和更新方案及其问题2.离线存储的优势和问题3.本地存储模拟离线存储4.增量更新实现5.增量更新效果6.增量更新的问题和展望,当前资源存储和更新方案及其问题,存储:cdn+cachecache: maxage+Last-Modified问题： 快速迭代开发模式下，版本更新快，每次更新用户需要全量更新资源,离线存储的优势和问题,html5 manifest！优势： 1.真正的离线 2.只有版本更新才会有请求问题: 1.版本文件的一个额外请求 2.文件更新产生作用需要等下次或者程序刷新 3.首页自动离线存储且无
2、法废除,本地存储模拟离线存储,用localstorage来放js,css是可行的: 1.大小5m,一般css+js1m 2.key-value形式,js可以操作，可以用eval或者动态创建js,css 节点的方式使js,css生效 3.跨域问题：Access-Control-Allow-Origin:*,本地存储模拟离线存储,js代码的解释方式: var globalEval=function (data) if (data ,本地存储模拟离线存储,css代码的解释方式: /使用css文本生成css var createCss=function(cssStr)var style = docum
3、ent.createElement(style);style.setAttribute(type, text/css);style.appendChild(document.createTextNode(cssStr); ;,增量更新的实现,rsync 同步原理1.先将旧文件按一定长度分成多个块，计算hash值放入map(事实上rsync的实现上为了速度还分为强hash,弱hash)2.在新文件上进行滚动hash查找，如果找到匹配的则记录块号，如果没找到则+1，并把字符压入新数据块,然后扫描下一块，最终得到一个新数据和数据块号的组合的增量文件（混淆工具实现）3. 客户端根据旧文件和增量文件合并
4、出新文件（前端js实现）,增量更新的实现,通过滚动查找得到增量更新文件,旧文件分成n块,最终增量文件表示如下:1,data,2,3,data,4,5,6进一步合并顺序块得到:1,1,data,2,2,data,4,3,增量更新的实现,根据增量文件和原有文件可以合并成新文件: /rsync解码重新生成js var rsyncjs=function(source,trunkSize,checksumcode)var strResult=;for(var i=0;ichecksumcode.length;i+)var code=checksumcodei;if(typeof (code)=strin
5、g) strResult+=code;elsevar start=code0*trunkSize;var end=code1*trunkSize;var oldcode=source.substr(start,end);strResult+=oldcode;return strResult; ,增量更新效果,以一个混淆后9k的js 为例看效果 :修改内容，在js里面修改了一个函数,改动了大概20代码js混淆后源文件是9k,cdn gzip后是3.8k增量文件混淆后是3k,cdn gzip后是1.9k,增量更新效果,如果uv是2500w,那么节省的流量是：10000000*1.9/(1024*1024)=18G 按照市场上cdn流量1个G 1000块钱的价格计算，这个方案仅这次更新可以节省 18*1000=1.8w另外走本地存储的方式其实还可以节省很多不必要的连接，脚本仅下载一次,增量更新存在的问题,混淆工具对同样的输入或者差不多的输入混淆出来的结果可能不一致造成不必要的变动增加了js加载的复杂性，可能增加查找问题的难度。在前端会多出一个拼凑新js的时间,End,3q! weibo: email: ,
