javascript - jQuery 中很方便的方法是否在性能上造成不必要的浪费~

Question

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

---

点击显示其他隐藏:

$('li').on('click', function () {
    $(this).show().siblings().hide();
});

var li = $('li');

li.on('click', function () {
    li.hide();
    $(this).show();
});

第二种方法是否比第一种更加优化 第一种的 siblings 方法是不是每次都去重复的获取相邻元素 等同于频繁的操作 dom 了

Answer 1

这个问题不是绝对的说第一种方式好还是第二种方式好

第一种方式程序具有更好的可读性，代码基本就能对应到你的编程思路，这样的代码很明确

第二种方式效率会高一点，但是在浏览器中这点性能基本可以忽略不计

所以说第一种方式是有性能浪费，但是并不是不必要的，有时候还很有必要！

如果在比较复杂的系统中建议使用第一种方式，便于后期可持续开发和维护，对于明显对性能有影响的地方，应该是单独提出来一个方法，比如showCurrentItem，函数里面是你优化的代码，外层一定要保持良好的可读性

Answer 2

我个人认为，第二种更快一些。因为间接的少了一部siblings。我个人理解，操作DOM是指花在渲染上的时间，并不是你parent什么的。

Answer 3

jQuery 查询是个比较耗时的过程，所以，每次都进行 siblings() 查询肯定性能会低一些。

但注意第二种方法有两个问题

1. 全局污染。当然如果你的 li 不是全局，这个情况会好一些。但至少这里它只在 click 方法中用到，应该尽可能小的限定其作用域，可以适当的采用闭包(如果它所在的作用域本来就很小了，可以不管)

2. li 这个集合一开始就已经取了，如果后面还有代码修改 DOM 添加或者删列表项，那这里就会有问题。这种情况下应该使用第一种方案。

总的来说，这点性能差是可以不用考虑的，毕竟这不是一个密集计算的环境。

Answer 4

2种方式都不好！

这种情况最好的方式是把点击事件绑定在li的父级元素ul上。利用事件委托的方式来搞定。

$('ul').click(function(e) {
    if(e.target.nodeName.toLowerCase() == 'li') {        
        $(this).children().hide();
        $(e.target).show();
        
    }
})

Answer 5

性能几乎一致，因为底层都会遍历所有节点

Answer 6

开发阶段还是优先考虑可读性。