jQuery排序导致iOS Safari冻结

我有一个页面使用jQuery加载XML文件，然后我将页面的内容输出。

最近我在输出中添加了一个排序function，这会导致iPod Touch上的Safari挂起1分钟或2分钟（取决于我排序的字段数量）以及iPad上不到1分钟的挂起。 在Firefox 4.0.1上，相同的排序会在几秒钟内返回。

我担心它只是iOS的限制，但在我删除排序之前，也许可以进行优化。

在filter之前，XML中有357个项目。 在filter之后，有199个项目经过排序。

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分钟以上的挂起。

那么，它是iOS设备限制，还是我可以优化我的排序？

Answer 1

每次执行$（a）时，它都会执行一组非常复杂的操作，因此您最好对其进行缓存。 此外，如果系统不同，您不需要标题。 这个版本应该加快一点：

 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; }); 

您还可以缓存对象中的值

然后，而不是：

 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; } 

Answer 2

您应该移动任何选择器调用，如下所示：

 var firstTitle = $(a).find('title').text().toLowerCase(); 

从比较器function中输出。 比较器function应该是轻量级的。

要么使用children() ， next()等，要么扫描你设置一次并预先创建一个键数组，然后使用这些键对它进行排序。

比较器函数将被称为2n * ln(n)次（取决于所使用的算法），其中n是一组中的元素数。 因此，您的代码至少会执行两次相同的昂贵计算。