Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

《差异化加载》测试实例

  前两篇文章都是与差异化加载有关的东西,一篇给出了理论,一篇给出了算法。现在再补上个实例就圆满了。但这也只是测试,是否能用于项目中还不能下定论。另外这个测试中涉及了前后端的代码,这里没法做在线演示。可以在文章末尾找到测试实例的压缩包。
  昨天的压缩算法是用JavaScript写的,所以我原本打算把这个测试做成NodeJS版的。考虑各种因素纠结了好久结果还是没用NodeJS。把之前的压缩算法用PHP重写了一遍,还是做PHP版的演示比较好。
  在这个测试中我自定义了一个Content-Type,并在前端代码中封装了发送HTTP请求的方法。当遇到自定义的那个Content-Type时就会将请求到的资源调用解压后获取数据。下面是前端代码部分:
<script src="decode.js"></script>
<script>
request("timestamp.php",function(data){
  console.log(data);
});

function request(url,done){
  var key="cache:"+url;
  var old=localStorage[key];
  var xhr=new XMLHttpRequest;
  xhr.onload=function(){
    var type=xhr.getResponseHeader("Content-Type");
    var data=xhr.responseText;
    //如果是自定义的Content-Type则解压,否则原样使用数据
    data=localStorage[key]=
      type=="application/mycompress+json"
      ?decompress(old,JSON.parse(data)):data;
    done&&done(data);
  };
  xhr.open("GET",url,true);
  //如果没有本地缓存就不发送ETag
  old||xhr.setRequestHeader("If-None-Match","");
  xhr.send();
};
</script>
  后端代码,也就是前端程序中发起请求的那个资源,里面多了有一些对ETag和缓存内容的处理之类的。这东西要完整的做下来可能会变成一个框架,现在只是测试阶段就不做封装了。下面是后端代码:
$data=date('Y-m-d H:i:s'); //测试数据
$md5=md5($data);
//获取前端发送过来的ETag
$etag=$_SERVER['HTTP_IF_NONE_MATCH'];
$etag=preg_replace('/[^0-9A-Fa-f]/','',$etag); //安全过滤
//保存当前资源
file_put_contents("caches/$md5",$data);
//如果存在ETag则读取相应的旧资源作为压缩的字典,并调用压缩
if($etag&&file_exists("caches/$etag")){
  include 'compress.php';
  $data=compress(file_get_contents("caches/$etag"),$data);
  $data=json_encode($data);
  //如果有压缩就设置上自定义的Content-Type以便前端识别
  header('Content-Type: application/mycompress+json');
};
header("ETag: $md5");
die($data);
  前端代码和后端代码中都有引入其它文件,在文章最后的压缩包中可以找到。那只是压缩算法而已,上一篇文章中介绍过,只是这回多了个PHP的版本。
  其实这个测试的测试数据设计的不太好,只是使用了当前时间戳。由于数据量太小,可能压缩后的JSON比它本身都大。可以稍微调整成比较大的数据进行测试会更直观。但由于压缩算法目前是质量优先,如果数据量太大可能会卡。如果要测试较大量的数据应该把压缩算法也做相应的变更。

  代码下载:《差异化加载》测试实例.rar
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^