支持无级缩放的360展示技术实现之五

阅读更多

将缓存进行到底

通过简单的改动，可以在加载不同的帧时，保持对切片的缓存。

即令上文中的这句始终有效：

 

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

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

 

对tiledImage进行缓存

 

加载tiledImage是由addTiledImage 方法负责的，对该函数实现进行缓存增强，就可以实现不涉及上层方法的“定点手术”。

在函数入口处，增加如下代码以获得缓存：

 

    addTiledImage: function( options ) {
        $.console.assert(options, "[Viewer.addTiledImage] options is required");
        $.console.assert(options.tileSource, "[Viewer.addTiledImage] options.tileSource is required");
        $.console.assert(!options.replace || (options.index > -1 && options.index < this.world.getItemCount()),
            "[Viewer.addTiledImage] if options.replace is used, options.index must be a valid index in Viewer.world");

        var _this = this;
        //c4w get tile from cache
        var cache_ti=_this.cache_tileImage;
        if(cache_ti ){
            var page= (_this instanceof $.Viewer)?_this.currentPage():_this.viewer.currentPage();
        	tiledImage = cache_ti[page];
        	if(tiledImage){
                _this.world.addItem( tiledImage, {});

                if (_this.world.getItemCount() === 1 && !_this.preserveViewport) {
                    _this.viewport.goHome(true);
                }
                tiledImage._needsDraw = true;
                _this._opening = false;
                _this.bcached = true;
                //updateOnce(_this);
                if (_this.navigator) {
                    optionsClone = $.extend({}, options, {
                        originalTiledImage: tiledImage,
                        tileSource: tiledImage.tileSource
                    });

                    _this.navigator.addTiledImage(optionsClone);
                    
                    if (options.tileSource.overlays) {
                        for (var i = 0; i < options.tileSource.overlays.length; i++) {
                            _this.addOverlay(options.tileSource.overlays[i]);
                        }
                    }
                }
                return;
        	}

        }	
        //c4w get tile from cache end.

  

 

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

 

 

                tiledImage = new $.TiledImage({
                    viewer: _this,
                    ...
                });
                //c4w cache tileImage
                if(!_this.cache_tileImage){
                	_this.cache_tileImage={};
                }
                var page= (_this instanceof $.Viewer)?_this.currentPage():_this.viewer.currentPage();
                 _this.cache_tileImage[page]=tiledImage;

 

 

至此前端缓存改造完毕。

 

服务端缓存

 

上述的前端缓存都是指存在于前端浏览器内存中的缓存。除此之外，浏览器在默认设置下，也会将已经下载过的文件存放在本地磁盘上。

当网页中需要再次下载该文件时，浏览器与服务器之间通过http协议比较时间戳，可以加载本地磁盘的文件，避免再次从服务器下载。

当用户关闭了网页，再打开或者刷新网页时，可以利用该策略优化执行性能。

   以Apache为例，通过服务端修改配置，我们可以向前端对切片的请求返回以下回应：

 

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

 

 其中Cache-Control指定了以秒为单位的有效期，如果在有效期之内，并且文件修改时间戳与本地一致，浏览器会自己加载本地缓存的文件而不是下载。

 windows下Apache的设置可参考这篇文章。

mac或linux下Apache设置 参考这篇文章。

至此前后端缓存改造完成。