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

最新推荐文章于 2024-09-08 22:09:14 发布

JIZQAQ

最新推荐文章于 2024-09-08 22:09:14 发布

阅读量463

点赞数 1

分类专栏：前端优化前端学习笔记 JavaScript

本文链接：https://blog.csdn.net/qq_43106115/article/details/117629812

版权

前端学习笔记同时被 3 个专栏收录

21 篇文章 4 订阅

订阅专栏

JavaScript

15 篇文章 0 订阅

订阅专栏

前端优化

10 篇文章 0 订阅

订阅专栏

本文探讨了如何通过缓存数据和减少访问层级来提高JavaScript的执行速度。举例说明了在频繁使用数据时，缓存数据可以避免重复计算，从而提升性能。同时，减少了代码中数据的访问层级也能带来速度上的提升。通过JSBench测试，验证了这两种方法在不同场景下的效果。优化代码结构和数据访问路径是提升前端性能的关键。

摘要由CSDN通过智能技术生成

一、缓存数据

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

需求

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