JS高级——缓存原理

缓存的原理

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高级——缓存原理

最新文章

热门文章