美文网首页
作用域对性能的影响

作用域对性能的影响

作者: 前端大锤 | 来源:发表于2018-02-02 00:04 被阅读0次

作用域对性能的影响

作用域是理解JS的关键所在,同样作用域关系到性能。其实主要还是标识符的解析会影响到性能。而我们主要是从特别细微的地方去分析作用域的性能问题。
可能有一些地方的优化在引擎不断优化的情况下已经成效渐微,但是我觉得还是有必要去从根源了解为什么我们要这么做,

追根溯源

我们以下面这个函数为例

function add(num1, num2) {
    var sum = num1 + num2;
    return sum;
}
var total = add(5, 10);

我们先来看一下在执行add函数的时候的作用域链


image

可以从图中看到全局对象位于作用域的末端,活动对象位于作用域的前端

标识符解析:
当函数在执行的时候,每遇到一个变量都会去搜索执行环境的作用域链,查找同名的标识符,且搜索过程是从作用域链的头部开始。搜索的时候先以当前运行函数的活动对象开始一直到作用域链的最后,如果搜索到则使用这个标识符对应的变量,没有则为视为标识符未定义。
所以一个标识符所在的位置越深,它的读写速度越慢,由于全局变量总是存在于执行环境作用域链的最末端。所以函数中局部变量 > 全局变量。

other:
当名字相同的两个变量在作用域链的不同部分的时候,那么标识符则为最先找到的那个

var a = 1;
function test(){
    var a = 2;
    return a;
}
test();  // a = 2

最佳实践

  • 用局部变量替换全局变量
  • 减少访问全局变量或者位于作用域链深处的标识符的次数
funtion init(){
    var doc = document,
        bd = doc.body;
        
        doc.getElementById('test').onclick = function(){}
        
        bd.className = '';
}

</br>
</br>
举一反三

问:既然作用域对性能有影响,那我们有什么办法去临时改变作用域链么?
答案是有的,JS中with和try-catch是可以临时改变作用域链的。

疑惑

  • with语句主要是为了将代码的作用域设置到同一个特定的对象中(额,这句话有点抽象啊!!别急,我们看一下追根溯源)
  • 为什么都说with语句性能有问题?
  • try-catch又是怎么改变作用域链的,是否有性能问题,又该怎么避免性能问题?

追根溯源

我们还是要找个例子,比如:

funtion init(){
    with(document){
        var bd = body,
            links = getElementsByTagName('a');
        
        getElementById('test').onclick = function(){}
        
        bd.className = '';
    }
}

我们把前面的init函数改造了一下,当执行到with语句的时候,执行环境的作用域链被临时改变了,一个新的活动对象被创建,它包含了参数指定的对象的所有属性,并将新的活动对象推入作用域链的首位(这就解决了我们的第一点疑惑,所以定义with语句的目的主要是简化多次写同一个对象的工作)。如图:


image

可以从图中看到,第一位的是参数的对象,第二位是局部变量,第三位是全局变量。
虽然访问document对象的属性变快了,但是局部变量的访问变慢了。这就是with语句的性能问题(我们的第二点疑惑也解决了)。

try-catch同样在try代码块中发生错误的时候,会自动跳转到catch,其将异常对象推入作用域链,并将其置于作用域链的首位。同with。

最佳实践

  • 简化catch语句的代码,最好没有局部变量的访问
try{
    init()
} catch(error) {
    handleError(error)
}

由于只有一条语句,且没有对局部变量的访问,所以作用域链的临时改动并不会影响性能。

</br>
</br>
举一反三

问:函数的闭包也依赖作用域,那闭包有没有性能问题?
答案:有的

追根溯源

再来个闭包例子:

function assignEvents() {
    var id = 'xdi9592';
    document.getElementById('save-btn').onclick = function(event) {
        saveDocument(id);
    }
}

当执行assignEvents函数时,就会创建包含当前环境的第一个活动对象,然后再就是全局的一个活动对象。当闭包被创建的时候,它的[[scope]]属性被初始化为前面的两个活动对象。如下图:


image

通常函数执行完成之后,函数的活动对象会随着执行环境一起销毁,但是由于闭包的引用仍然存在,所以闭包中的活动对象无法销毁,因此需要更多的内存消耗,要注意内存泄漏的问题。除了这个之外,当闭包执行的时候,闭包的执行环境还会创建一个当前环境的第一活动对象,之前的两个引用再往后排,由此变成了下面的样子:


image

由于函数访问的id和saveDocument不在第一活动对象中,频繁的跨作用域访问标识符时,又是一次性能的损耗。

最佳实践

  • 小心的使用闭包
  • 常用的跨作用域链的变量存储在局部变量中,然后访问局部变量

相关文章

  • 作用域对性能的影响

    作用域对性能的影响 作用域是理解JS的关键所在,同样作用域关系到性能。其实主要还是标识符的解析会影响到性能。而我们...

  • 作用域和闭包

    目录 概述 作用域编译过程词法作用域全局作用域函数作用域 闭包循环和闭包闭包的用途性能 总结 概述 作用域和闭包一...

  • JavaScript作用域解析

    无论是哪种语言,作用域都是一个非常重要的概念,同样,作用域对JavaScript有许多影响。从功能的角度来看,作用...

  • ng-if 对作用域的影响

    ng-if 隔离作用域 入坑情景: 在使用ui-bootstrap时,根据ui-bootstrap的指引: 官方J...

  • var与let对作用域的影响

    var与let区别: var可以声明全局变量与局部变量,并且具有变量提升机制; let声明块级变量,同时也是为了解...

  • ES6 块级作用域

    {}块级作用域,作用域之间互不影响(不管是父子还是孙子什么的,不像函数作用域,儿子没有可以找父亲要) let 解决...

  • 函数变量及四种函数类型

    变量起作用的代码范围称为变量的作用域 不同作用域内同名变量之间互不影响就像不同文件夹的同名文件间互不影响...

  • JS性能优化的一些建议

    数据存储 在JS中,数据存储的位置会对代码整体性能产生重大的影响(因为作用域的读取顺序)。 数据存储共有4种方式:...

  • 2022-03-27

    什么是作用域 作用域规定了当前执行代码对变量的访问权限 作用域最大的作用就是变量隔离,不同作用域下的同名变量不会有...

  • 作用域

    什么是作用域 作用域规定了当前执行代码对变量的访问权限 作用域最大的作用就是变量隔离,不同作用域下的同名变量不会有...

网友评论

      本文标题:作用域对性能的影响

      本文链接:https://www.haomeiwen.com/subject/qitszxtx.html