如何提高智能手机上表格过滤JavaScript的速度？

I want to filter a table with an input box. It works but it is slow on smartphones which are my target platform - Iphone, Htc Touch HD (800 rows take about 4sec to filter).

我想用输入框过滤表格。它可以工作,但它在我的目标平台智能手机上很慢--Iphone,Htc Touch HD(800行需要大约4秒来过滤)。

Please let me know if you can help speed this up.

如果你能帮助我加快速度,请告诉我。

function time(){
    var now = new Date();
    var time = now.getTime();

    return time
}

function filter (phrase, _id){
    var starttime = time();
    var words = phrase.value.toLowerCase().split(" ");
    var table = document.getElementById(_id);
    var ele = null;
    var rows = new Array();
    for (var r=0 ; r < table.rows.length; r++){
        ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
        var displayStyle = 'none';
        for (var i=0 ; i < words.length; i++) {
            if (ele.toLowerCase().indexOf(words[i])!=-1){
                displayStyle = '';
            }else {
                displayStyle = 'none';
                break;
            }
        }
        rows[r] = displayStyle;
    }
    alert((time() - starttime)/1000 +" Sec");
    for(var k=0; k < rows.length; k++){
        table.rows[k].style.display = rows[k];
    }
}

2 个解决方案

#1

Sounds like the performance is somewhat reasonable, given the platform, but here are a few ideas:

在给定平台的情况下,听起来表现有些合理,但这里有一些想法:

1.) Don't calculate the length of your arrays during each for iteration (see https://developer.mozilla.org/en/A_re-introduction_to_JavaScript#Arrays )

1.)在迭代过程中不要计算数组的长度(参见https://developer.mozilla.org/en/A_re-introduction_to_JavaScript#Arrays)

2.) perform your toLowerCase() on the search string once at the beginning, not during each row checked

2.)在开始时对搜索字符串执行一次toLowerCase(),而不是在每行检查时执行

3.) the biggest hog is probably your use of innerHTML and replace(), but it's going to depend on the browser implementation, see if you can replace it with a more efficient method of getting the text from the cells you need to compare.

3.)最大的麻烦可能是你使用innerHTML和replace(),但它将取决于浏览器的实现,看看你是否可以用一种更有效的方法来取代它,从你需要比较的单元格中获取文本。

#2

Profile your JavaScript, using the Firebug profiler for instance. Then you can see which operations take the longest. Measuring is knowing.

例如,使用Firebug探查器来描述您的JavaScript。然后你可以看到哪些操作花费的时间最长。衡量就是知道。

#1