我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

datagrid性能(一):性能问题何来?

使用javascript封装的一个datagrid控件时,可能会提出这个问题,在datagrid里面显示1000条数据,而且需要绑定其click,hover,dblclick事件。(可能你会觉得这个需求有点无聊。为什么要显示1000行数据,可以分页的。我最开始也这么想,但是分页有些问题解决不了,比如,我们需要选中多条数据做一个操作,可能我要选的记录在第一页,第n页。这样还需要记录行选中状态。而且可能在分页查询的时候数据已经发生了更改。比如当你翻页到第二页的时候,第一页选中的数据已经删除了。这样选中的数据已经是“脏数据”了。)


javascript执行很慢的时候浏览器会提示脚本执行过慢甚至假死(还是要鄙视一下IE6执行js的速度)。但是上面的问题很有可能就会出现浏览器奔溃的情况。所以在实现这个功能,不得不审视一下现在的实现。

看看下面的jQuery代码,类似于现有的写法:

$(function(){
            
var arr = [];

            
var date1 =(new Date()).getTime();
            
for (var i=0;i<1000 ; i++){
                arr.push(
"<tr><td>"+(new Date())+"</td><td>"+(new Date())+"</td><td>"+(new Date())+"</td><td>"+(new Date())+"</td><td>"+(new Date())+"</td></tr>");
            }
            
var $rows= $(arr.join("")).appendTo("#tablebody");
            
var date2 =(new Date()).getTime();
            
//date2-date1 =453ms
            
            
//事件处理 406ms
            $rows.click(function(){
                $(
"#tablebody .highlight").removeClass("highlight");
                
this.className="highlight";
            }).hover(
function(){
                
this.className="hover";
            },
function(){
                
this.className="";
            }).dblclick(
function(){
                alert(
"dblclick");
            });
            
var date3 =(new Date()).getTime();

            alert((date2
-date1)+"\n"+(date3-date2));
        });

这段代码在table中新增1000行,然后把监听每行的click,hover,dblclick事件。这个代码在IE8上执行时间是0.95s左右(具体时间因环境而异)。0.95的时间去显示数据确实是让人难以接受。这个时间可能是后台数据库查询的时间。这个时间其实还有优化的空间。

第一部分的DOM操作已经是比较快的了。这个时间会跟cell中显示的内容直接相关,能够的做的性能优化貌似都做了。jQuery中的appendTo在DOM操作性能上应该难以超越了。令我惊讶的是,绑定事件的时间竟然会有406ms。与DOM操作时间同一个量级。我用了几种方法做了对比:

//第一种情况:复杂的事件处理 406ms
            $rows.click(function(){
                $(
"#tablebody .highlight").removeClass("highlight");
                
this.className="highlight";
            }).hover(
function(){
                
this.className="hover";
            },
function(){
                
this.className="";
            }).dblclick(
function(){
                alert(
"dblclick");
            });

//第二种情况:简单事件处理 141ms
            $rows.click(function(){
                alert(
"clicked");
            }).dblclick(
function(){
                alert(
"dblclick");
            });


//第三种情况:使用原生的javascript事件绑定 62ms
            var rows= document.getElementById("tablebody").getElementsByTagName("tr");
            
for (var i=0;i<rows.length ; i++){
                (
function (row){
                    row.onclick
= function(){
                        alert(
"clicked");
                    };
                    row.ondblclick
= function(){
                        alert(
"dblclicked");
                    };
                })(rows[i]);
            }


//第四种情况:只是用jquery做选择器 47ms
            $rows.each(function(){
                
this.onclick= function(){
                    alert(
"clicked");
                };
                
this.ondblclick= function(){
                    alert(
"dblclicked");
                };
            });

第一种情况与第二种情况的对比可以发现事件绑定的越少,时间越短。
第二种情况与第三种情况的对比可以发现使用原生的javascript事件绑定会比jQuery时间短。这个貌似有点不好解释,jQuery封装的目的可能更在于减少代码量。jQuery的事件绑定比原生的事件绑定会有这么大的差别也是让我惊讶的。
第三种情况其实多做了一次DOM选择,因为$rows其实就是新增行jQuery对象。所以直接用each方法遍历绑定事件,时间是最短的。

总的来说,性能问题不仅仅在于我们理解的DOM操作上面,事件的绑定其实也是很关乎性能的。大家平时是怎么解决这种问题了,欢迎交流。上面的代码下载

posted on 2011-01-18 10:25 衡锋 阅读(2153) 评论(5)  编辑  收藏 所属分类: javascriptJqueryWeb开发

评论

# re: datagrid性能(一):性能问题何来? 2011-01-18 12:16 凌晨风

其实没必要那么较真,一般大数据量的业务操作很少,现实中也是很少,分页就是解决这个的,而且你完全可以说服客户分页的好处  回复  更多评论   

# re: datagrid性能(一):性能问题何来? 2011-01-18 12:26 阳衡锋

@凌晨风
大多数还是分页。有些地方还是不方便。期待下文吧。呵呵  回复  更多评论   

# re: datagrid性能(一):性能问题何来? 2011-01-18 12:29 凌晨风

@阳衡锋
哈哈 ,期待下文!其实还有一种分页方式就是判断滚动条的距离,完全可以解决大数据量的问题  回复  更多评论   

# re: datagrid性能(一):性能问题何来? 2011-02-28 17:39 wjk

看下jQuery的源码不久知道了 jQuery为了方便开发做了很多额外的事情  回复  更多评论   

# re: datagrid性能(一):性能问题何来? 2011-09-16 08:24 tb

恩 比较不错 值得学习   回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: