边做边学——ie性能1

这几天做了这样一个功能，将表格内容按照大小顺序排列，哇O(∩_∩)O哈哈~，看起来很简单，于是我就写了如下代码：

var the_length = $(".my_stock_list").length;
var the_stocks = $(".my_stock_list");
       for(j = 0;j<the_length;j++){
		for(i = the_length; i > j;i--){
			if(the_stocks.eq(i).attr("alt") - the_stocks.eq(i-1).attr("alt") > 0){
				the_stocks.eq(i).after(the_stocks.eq(i-1));//数值小的放在后面
			};
		}
	}

 嗯！思路很明确，数值小的用after排到后面....test...火狐下一切正常，可ie6、7下却跑不起来了o_O!

我怒了，如此简单程序ie都吃不消？

上网一查，才知道是我少见多怪了，ie下对class的查询是要遍历整个Dom树的，整个？对是整个！我的length == 50啊，我对Dom树遍历了1250遍啊！！！！！！！

    这个case让我对js性能提高有了更进一步的了解，以前编程过程中总是喜欢对Dom树进行操作，真把他当成树了，取东西，放东西啥都往上整，这样多直观方便啊，没想到竟然有如此大的效率隐患，以前很少用js对象的,以前以为，要想保证唯一性，要处理js对象，又要处理dom对象，多麻烦啊.....又整理了下思路，为什么不只处理js对象，再重新生成一遍呢，都是对Dom 的改变，对整体刷新的改变可能只需一次，但对元素刷新的改变却有可能有很多次！

    经过此劫，我开始review我的代码，为自己的无知赎罪-_-!

对了，附上新代码：

                                     var the_length = stockContent.length;
					for(j = 0;j<the_length;j++){
						var the_big;
						for(i = the_length; i > (j+1);i--){
								if(stockContent[i-2].followTime - stockContent[i-1].followTime < 0){
									the_big = stockContent[i-1];
									stockContent.splice((i-1),1,stockContent[i-2]);
									stockContent.splice((i-2),1,the_big);
								};
						}
					}