ajaxTag 1.2中AjaxJspTag.Callout中getElementsByClassName性能问题

       昨天客户反映有个画面显示特别慢，我就接手来调查原因。一看jsp源码，确实非常复杂，然后就一步一步来了，首先看是不是服务器端的问题，通过设定调试生成的信息发现服务器的业务处理及JSP的关联Servlet的处理是不会有那么夸张的延迟问题，只能是客户端的问题了。

       这个画面用了大量的AjaxTag，所以在生成发送到客户端的html代码中有大量的Ajax Tag关联的JavaScript对象生成代码。为了验证我的猜想，我将画面上所有的Ajax功能全部删除，再运行，画面很快就显示出来。最后通过阅读关联的AjaxTag.js代码，发现是AjaxJspTag.Callout中的getElementsByClassName方法执行效率太低导致。

       getElementsByClassName是在Prototype.js定义的方法，然后通过google一查，才知道老外一直在为提高这个方法的效率做努力，有兴趣的同学可以自己去看看，<<http://blog.whatwg.org/the-road-to-html-5-getelementsbyclassname>>.

        发现了问题就要解决这个问题，ajaxTag.js的处理逻辑不能再用了，所以我重新写了一个Tag，重新生成自定义的一个javaScript对象SelfCallAjax，其继承于ajaxTag.js中的AjaxJspTag.Callout对象，重写了其中setListeners方法，以前的方法内容是

 

    setListeners: function() {

    if (this.options.sourceClass) {

      var elemList = document.getElementsByClassName(this.options.sourceClass);

      for (var i=0; i<elemList.length; i++) {

        elemList[i].onmouseover = this.calloutMouseover.bindAsEventListener(this);

        elemList[i].onmouseout = this.calloutMouseout.bindAsEventListener(this);

      }

    }

  },

改写后变成

    etListeners: function() {

    if (this.options.source) {

      var elem = $(his.options.source);

        elem .onmouseover = this.calloutMouseover.bindAsEventListener(this);

        elem .onmouseout = this.calloutMouseout.bindAsEventListener(this);

      }

   

  },

 

      Jsp的相关内容也需要进行修改，以前都是利用元素的style class name来进行callout ajax绑定，而现在就是利用element id来绑定，所以在每个需要绑定的元素后面都必须添加对应的AjaxCallTag.