jQuery排序导致iOS Safari冻结 [英] jQuery sort causing iOS Safari to freeze

问题描述

我有一个页面正在使用jQuery加载XML文件，然后将其内容输出到该页面.

I have a page that is using jQuery to load an XML file, which I'm then outputting the contents of to the page.

最近我在输出中添加了排序功能，这导致iPod Touch上的Safari在Safari上挂1分钟或2分钟以上(取决于我排序的字段数)，而在iPad上挂1分钟以下.在Firefox 4.0.1上，几秒钟内就会返回相同的排序.

Recently I added a sorting function to the output which is causing a 1+ or 2+ minute hang on Safari on an iPod Touch (depending upon how many fields I sort by) and a less than 1 minute hang on an iPad. The same sort returns within a few seconds on Firefox 4.0.1.

恐怕这只是iOS的局限性，但是在我取消排序之前，也许可以进行优化.

I'm afraid it's just a limitation of the iOS, but before I removed the sort, perhaps there's an optimization that could be made.

在过滤器之前，XML中有357个项目.筛选器后面有199个项目经过排序.

Before the filter there's 357 items in the XML. After the filter there's 199 items that are sorted through.

var videoGames = $($.parseXML(videoGameXml)).find("game");
videoGames = videoGames.filter(function (a) {
    return ($(this).attr('addOn') != "true" && $(this).find('own').text() == "yes");
});
videoGames.sort(function (a, b) {
    var firstTitle = $(a).find('title').text().toLowerCase();
    var secondTitle = $(b).find('title').text().toLowerCase();
    var firstSystem = ($(a).find("console").text() + " " + $(a).find("version").text()).toLowerCase();
    var secondSystem = ($(b).find("console").text() + " " + $(b).find("version").text()).toLowerCase();

    if (firstSystem != secondSystem) {
        if (firstSystem > secondSystem) {
            return 1;
        } else {
            return -1;
        }
    } else {
        if (firstTitle > secondTitle) {
            return 1;
        } else if (secondTitle < firstTitle) {
            return -1;
        }
    }
    return 0;
});
videoGames.each(function () {
    // runs quickly, so removed
});

请注意，如果我取消系统检查，将其作为初始优化"，可以将iPod Touch上的时间减少一半左右，但仍会导致上述1分钟以上的挂起.

Note that if I remove the system check as an initial 'optimization' that cuts the time about in half on the iPod Touch, but still results in the 1+ minute hang mentioned above.

那么，这是iOS设备的限制，还是我可以优化我的排序方式?

So, is it an iOS device limitation, or can I optimize my sort?

推荐答案

每次执行$(a)都会执行一组非常复杂的操作，因此最好对其进行缓存.另外，如果系统不同，则不需要标题.这个版本应该可以加快速度:

Every time you do $(a) it will perform a very complex set of operations, so you better cache it. Also, you don't need the Title if System is different. This version should speed it up a bit:

videoGames.sort(function (a, b) {
    var first = $(a);
    var second = $(b);
    var firstSystem = (first.find("console").text() + " " + first.find("version").text()).toLowerCase();
    var secondSystem = (second.find("console").text() + " " + second.find("version").text()).toLowerCase();

    if (firstSystem != secondSystem) {
        if (firstSystem > secondSystem) {
            return 1;
        } else {
            return -1;
        }
    } else {
        var firstTitle = first.find('title').text().toLowerCase();
        var secondTitle = second.find('title').text().toLowerCase();

        if (firstTitle > secondTitle) {
            return 1;
        } else if (secondTitle < firstTitle) {
            return -1;
        }
    }
    return 0;
});

您还可以将值缓存在对象中

You could also cache the values in the object

然后，而不是:

var firstSystem = (first.find("console").text() + " " + first.find("version").text()).toLowerCase();

做:

var firstSystem = first.data('system');
if (!firstSystem) {
    firstSystem = (first.find("console").text() + " " + first.find("version").text()).toLowerCase();
    first.data('system') = firstSystem;
}

这篇关于jQuery排序导致iOS Safari冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！