将缓存进行到底

通过简单的改动，可以在加载不同的帧时，保持对切片的缓存。 即令上文中的这句始终有效：

JS代码

1.  var imageRecord = tiledImage._tileCache.getImageRecord(tile.url);    

但仅看这个函数的实参我们就可以想到，这个缓存是针对不同url的切片的，而对于不同帧(page)，是有一个更高层次的tiledImage实例与之对应的，要实现更快的执行性能，还需要对tiledImage进行缓存，否则每切换到不同的帧，重新加载和解析一遍page的定义，并运算对应的切片，也会导致大量多余的运算。

对tiledImage进行缓存

加载tiledImage是由addTiledImage 方法负责的，对该函数实现进行缓存增强，就可以实现不涉及上层方法的“定点手术”。 在函数入口处，增加如下代码以获得缓存：

Js代码

1.  addTiledImage: function( options ) {  
2.      $.console.assert(options, "[Viewer.addTiledImage] options is required");  
3.      $.console.assert(options.tileSource, "[Viewer.addTiledImage] options.tileSource is required");  
4.      $.console.assert(!options.replace || (options.index > -1 && options.index < this.world.getItemCount()),  
5.          "[Viewer.addTiledImage] if options.replace is used, options.index must be a valid index in Viewer.world");  
6.    
7.      var _this = this;  
8.      //c4w get tile from cache  
9.      var cache_ti=_this.cache_tileImage;  
10.     if(cache_ti ){  
11.         var page= (_this instanceof $.Viewer)?_this.currentPage():_this.viewer.currentPage();  
12.         tiledImage = cache_ti[page];  
13.         if(tiledImage){  
14.             _this.world.addItem( tiledImage, {});  
15.   
16.             if (_this.world.getItemCount() === 1 && !_this.preserveViewport) {  
17.                 _this.viewport.goHome(true);  
18.             }  
19.             tiledImage._needsDraw = true;  
20.             _this._opening = false;  
21.             _this.bcached = true;  
22.             //updateOnce(_this);  
23.             if (_this.navigator) {  
24.                 optionsClone = $.extend({}, options, {  
25.                     originalTiledImage: tiledImage,  
26.                     tileSource: tiledImage.tileSource  
27.                 });  
28.   
29.                 _this.navigator.addTiledImage(optionsClone);  
30.                   
31.                 if (options.tileSource.overlays) {  
32.                     for (var i = 0; i < options.tileSource.overlays.length; i++) {  
33.                         _this.addOverlay(options.tileSource.overlays[i]);  
34.                     }  
35.                 }  
36.             }  
37.             return;  
38.         }  
39.   
40.     }     
41.     //c4w get tile from cache end.  

在生成TiledImage实例处，增加如下代码以写入缓存：

JS代码

1.  tiledImage = new $.TiledImage({  
2.      viewer: _this,  
3.      ...  
4.  });  
5.  //c4w cache tileImage  
6.  if(!_this.cache_tileImage){  
7.      _this.cache_tileImage={};  
8.  }  
9.  var page= (_this instanceof $.Viewer)?_this.currentPage():_this.viewer.currentPage();  
10.  _this.cache_tileImage[page]=tiledImage; 

至此前端缓存改造完毕。

服务端缓存

上述的前端缓存都是指存在于前端浏览器内存中的缓存。除此之外，浏览器在默认设置下，也会将已经下载过的文件存放在本地磁盘上。 当网页中需要再次下载该文件时，浏览器与服务器之间通过http协议比较时间戳，可以加载本地磁盘的文件，避免再次从服务器下载。 当用户关闭了网页，再打开或者刷新网页时，可以利用该策略优化执行性能。 以Apache为例，通过服务端修改配置，我们可以向前端对切片的请求返回以下回应：

Response header代码

1.  Accept-Ranges:bytes  
2.  Cache-Control:max-age=7200  
3.  Connection:Keep-Alive  
4.  Content-Length:31147  
5.  Content-Type:image/png  
6.  Date:Mon, 07 Dec 2015 07:03:34 GMT  
7.  ETag:"79ab-5252b391433c0"  
8.  Expires:Mon, 07 Dec 2015 09:03:34 GMT  
9.  Keep-Alive:timeout=5, max=25  
10. Last-Modified:Mon, 23 Nov 2015 01:34:15 GMT  
11. Server:Apache/2.4.16 (Unix) PHP/5.5.29 

其中Cache-Control指定了以秒为单位的有效期，如果在有效期之内，并且文件修改时间戳与本地一致，浏览器会自己加载本地缓存的文件而不是下载。 windows下Apache的设置可参考这篇文章。 mac或linux下Apache设置 参考这篇文章。 至此前后端缓存改造完成。