日期:2014-05-16  浏览次数:20389 次

jquery.autocomplete性能优化笔记
 最近有一个项目用到,jquery.autocomplete,本以为是一个之前项目组成员写的一个jquery插件,后来一搜索,不是内部原创,是引用一个广泛使用的公开插件。
       首先向作者致敬,作者解决了有无问题,本人侧重于结合项目做具体应用场景的性能优化。
       确认问题,上游反馈的用户体验糟糕的地方主要有两个,一个是搜索打开速度慢,一个是输入长关键词界面卡死现象。
       拿到代码,第一步确定性能瓶颈,粗略浏览代码,并没有发现一些恶名昭著的性能陷阱(复杂dom交互,大递归,大循环)初步确认可优化的项目有(标注为序号和蓝色)
              1、优化html模板系统,使用系统函数replace替代“+”
              2、合并html操作
              3、合并绑定事件
              4、使用[].join()代替+优化字符串操作
       代码引用形式为:
autoComplete({
                'target':'Dsearch',
                'input':'seachI',
                'container':'container',
                'url':'/search',
                'delay':100,
                'formatItem':function(item){
                        return '<span>'+item.name+'</span><em>'+item.count+'</em>';

                }
,【1】优化html模板【                'formatItem':function(item,i){
                        return '<li i={$i$}><span>{$name$}</span><em>{$count$}</em></li>'.replace("{$name$}",item.name).replace("{$count$}",item.count).replace("{$i$}",i);
                },】

                'result':function(item){
                        window.location=item.url;
                },