javascript - js中字面量的多层级写法对效率有什么影响吗

Question

var templeFun = {
    nodataWarn: {
        stateHclass: '<p class="dataWa">暂无数据...</p>',
        stateNclass: '<p style="text-align:center;line-height: 50px;border: 5px solid #f3f3f3;">暂无数据...</p>',
        curSubid: $('.historySub .curth').attr('type_val')
    },
    //        分页初始页
    paPage: {
        notepage: 1,
        numPage: {
                $at: 4,
                $ad: {
                    $type: function(){
                    }
                }
            }
    }

}
就比如上面的代码，如果这种写法层数多了的话，这种访问：templeFun.paPage.numPage.$ad.$type(),对性能上或是效率上有什么影响吗

Answer 1

性能应该没太大影响，效率还要看你具体的数据处理，可以用chrome的console.time看代码执行的时间;

console.time('run');
var templeFun = {
    nodataWarn: {
        stateHclass: '<p class="dataWa">暂无数据...</p>',
        stateNclass: '<p style="text-align:center;line-height: 50px;border: 5px solid #f3f3f3;">暂无数据...</p>',
        // curSubid: $('.historySub .curth').attr('type_val')
    },
    //        分页初始页
    paPage: {
        notepage: 1,
        numPage: {
            $at: 4,
            $ad: {
                $type: function() {
                    return templeFun.paPage.numPage.$at++;
                }
            }
        }
    }
}
var value;
for (var i = 0; i < 100000; i++)
    value = templeFun.paPage.numPage.$ad.$type()
console.log(value);
console.timeEnd('run');

查询20万次执行时间：
run: 5.230ms
----------------------------------------
我把$type函数改成打印数据，其他不变：
$type: function() {
    console.log(templeFun.paPage.numPage.$at++)
    return 0;
}
执行时间是：

run: 5463.301ms

所以单纯查询并不怎么影响性能和效率，你的代码逻辑处理对效率有影响

Answer 2

那你选择是作贱自己，还是作贱机器。我相信大部分人选择后者。

Answer 3

层级多了, 对自己和机器理解都有影响!

Answer 4

这种不会成为性能瓶颈的，没有太大考虑的必要的，性能上肯定是会慢，毕竟你多一次查找，但是根本没有任何关系

Answer 5

就像楼上 所说， 层级的性能消耗， 相对与 DOM 刷新和渲染 所造成的性能消耗 是非常小的，另外，这让我想起 选择器。。。 你在脚本里面 运行一万次循环获取， 和运行一万次拼接好的DOM元素渲染到页面，你就会发现， 渲染的那种 --蹦了！

Answer 6

人能理解的层数不至于造成可感知的影响