`

支持无级缩放的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设置 参考这篇文章

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

 

分享到:
评论

相关推荐

    360安全浏览器-网页无级缩放和网页自动填表.docx

    与传统的IE浏览器不同,IE仅支持5种预设的文字尺寸,对于采用CSS样式的网页文字调整效果不佳,且仅改变文字大小而不缩放整个页面。360安全浏览器则突破了这一限制,实现了网页的无级缩放,允许用户更加灵活地调整...

    VB文本框文本字体的无级缩放源代码.rar

    在开发过程中,有时我们需要实现文本框中的文本字体的缩放功能,以便根据用户需求调整字体大小。"VB文本框文本字体的无级缩放源代码.rar"提供的压缩包就是这样一个示例,它演示了如何动态改变文本框内文本的字体大小...

    图像缩放算法研究及其FPGA实现.pdf

    图像缩放是图像处理的核心技术之一,用于调整图像的大小,适应不同的显示需求。随着多媒体技术和集成电路的进步,硬件实现图像的无级缩放已经成为研究的重点。无级缩放指的是能够平滑地改变图像尺寸,而不会产生明显...

    VB实现文本框文本字体的无级缩放

    内容索引:VB源码,字符处理,文本缩放,文本框 VB实现文本框文本字体的无级缩放,单击一次“字放大”则字体大小增加2磅,单击一次“字缩斜则字体大小缩小2磅,也可复原文本,可了解一些VB理论基础,教师可借此来引导...

    76.(leaflet篇)leaflet地图无级别缩放(移动端).zip

    本文将深入探讨Leaflet地图在移动端实现无级别缩放的技术细节及其优势。 首先,Leaflet地图的核心特性之一就是其优秀的性能和对各种屏幕尺寸的支持,这使得它成为移动应用的理想选择。在移动设备上,用户可能需要...

    商品展示 360度全景图-HTML5 Canvas 实现

    本项目基于HTML5的Canvas技术,实现了商品的360度全方位展示,适用于Chrome、Firefox以及IE9及以上的浏览器。 HTML5是现代网页开发的标准,它引入了许多新的API和元素,Canvas就是其中之一。Canvas是一个二维绘图上...

    基于自适应插值算法的视频图像缩放技术及其FPGA实现.pdf

    总体而言,基于自适应插值算法的视频图像缩放技术及其在FPGA上的实现,展示了如何结合先进的图像处理算法和高性能硬件平台,来达到实时图像处理的高效性和精确性。这对于实时视频监控、高清视频播放、远程医疗影像...

    99%CSS3+1%JS实现缩放图片展示特效.rar

    在"99%CSS3+1%JS实现缩放图片展示特效"的项目中,开发者很可能是利用了上述技术的组合,创造出一种平滑且引人注目的图片展示方式。通过阅读同名博客,你可以更深入地了解每个步骤和具体实现细节,从而学习并应用到...

    易语言实现图片快速缩放和无损缩放源码

    "易语言实现图片快速缩放和无损缩放源码"是一个专为开发者提供的资源,旨在帮助他们利用易语言进行高效的图像缩放操作。易语言是一种中文编程语言,其目标是降低编程的难度,让更多的人能够参与到软件开发中来。 ...

    Qt 图片缩放,支持滚轮和按键缩放

    通过以上技术,我们可以构建出一个功能完备的图片查看器,不仅支持滚轮和按键的缩放,还能方便地切换不同图片。在实际开发中,可能还需要考虑性能优化,例如,对于大图的高效显示和内存管理,以及用户界面的友好设计...

    Qt实现窗体缩放

    在本文中,我们将深入探讨如何使用Qt框架来实现窗体的动态缩放功能。Qt是一个强大的C++库,用于创建跨平台的图形用户界面(GUI)应用。它提供了丰富的API和工具,使得开发者能够轻松地设计和实现各种复杂的UI功能,...

    MATLAB图像缩放,matlab实现图像缩放,matlab

    `imresize`函数还支持多种插值方法,影响缩放后的图像质量。默认情况下,MATLAB使用最近邻插值,这是一种快速但可能导致像素化的方法。为了获得更好的视觉效果,可以选择双线性、三次样条(bicubic spline)或最近...

    Qt 实现无边框窗口,支持缩放窗口大小

    在Qt框架中,创建一个无边框窗口并支持自定义缩放窗口大小是常见的需求,尤其是在设计具有现代感和简洁界面的应用程序时。Qt库提供了丰富的API和工具,使得开发者可以轻松实现这样的功能。以下是对这个主题的详细...

    360度展示代码,360度看车代码,360度看房代码,360度全景代码

    标题中的“360度展示代码,360度看车代码,360度看房代码,360度全景代码”指的是用于创建虚拟360度全景体验的编程技术,这种技术常用于汽车展示、房地产展示等领域,让用户仿佛身临其境地查看环境。在网页中实现...

    图像实时缩放的FPGA实现,二次线性插值的Verilog实现。

    在本文中,我们将深入探讨如何使用FPGA(Field-Programmable Gate Array)实现图像实时缩放,并专注于其中的关键技术——二次线性插值。这一技术在数字图像处理领域广泛应用,尤其是在需要高质量图像缩放的场合。...

    qt实现图片缩放

    在Qt框架中,图片缩放是一项常见的图像处理任务,它涉及到图形用户界面(GUI)的开发,特别是当我们要展示或操作图像时。Qt提供了一系列的类和方法来帮助开发者实现这个功能。以下将详细介绍如何使用Qt来实现图片的...

    photoView和viewPager的完美结合实现相册功能,支持收缩缩放,滑动到下一页上一页恢复默认大小

    photoView和viewPager的完美结合实现相册功能,支持收缩缩放,滑动到下一页上一页恢复默认大小

    jQuery支持局部缩放图片放大镜插件.zip

    **jQuery支持局部缩放图片放大镜插件** 在网页设计中,为了提升用户体验,经常会用到图片放大镜功能,让用户可以更清晰地查看产品的细节。jQuery作为一款强大的JavaScript库,提供了丰富的插件来实现这样的效果。...

    js实现鼠标滚轮控制图片缩放效果的方法

    在如今的网络应用中,经常会遇到需要实现用户通过鼠标滚轮控制页面元素缩放的场景,例如图片查看器、地图应用等。本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及...

    HTML5基于SVG实现可拖拽和缩放的世界地图效果源码.zip

    总结来说,这个源码实例展示了如何利用HTML5和SVG技术实现交互式的、可拖拽和缩放的世界地图。开发者可以通过学习这个案例,深入理解HTML5的图形处理能力和动态交互的实现方法,进一步提升网页应用的用户体验。

Global site tag (gtag.js) - Google Analytics