jquery优化引发的思考

2021-11-12 08:16:50

无意间看到jquery优化的一个细节让我觉得不可思议记录一下。仅仅只是换个地方代码就能提高数倍的效率，带给我的不是个仅是个小技巧，而是一总编程思想，技术大牛往往是在细节上体现。

通过缓存最小化选择操作
jQuery的选择器棒极了。它们可以在页面上以极其简单的方法找到任何元素，但是在内部它们必须通过大量的步骤才可以实现选择操作，如果你错误的使用它们，那么你可能发现一切都变得相当慢。

如果你一次又一次的选择相同元素(例如在一个循环中)，那么你可以一次选择出它并放入内存中，同时你可以在核心内容里操作它。看下面的例子，这里我们利用循环往UL里添加条目：

for (i = 0; i < 1000; i++) {   
    var myList = $(‘.myList‘);   
    myList.append(‘This is list item ‘ + i);   
}

这在我的PC上Firefox 3花费了1066毫秒时间（可以设想一下在IE6中的情况！），对JavaScript而言这个操作相当慢。现在让我们来看看下面的代码，这里我们仅使用了一次选择操作：

var myList = $(‘.myList‘);   
  
for (i = 0; i < 1000; i++) {   
    myList.append(‘This is list item ‘ + i);   
}

仅仅用了224毫秒，通过移动一行代码就快了将近4倍。

码农公寓