实现前端资源增量式更新的一种思路

var newString = '';

var diffInfo = JSON.parse(diffInfo);

var p = 0;

for(var i = 0; i < diffInfo.length; i++){

var info = diffInfo[i];

if(typeof(info) == 'number'){

newString += oldString.slice(p, p + info);

p += info;

continue;

}

if(typeof(info) == 'string'){

if(info[0] === '+'){

var addedString = info.slice(1, info.length);

newString += addedString;

}

if(info[0] === '-'){

var removedCount = parseInt(info.slice(1, info.length));

p += removedCount;

}

return newString;

}

实际效不雅

有兴趣的话可以直接运行这个：

可以看到 build 之后的代码有 21w 多个字符(212KB)，而 diff 信息却相当短小，只有151个字符，比拟于从新加载新版本，缩小了1000多倍(当然我这里只改了两三行代码，小是天然的)。

3、容错、用户端和办事器端的一致性校订、强迫刷新的实现。

GitHub – starkwang/Incremental

膳绫擎只是把核心的思路实现了一遍，实际工程中还有更多要推敲的器械：

应用 create-react-app 这个小对象快速生成了一个 React 项目，随便改了两行代码，然后比较了一下build之后的新旧两个版本：

var JsDiff = require('diff'); 
 
var fs = require('fs'); 
 
  
 
var newFile = fs.readFileSync(	
			 3/4   首页 上一页 1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　微软Azure再升级，为无服务器事件而生的Event Grid
            【51CTO晃荡】8.26 带你与清华大年夜学、搜狗、京东大年夜咖们一路商量基于算法的IT运维实践Azure事宜应用办法【51CTO.com快译】微软Event  Grid无疑是对无办事器选项的一大年夜重要弥补，可供给一套可>>>详细阅读


本文标题：实现前端资源增量式更新的一种思路
地址：http://www.17bianji.com/lsqh/36926.html
 1/2    1