JavaScript性能优化6——变量局部化

Posted JIZQAQ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript性能优化6——变量局部化相关的知识,希望对你有一定的参考价值。

目录

一、什么是变量局部化

二、实例

结论


一、什么是变量局部化

我们的变量分为全局变量和局部的变量,这里的变量局部化是指,我们在写代码的过程中,涉及到变量定义的时候,能够把变量放在局部就把变量放在局部的作用域当中。这样可以提高代码的执行效率,减少了数据访问时需要查找的路径。

二、实例

代码1:使用全局变量

var i,str = ""
function packageDom () {
    for(i=0;i<1000;i++){
        str += i
    }
}
packageDom()

代码2:使用局部变量

function packageDom() {
    let str = ''
    for(let i=0;i<1000;i++){
        str += i
    }
}
packageDom()

 使用JSBench进行代码性能测试,可以看到使用局部变量的方法性能大大提升。

使用全局变量的话每次我们都要从另外一个作用域当中查找str和i的值

而使用局部变量的话,i和str直接就在当前作用域当中。查找和读取速度变快。

结论

对于我们的数据存储和读取,我们希望在作用域链查找上边减少它的访问层级,从而去提高我们的代码执行速度。所以建议把数据直接放在当前执行上下文的同级作用域当中。

以上是关于JavaScript性能优化6——变量局部化的主要内容,如果未能解决你的问题,请参考以下文章

10.高性能JavaScript

JavaScript基础概念之----性能优化

vue性能优化

vue性能优化

性能优化之数据存储&DOM编程

JavaScript中全局变量和局部变量的不同