缓存的原理

1、就是将常用的数据存储起来,提供便利,减少查询次数和所消耗的事件

2、利用作用的原理所产生的数据库:非关系型数据库(内存型数据库) MongoDB、Redis等

3、还有网站静态页面缓存机制,将网页静态化,存储在服务器端

缓存原理运用

1、之前我们递归的原理计算斐波那契数列,但是我们发现递归所消耗的运算量是很大的

<script>
var count = 0;
function fib(n){
count ++;
if(n <= 2){
return 1;
}
return fib(n - 1) + fib(n - 2);
} fib(5);
console.log(count);//9
count = 0;
fib(6);
console.log(count);//15
count = 0;
fib(20);
console.log(count);//13529
count = 0;
fib(21);
console.log(count);//21891
</script>

2、我们可以创建一个缓存容器,如果放入的数字之前存在,就直接拿出来;不存在就进入下一步的运算,每次都将计算的值存入到容器中

<script>
//创建缓存容器
function createCache(){
var cache = {};
return function (key, value) {
//如果传了值,就说名是设置值
if(value !== undefined){
cache[key] = value;
return cache[key];
}
//如果没有传值,只穿了键,那就是获取值
else{
return cache[key];
}
}
}
var count =0 ;
function createFib(){
var fibCache = createCache();
function fib(n){
count ++;
//1.从cache中获取数据
if(fibCache(n) !== undefined){
//如果缓存中有 直接返回
return fibCache(n) ;
}
//如果缓存中没有 就计算
if(n <= 2){
//把计算结果存入数组
fibCache(n , 1) ;
return 1;
}
var temp = fib(n - 1) + fib(n - 2);
//把计算结果存入数组
fibCache(n, temp) ;
return temp;
} return fib;
} var fib = createFib();
fib(5);
console.log(count);//7
count = 0;
fib(6);
console.log(count);//3
count = 0;
fib(20);
console.log(count);//29
count = 0;
fib(21);
console.log(count);//3
</script>

jquery的缓存实现分析

1、jquery中扫描dom元素,扫描class,扫描id都是很费时间,每次查询元素都要全局扫描一次,必然很费时间,所以jquery也有自己的缓存机制

模拟jquery缓存

<script>
function createCache(){
//cache对象中以键值对的形式存储我们的缓存数据
var cache = {};
//index数组中该存储键,这个键是有顺序,可以方便我们做超出容量的处理
var index = [];
return function (key, value) {
//如果传了值,就说名是设置值
if(value !== undefined){
//将数据存入cache对象,做缓存
cache[key] = value;
//将键存入index数组中,以和cache中的数据进行对应
index.push(key); //判断缓存中的数据数量是不是超出了限制
if(index.length >= 50){
//如果超出了限制
//删除掉最早存储缓存的数据
//最早存入缓存的数据的键是在index数组的第一位
//使用数组的shift方法可以获取并删除掉数组的第一个元素
var tempKey = index.shift();
//获取到最早加入缓存的这个数据的键,可以使用它将数据从缓存各种删除
delete cache[tempKey];
}
}
return cache[key];
}
} var eleCache = createCache();
eleCache("name","高金彪");
console.log(eleCache("name"));
</script>

jquery源码:很简洁,为了减少变量的声明将函数当对象进行存储值,还有就是对象的添加属性,为了不与对象原生可能拥有的属性发生冲突,使用了[ key + " " ]的方式

<script>
function createCache() {
var keys = [];
function cache( key, value ) {
// 使用(key + " ") 是为了避免和原生(本地)的原型中的属性冲突
if ( keys.push( key + " " ) > 3 ) {
// 只保留最新存入的数据
delete cache[ keys.shift() ];
}
// 1 给 cache 赋值
// 2 把值返回
return (cache[ key + " " ] = value);
}
return cache;
} var typeCache = createCache();
typeCache("monitor");
console.log(typeCache["monitor" + " "]); typeCache("monitor","张学友");
console.log(typeCache["monitor1" + " "]); typeCache("monitor","刘德华");
console.log(typeCache["monitor2" + " "]); typeCache("monitor3","彭于晏");
console.log(typeCache["monitor3 "]);
</script>

