JavaScript性能优化7——缓存数据减少访问层级

Posted JIZQAQ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript性能优化7——缓存数据减少访问层级相关的知识,希望对你有一定的参考价值。

目录

一、缓存数据

1.引入

2.样例

需求

代码

总结

二、减少访问层级

1.引入

2.样例

需求

代码


一、缓存数据

1.引入

用缓存数据提高JS执行速度,主要说的就是对于需要多次使用的数据进行提前保存,后续进行使用。具体我这里用一个例子来了解一下,如何通过处理缓存数据来提高javascript的执行速度。

2.样例

需求

界面上我们有个div,它身上有个id和class,我们想去判断一下元素身上是否存在指定的类名。

代码

方法1的代码是没有使用缓存的,而方法2的代码是使用了缓存的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>缓存数据</title>
    </head>
    <body>
        <div id="skip" class="skip"></div>
        <script>
            //找到目标元素
            var oBox = document.getElementById('skip')
            //方法1:
            //函数第一个参数是需要被判断的元素,第二个是class的名字
            /*
            function hasClassName(ele, cls){
                return ele.className == cls
            }
            console.log(hasClassName(oBox,'skip'))
            */
            // 方法2:
            // 假设在当前函数体里,需要对className的值进行多次使用,那么我们就可以将它提前缓存起来
            function hasClassName(ele, cls){
                var clsName = ele.className
                return ele.className == cls
            }
            console.log(hasClassName(oBox,'skip'))
        </script>
    </body>
</html>

使用JSBench进行两种方式的对比:

其实结果是差不多的,因为实际上我们也就只做了一次数据调用而已,在这种情况下,甚至使用缓存显得有点多此一举,反而稍稍更慢一些。

那我们修改两段代码,在里面多加一条打印的语句,模拟数据被多次调用的情况。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>缓存数据</title>
    </head>
    <body>
        <div id="skip" class="skip"></div>
        <script>
            //找到目标元素
            var oBox = document.getElementById('skip')
            //方法1:
            //函数第一个参数是需要被判断的元素,第二个是class的名字
            /*
            function hasClassName(ele, cls){
                console.log(ele.className)
                return ele.className == cls
            }
            console.log(hasClassName(oBox,'skip'))
            */
            // 方法2:
            // 假设在当前函数体里,需要对className的值进行多次使用,那么我们就可以将它提前缓存起来
            function hasClassName(ele, cls){
                var clsName = ele.className
                console.log(clsName)
                return ele.className == cls
            }
            console.log(hasClassName(oBox,'skip'))
        </script>
    </body>
</html>

同样使用JSBench进行对比,因为第二个方法使用clsName的时候只需要从自己的作用域中查找,不用再去其他作用域下查找,所以多次使用这个数据的话,使用缓存会稍显快一些。

不过虽然速度上是快了一些,空间上其实多使用了一块。

总结

  1. 在我们的代码中,可以考虑减少声明和语句数。
  2. 缓存数据,把作用域链层级减少,提高代码执行速度。 

不过具体使用哪种办法,还是得根据我们的代码来做决定。

二、减少访问层级

1.引入

我们有一个对象,嵌套了好几层。而我们需要获得里面某个层级比较深的数据,那就需要一层一层遍历获取我们要的,这个时候就会希望做一些扁平化处理。

2.样例

需求

有个Person,里面有name和age的属性,我们需要获取里面age属性。

代码

方法1:

直接在外面调用.age来获取

//方法1
function Person() {
    this.age = 40
    this.name = 'zce'
}

let p1 = new Person()
console.log(p1.age)

方法2:

在Person内部写一个getAge函数,来获取age的值,外面调用Person内的getAge函数

//方法2
function Person() {
    this.age = 40
    this.name = 'zce'
    this.getAge = function() {
        return this.age
    }
}

let p1 = new Person()
console.log(p1.getAge())

使用JSBench测试两段代码,方法一明显要快不少,主要是因为方法一访问的层级要比方法二要少。 所以实际开发过程中,尽量把数据放在方便获得的地方,不要藏得太深。

以上是关于JavaScript性能优化7——缓存数据减少访问层级的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化

缓存与性能优化简介

浏览器性能优化

性能优化

笔试常考--浏览器性能优化

前端性能优化