缓存的原理

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. tmux使用入门

    tmux是Linux中窗口管理程序,适用于终端复用,尤其适合远程连接.最近,我正苦闷与ssh自动超时退出和broken pipe,决定投入tmux怀抱. 使用tmux最直接的好处,便是可以在一个远程连 ...

  2. Codeforces 303A(构造)

    题意:对0到(n-1)这n个数进行全排列.请找出三个全排列a.b.c,使得“a与b的对应元素的和”与“c的对应元素”对模n同余,无解输出-1.(n<=1e5) 分析:n为奇数有解,n为偶数无解 ...

  3. 联想YOGA3一键恢复系统教程

  4. SystemTapでMySQL 5.5のDisk I/Oを分析する

    http://d.hatena.ne.jp/sh2/20111121 2010年1月の記事SystemTapでMySQLのDisk I/Oを分析するの続きです.以前作成したSystemTapスクリプト ...

  5. SQL Error (2013): Lost connection to MySQL server at 'waiting for initial communication packet', system error: 0 解决方案

    远程服务器的操作系统:Ubuntu 本地:navicat +win10 连接名:随意填写 主机名:localhost 端口:3306 用户名:连接电脑的数据库的用户名 密码:连接电脑的数据库的密码 主 ...

  6. Linux经常使用命令002之搜索命令locate、whereis、which、find、grep

    Linux经常使用命令002之搜索命令locate.whereis.which.find.grep -20150811 经常使用搜索命令 -------文件搜索命令---------- -->l ...

  7. 【JAVA】merge two array by order

    public class MergeSort { static void show(int a[]) { int i; for (i = 0; i < a.length; i++) { Syst ...

  8. 发现所有的字都被加上了 <font> 标签,导致样式全部错乱

    经检查,发现我的浏览器默认打开了翻译软件!!!!!!!

  9. Prevent the "split brain" by configuring the majority of nodes

    ## Prevent the "split brain" by configuring the majority of nodes (total number of nodes / ...

  10. java反射中getDeclaredMethods和getMethods的区别

    getDeclaredMethods()          返回 Method 对象的一个数组,这些对象反映此 Class 对象表示的类或接口声明的所有方法,包括公共.保护.默认(包)访问和私有方法, ...