JS高级——缓存原理的更多相关文章

  1. 第十七课:js数据缓存系统的原理

    这一章主要讲的是jQuery的缓存系统的历史发展,以及他自己的框架的缓存系统的实现.都是源码解析. 我就挑几个重点讲下: (1)jQuery的缓存机制的原理 jQuery的缓存机制实现的原理是在元素中 ...

  2. 深入研究Node.js的底层原理和高级使用

    深入研究Node.js的底层原理和高级使用

  3. JS高级(摘自简书)

    JS高级 1. 访问对象属性(方法也是属性)的通用方式:obj['属性名'] 1. 属性名包含特殊字符,如"-".空格,访问:obj['content-type'] 2. 属性名不 ...

  4. ahjesus 前端缓存原理 转载

    LAMP缓存图 从图中我们可以看到网站缓存主要分为五部分 服务器缓存:主要是基于web反向代理的静态服务器nginx和squid,还有apache2的mod_proxy和mod_cache模 浏览器缓 ...

  5. Ext.js高级组件

    第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...

  6. Ajax缓存原理

    一.什么是Ajax缓存原理? Ajax在发送的数据成功后,会把请求的URL和返回的响应结果保存在缓存内,当下一次调用Ajax发送相同的请求时,它会直接从缓存中把数据取出来,这是为了提高页面的响应速度和 ...

  7. 【Web技术】276- WebView缓存原理分析和应用

    前言 混合式开发,在产品体验以及页面加载速度的体验上已经非比以往的.今日早读文章由@unclechen分享. 正文从这开始- 一.背景 现在的App开发,或多或少都会用到Hybrid模式,到了WebV ...

  8. 如何编写高质量的js代码--底层原理

    转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇   本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...

  9. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

随机推荐

  1. springboot 2.x 集成 drools 7.x

    简介:springboot 2.0.4.RELEASE 集成 drools 7.11.0.Final 1.项目结构 2. pom.xml文件 <?xml version="1.0&qu ...

  2. HDU——1267 下沙的沙子有几粒?

    下沙的沙子有几粒? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  3. 函数式语言(functional language)定义、函数式语言的种类以及为什么函数式语言会流行起来的学习笔记

    一.什么是函数式语言?       函数式语言一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型.这种语言具有较强的组织数据结构的能力,可以把某一数据 ...

  4. 将list转为json字符串

    //确保JSP和servlet的编码方式一致 resp.setContentType("text/html;charset=GBK"); List<String> jy ...

  5. iOS xmpp协议实现聊天之openfire的服务端配置(二)

    本篇主要说一下怎样利用命令行来正确配置MySql. 首先打开终端: 1.为mysql起一个别名 alias mysql=/usr/local/mysql/bin/mysql 2.创建mysql的管理员 ...

  6. css3 和 html5 笔记

    1.css3 ie下大部分不兼容 ie9以下 浏览器低版本不兼容 需要写 -webket-transition:1s -moz-transition: 1s -o-transition:1s tran ...

  7. Java中集合List,Map和Set的差别

    Java中集合List,Map和Set的差别 1.List和Set的父接口是Collection.而Map不是 2.List中的元素是有序的,能够反复的 3.Map是Key-Value映射关系,且Ke ...

  8. Python3基础(二) 基本数据类型

    Python中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建.在Python中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对象的类型 ...

  9. LeetCode 705. Design HashSet (设计哈希集合)

    题目标签:HashMap 题目让我们设计一个 hashset,有add,contains,remove 功能. 建立一个boolean array,index 是数字的值,具体看code. Java ...

  10. LeetCode 443. String Compression (压缩字符串)

    题目标签:String 这一题需要3个pointers: anchor:标记下一个需要存入的char read:找到下一个不同的char write:标记需要存入的位置 让 read指针 去找到下一个 ...