angularjs 缓存详解

更新日期: 2018-03-19阅读: 3.3k标签: 缓存

一、什么是缓存

一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求。缓存能够服务的请求越多,整体系统性能就提升得越多。

 

二、angular 中的缓存

2.1 $cacheFactory 简介

$cacheFactory 是一个为所有Angular服务生成缓存对象的服务。在内部, $cacheFactory 会创建一个默认的缓存对象,即使我们并没有显示地创建。

要创建一个缓存对象,可以使用 $cacheFactory 通过一个ID创建一个缓存:

var cache = $cacheFactory('myCache');

这个 $cacheFactory 方法可以接受两个参数:

cacheId (字符串):这个 cacheId 就是创建缓存时的ID名称。可以通过 get() 方法使用缓存名称来引用它。

capacity :这个容量描述了在任何给定时间要使用缓存存储并保存的缓存键值对的最大数量。

 

2.2 缓存对象

缓存对象自身有下列这些方法可以用来与缓存交互。
info() : info() 方法返回缓存对象的ID、尺寸和选项。
put() : put() 方法允许我们把任意JavaScript对象值形式的键(字符串)放进缓存中。cache.put("hello","world");
put() 方法会返回我们放入缓存中的值。
get() : get() 方法让我们能够访问一个键对应的缓存值。如果找到了这个键,它会返回它的值;如果没有找到,它会返回 undefined 。cache.get("hello");
remove() : remove() 函数用于在找到一个键值对的情况下从缓存中移除它。如果没有找到,它就会返回 undefined 。cache.remove("hello");
removeAll() : removeAll() 函数用于重置缓存,同时移除所有已缓存的值。
destory() : destory() 方法用于从 $cacheFactory 缓存注册表中移除指定缓存的所有引用。

 

三、$http 中的缓存

Angular的 $http 服务创建了一个带有ID为 $http 的缓存。要让 $http 请求使用默认的缓存对象很简单: $http() 方法允许我们给它传递一个 cache 参数。

 3.1 默认的 $http 缓存
当数据不会经常改变时,默认的 $http 缓存就特别有用了。可以像这样设置它:

$http({
    method: 'GET',
    url: '/api/users.json',
    cache: true  //设置为true只是用来使用$http默认的缓存机制
});

现在,通过 $http 到URL /api/user.json 的每个请求将会存储到默认的 $http 缓存中。这个$http 缓存中的请求键就是完整的URL路径。

 

如果需要,也可以操作这个默认的 $http 缓存(比如,如果我们发起的另外一个没有缓存的请求提醒我们发生了增量变化,我们就可以在默认的 $http 请求中清除这个请求)。

为了引用 $http 的默认请求,只需通过 $cacheFactory() 使用ID来获取到该缓存:
var cache = $cacheFactory('$http');

对于所掌控的缓存,我们可以在需要时进行所有的正常操作,比如检索已缓存的响应,从缓存中清除条目,或者消除所有缓存的引用。
// 获取上一次请求的缓存
var usersCache = cache.get('http://example.com/api.users.json');
// 删除上一次请求的缓存入口
cache.remove('http://example.com/api.users.json');
// 重新开始并移除全部缓存
cache.removeAll();


var cache = $cacheFactory.get('$http');
      if(cache.get('cacheData')){
         console.log(cache.get('cacheData'));
      }else{
         helloService.play().then(
             function (data) {
                 cache.put("cacheData", data);  //往缓存中放入数据
                 console.log(data);
             }
        );
 }


 3.2 自定义缓存

有时候能够对缓存有更多的控制以及针对缓存的表现创建规则,这就需要创建一个新的缓存来使用 $http 请求。

通过自定义的缓存来让 $http 请求发起请求很简单。可以采用传递缓存实例的方式,而不必传递一个布尔参数 true 给请求。

var myCache = $cacheFactory('myCache');
$http({
  method: 'GET',
  utl: '/api/users.json',
  cache: myCache
});

一个小demo:定义一个缓存服务,依赖注入到你要用的控制器中,直接使用

define([
   'angularModule'
],function(app){
    app.factory('myCache', ['$cacheFactory', function($cacheFactory){
        return $cacheFactory('myCache');  //自定义一个缓存服务
    }])
});


