手机腾讯网js资源加载优化之路

waynelu(t.qq.com/waynelu)
2014-04

about me

卢勇福（waynelu）


微博:
http://t.qq.com/waynelu
http://www.weibo.com/u/1849616271  
github:
https://github.com/luyongfugx
https://github.com/mtjs/mt

 提纲

背景和问题
传统cdn静态资源方式存储js
html5离线存储方式存储js
js增量更新算法设计
增量更新接入方案
实战效果

背景和问题

   2014.2.1-2014.7.31期间手腾的几个webapp
共发布:60次，
发布间隔:2～3天，
每次修改js:3至4个
js请求:20多亿次
js修改:基本小于5%，不超过20% 的。

背景和问题

在快速迭代的敏捷开发过程中，我们通过快速更新版本及时响应了用户需求和bug修复，但是我们同时也浪费了用户极为看重的流量资源！！！

传统cdn静态资源方式存储js

cdn+浏览器cache

优点:
1.简单，容易维护
2.304 cache

缺点：
1.缓存会实效，用户强制刷新时可能会有http请求
2.快速迭代版本过程中少量修改，全量更新
  

html5离线存储方式存储js

html5 appcache (离线存储）
优点：
     真正的离线，只有版本更新才会有请求

缺点:
     1.新版本启用刷新体验问题
     2.难于维护，灰度等策略比较难实施
     3.快速迭代版本过程中少量修改，全量更新
      
       

   本地存储模拟离线存储

可行性:
1.大小5m,一般js小于1m
2.跨域问题：Access-Control-Allow-Origin:*
3.key-value形式本地数据，用eval执行

优点：
1.减少不必要的http请求,有更新才有请求，省流量
2.避免离线存储带来的体验问题
3.增量更新!
      

js增量更新算法设计-chunk算法

js增量更新算法设计-chunk算法

旧文件分成n块

   通过滚动查找得到增量更新文件

最终增量文件表示如下:
1,data1,2,3,data2,4,5,6
进一步合并顺序块得到:
[1,1],data1,[2,2],data2,[4,3]
新文件内容:
chunk0+data1+chunk1+chunk2+data2+chunk3+chunk4+chunk5

js增量更新算法设计-chunk算法

以 s=‘1345678abcdefghijklmnopq’ 修改为 a=‘13456f78abcd2efghijklmnopq' 例
设块长度为4则，源文件分成(第一行块号，第二行数据):

最终增量文件表示如下数组:
[“a=‘1",2,"f",3,"cd2ef",5,6,7]
进一步合并顺序块，可用一个js数组表示为
[“a=‘1”,[2,1],“f”,[3,1],“cd2ef”,[5,3]

通过滚动查找比对，得到新的文件构成如下

js增量更新算法设计-编辑距离计算算法

概念：
Levenshtein Distance (编辑距离)，编辑距离即从一个字符串变换到另一个字符串所需要的最少变化操作步骤 
  
作者：
俄罗斯科学家Vladimir Levenshtein在1965年提出这个概念

js增量更新算法设计-编辑距离计算算法

编辑代价定义：
1.不变         0
2. 替换        1
3.插入         1
4.删除         1
删除，替换，插入这几种操纵的代价是1，即修改一个字符，不变则是0，表示没有修改，即操作代价是0 

   js增量更新算法设计-编辑距离计算算法

编辑距离计算公式:
edit(i, j)：第一个字符串的长度为i的子串到第二个字符串的长度为j的子串的编辑距离 
通过动态规划法（dp）得到：
if i == 0 且 j == 0，edit(i, j) = 0
if i == 0 且 j > 0，edit(i, j) = j
if i > 0 且j == 0，edit(i, j) = i
ifi ≥ 1 且j ≥ 1 edit(i, j) = min{ edit(i-1, j) + 1, edit(i, j-1) + 1, edit(i-1, j-1) + f(i, j) }，当第一个字符串的第i个字符不等于第二个字符串的第j个字符时，f(i, j) = 1；否则，f(i, j) = 0

   js增量更新算法设计-编辑距离计算算法

以batyu 修改为beauty ，编辑距离为3（右下数字）:

  js增量更新算法设计-编辑距离计算算法

我们记录每一个编辑步骤（红字）:
0：未修改, 1：替换,2：删除，3：插入

  js增量更新算法设计-编辑距离计算算法

从右下脚开始往左上脚遍历：
0：未修改, 1：替换,2：删除，3：插入
删除：y-1.  替换,相等:x-1,y-1   插入:x-1 

js增量更新算法设计-编辑距离计算算法

得到编辑代价最小的编辑步骤：
  0-3-0-3-0-0-2（0：未修改, 1：替换,2：删除，3：插入）
根据操作步骤和新字符串beauty，我们可以得到如下数组： 
[ [ 1, 0 ], ‘e’, [ 2, 0 ], ‘u’, [ 3, 0 ], [ 4, 0 ] ] 
其中数组表示没有修改，我们合并一下连续没有修改的字符得到：
[ [ 1, 1 ], 'e', [ 2, 1 ], 'u', [ 3, 2 ] ] 
这就是增量文件内容

js增量更新算法设计-编辑距离计算算法

合并算法为：
增量文件：[ [ 1, 1 ], 'e', [ 2, 1 ], 'u', [ 3, 2 ] ] 
旧版字符串：batyu
所以新版字符串：
beauty＝”batyu”.substr(1-1,1)+’e’+”batyu”.substr(2-1,1)+’u’+”batyu”.substr(3-1,2);

浏览器端更新流程

 server端实现之打包工具实现

server端实现之打包工具实现

增量文件和全量文件大小对比

增量文件内容接图：

打包工具实现方式的优缺点

优点：
    离线完成，然后直接上传cdn，跟传统方式没有区别
缺点:
    只能跨一个版本实现增量更新
    对回退版本是需要全量更新

具体实现改进-servlet代理

具体实现-servlet代理

优点：
    1.可跨多个版本增量更新
     2.回退版本也可以增量
     3.无需手动生成增量文件
缺点:
    需要自己能控制cdn源服务器
    对cdn的push是被动的

手机腾讯网增量更新接入方案

MT—手机腾讯网前端统一框架
特点：
1.基于AMD的js模块管理加载器
2. 无缝接入本地存储，js增量更新，兼容统一版本和单个js文件单个版本两种版本管理方式
3.mtbuild增量文件生成工具，infocdn手腾js增量更新cdn源

我们的开源项目

 

网址：
       http://mt.tencent.com

Github:
         https://github.com/mtjs/mt

实战效果

目前接入增量更新的webapp:
      手腾掌上车典
      手腾秀车
      手腾nba
      手腾爱电影
      手腾个人中心
      手腾阅读
      手腾体育猜图。。。。。。。
详见http://4g.qq.com里的轻应用         

实战效果

秀车，掌上车典，掌上NBA几个webapp的js资源请求方式占比

实战效果

 2014.2.1-2014.7.31手腾的几个webapp
js请求：20多亿次
本地储读取：13亿
全量请求：3亿
增量更新请求:4亿
平均每个增量命中比全量节省10k数据，通过增量更新我们大概为用户节省流量：
   （400，000，000*10）/(1024*1024)=3.8T

END

无更新不下载！！！

                     Q&A