【51CTO晃荡】8.26 带你与清华大年夜学、搜狗、京东大年夜咖们一路商量基于算法的IT运维实践

之前校招面试的时刻碰到过一个很有趣的问题：

“假设有一个超超超大年夜型的Web项目，JS源代码紧缩之后跨越10MB(实际怎么可能会有这么大年夜的嘛=。=)，每次更新之后都须要用户从新加载JS是弗成接收的，那么怎么样大年夜工程的角度解决这种问题?”

一开端立马想到了好几点解决筹划，比如：

1. 抽出基本的不常更新的模块作为经久缓存;
2. 如不雅应用了 React 或者 Vue2.0 如许支撑办事器端衬着的框架的话，就采取办事器端衬着然后再慢慢分块加载 JS 的办法;
3. 如不雅是 Hybrid 开辟的话，可以推敲应用本地资本加载，类似“离线包”的设法主意(之前在腾讯练习的时刻天天碰到这器械)。

【编辑推荐】

1. 现代前端开起身术栈
2. 前端实现文件的断点续传
3. 前端面试中的常见的算法问题
4. 纯前端解决跨域问题
5. 暑期干货！2017年8月前端开辟者超实用干货大年夜合集

后来在面试官的引导下想到了一种“增量式更新”的解决筹划，简单地说就是在版本更新的时刻不须要从新加载资本，只须要加载一段很小的 diff 信息，然后归并到当缁な源上，类似 git merge 的效不雅。

1、用户端应用 LocalStorage 或者其它储存筹划，存储一份原始代码+时光戳：

{ 
 
    timeStamp: "20161026xxxxxx", 
 
    data: "aaabbbccc" 
 
}  

3、办事器大年夜接收到时光戳中辨认出客户端的版本，和最新的版本做一次 diff，返回两者的 diff 信息：

diff("aaabbbccc", "aaagggccc"); 
 
// 假设我们的diff信息如许表示： 
 
// [3, "-3", "+ggg", 3]  

4、客户端接收到这个 diff 信息之后，把本地资本和时光戳更新到最新，实现一次增量更新：

mergeDiff("aaabbbccc", [3, "-3", "+ggg", 3]); 
 
//=> "aaagggccc"  

实践

下面把这个筹划中的核心思惟实现一遍，简单地说就是实现 diff 和 mergeDiff 两个函数。

今天找到了一个不错的 diff 算法：

GitHub – kpdecker/jsdiff: A javascript text differencing implementation.

我们只须要调用它的 diffChars 办法来比较两个字符串的差别：

var oldStr = 'aaabbbccc'; 
 
var newStr = 'aaagggccc'; 
 
JsDiff.diffChars(oldStr, newStr); 
 
//=> 
 
//[ { count: 3, value: 'aaa' }, 
 
//  { count: 3, added: undefined, removed: true, value: 'bbb' }, 
 
//  { count: 3, added: true, removed: undefined, value: 'ggg' }, 
 	
			
 1/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