<!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.样例

需求

有个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测试两段代码，方法一明显要快不少，主要是因为方法一访问的层级要比方法二要少。所以实际开发过程中，尽量把数据放在方便获得的地方，不要藏得太深。

参考资料

1.拉勾网《大前端训练营》课程

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