//自定义缓存,有缓存就从缓存里取,否则就发送请求
if(myCache.get('cacheData')){
    console.log(myCache.get('cacheData'));
}else{
    helloService.play(myCache).then(
        function (data) {
            myCache.put("cacheData", data);
            console.log(data);
        }
    );
}


cache:只是为了可以使用默认$http的缓存机制
play : function (myCache) {
    return httpRequestService.request({
        method : 'get',
        url : 'http://localhost:8080/hello/play',
        cache : myCache
    })
}


 现在, $http 将会使用自定义的缓存而非默认缓存。

 

四、为 $http 设置默认缓存

每次我们想要发起一个 $http 请求时都要给它传递一个缓存实例并不方便,特别是对每个请求使用同一缓存的时候。

其实可以在模块的 .config() 方法中通过 $httpProvider 设置 $http 默认使用的缓存对象。

angular.module('myApp', []).config(function($httpProvider) {
  $httpProvider.defaults.cache = $cacheFactory('myCache', {capacity: 20});
});


这个 $http 服务不再使用它为我们创建的默认缓存;它会使用我们自定义的缓存,实际上这就是一个近期缓存最久未使用算法① (Least Recently Used,LRU)。

LRU缓存根据缓存容量只保留最新的缓存数目。也就是说,我们的缓存容量为20,因此会缓存前20个请求,但是进入第21个请求时,最近最少使用的请求条目就会从缓存中被删除。这个缓存自身会负责具体哪些要维护,哪些要移除。


链接: https://www.fly63.com/article/detial/516

浏览器缓存_HTTP强缓存和协商缓存

浏览器缓存主要分为强强缓存(也称本地缓存)和协商缓存(也称弱缓存),强缓存是利用http头中的Expires和Cache-Control两个字段来控制的,用来表示资源的缓存时间。协商缓存就是由服务器来确定缓存资源是否可用.

浏览器缓存问题原理以及解决方案

浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中,为什么使用缓存:减少网络带宽消耗,降低服务器压力,减少网络延迟,加快页面打开速度

Web缓存相关知识整理

一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面。用到了HTML5 的本地存储 API 中的 localStorage作为解决方案,回顾了下Web缓存的知识

使用缓存加速之后的网站访问过程变化

在描述CDN的实现原理之前,让我们先看传统的未加缓存服务的访问过程,以便了解CDN缓存访问方式与未加缓存访问方式的差别,用户访问未使用CDN缓存网站的过程为:用户向浏览器提供要访问的域名;

html页面清除缓存

页面打开时,由于缓存的存在,刚刚更新的数据有时无法在页面得到刷新,当这个页面作为模式窗口被打开时问题更为明显, 如何将缓存清掉?

HTTP之缓存 Cache-Control

通过在Response Header设置Cache-Control head 信息可以控制浏览器的缓存行为。我们先来看一下Cache-Control可以设置哪些值:缓存头Cache-Control只能在服务端设置,在客户端是由浏览器设置的,自己不能修改它的值。

工程化_前端静态资源缓存策略

增量更新是目前大部分团队采用的缓存更新方案,能让用户在无感知的情况获取最新内容。具体实现方式通常是(一般我们通过构建工具来实现,比如webpack):

前端静态资源自动化处理版本号防缓存

浏览器会默认缓存网站的静态资源文件,如:js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰,最常见的问题就是不能及时更新静态资源,造成新版本发布时用户无法及时看到新版本的变化,严重影响了用户体验。

vue后台管理系统解决keep-alive页面路由参数变化时缓存问题

一个后台管理系统,一个列表页A路由配置需要缓存,另一个页面B里面有多个跳转到A路由的链接。问题描述:首先访问/A?id=1页面,然后到B页面再点击访问A?id=2的页面,发现由于页面A设置了缓存,数据还是id=1的数据,并没有更新。

缓存命中率过低;大量缓存项同时刷新;刷新同一个缓存项

缓存的作用是在内存中临时存储来自外部系统(如数据库)的数据,以便让请求更快的得到响应。如果请求数据在缓存中不存在,或者已经超时失效,那么也要从外部系统查询,然后放入缓存中,这个过程叫刷新缓存。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!