Problem

With trivial code

// Array а contains 15000 elements
a.sort(function(a, b){return b.item — a.item;})

IE needs 40(!) seconds to think (15000 was taken as a test, a real array is certainly less). (FireFox does the same in 422ms, approximately 100 times faster!) The realization of the sorting process on the server side would require changing of a large part of the code because the user selects a field and a method of sorting; this was a problem.

Solution

After short googling I found an excellent article by Russel Lindsay: “Faster Javascript sorting”. He uses a simple trick: to rewrite the method toString() for addressing to the object’s property directly, convert numbers ([1, 2, 10] into strings ['01','02','10']) and use sort() without parameters for increasing sorting speed. Below the results of the test (with my implementation of this idea):

Internet Explorer41516ms – sort(function(a, b){return b.item - a.item;})

7031ms - sort() for the array where numbers were converted into string

7047ms – sort() and reverse() for the array where numbers were converted into stringFireFox

438ms – sort(function(a, b){return b.item - a.item;})

891ms - sort() for the array where numbers were converted into string

954ms – sort() and reverse() for the array where numbers were converted into string

Thus the trick of adding numbers with zeros to strings gives a six times quicker sorting in Internet Explorer and twice slower sorting in FF which allows using the code in both browsers.

Russel Lindsay uses the fixed size mask and the array ([1, 2, 10] turns not into [01, 02, 10] but into ['00000000001',' 00000000002',' 00000000010']). This is awful for many reasons and memory used is one of them. So I wrote a small library based on his code. It adds to Array() following methods: Array.sortIntAsc(property) and Array.sortIntDesc(property) for sorting array by integer property, Array.sortAsc(property), and Array.sortDesc(property) for sorting by string property.

Example

[js] var team = [
{name:’Bill’, age:25},
{name:’John’, age:21},
{name:’Ann’, age:20}
];

alert([team[0].name,team[1].name,team[2].name]);
// Bill, John, Ann

team.sortIntAsc(’age’);
alert([team[0].name,team[1].name,team[2].name]);
// Ann, John, Bill

team.sortAsc(’name’);
alert([team[0].name,team[1].name,team[2].name]);
// Ann, Bill, John

[/js]

My 2 cents

This method is in my humble opinion a good solution of this particular problem (thank you, Russel!). Also it is a good illustration: the best way to do something with data in the Internet Explorer is not to do anything. I mean to organize the data processing flow in such a way as to leave the data processing (including any sorting) on the server side. Otherwise when IE will deal with trivial tasks terrible you will have to spend a lot of time to find a strange detour.

download library (zip)

Проблема

Тривиальное

// Object а содержит 15000 элементов
a.sort(function(a, b){return b.item – a.item;})

заставило IE задуматься на 40(!) секунд (15000 взято в качестве теста, реальный массив, конечно, меньше). (FireFox выполнял тот же за 422ms, примерно в 100 раз быстрее!) Реализация сортировки на стороне сервера потребовала бы изменить много кода, так как поле и направление сортировки выбирались пользователем произвольно; это была проблема.

Решение

После недолгих поисков я обнаружил отличную статью Russel Lindsay: “Faster Javascript sorting”. Он использует очень простую вещь: переписать метод toString() для обращения к свойству объекта, превратить числа в строки ([1, 2, 10] в [’01’,’02’,’10’]) и использовать sort() без параметров для ускорения поиска. Вот результаты тестов:

Internet Explorer
41516ms – sort(function(a, b){return b.item - a.item;})
7031ms - sort() для массива, где числа конвертированы в строки
7047ms – sort() и reverse() для массива, где числа конвертированы в строки

FireFox
438ms – sort(function(a, b){return b.item - a.item;})
891ms - sort() для массива, где числа конвертированы в строки
954ms – sort() и reverse() для массива, где числа конвертированы в строки

Таким образом, фокус с дополнением чисел нолями до строк дает выигрыш примерно в 6 раз при сортировке в Internet Explorer, и проигрыш всего вдвое при сортировке в FF, что позволяет использовать код в обоих браузерах.

Russel Lindsay использует маску фиксированного размера, то есть массив ([1, 2, 10] превращается не в [01, 02, 10], а в [’00000000001’,’ 00000000002’,’ 00000000010’]), это ужасно по многим причинам, и память – не последняя из них. Так что я написал маленькую библиотеку на основе его кода, она расширяет Array() методами Array.sortIntAsc(property) и Array.sortIntDesc(property) для сортировки по числовому полю property, и методами Array.sortAsc(property) и Array.sortDesc(property) для сортировки по строковому полю property.

Пример

[js] var team = [
{name:'Bill', age:25},
{name:'John', age:21},
{name:'Ann', age:20}
];

alert([team[0].name,team[1].name,team[2].name]);
// Bill, John, Ann

team.sortIntAsc(‘age’);
alert([team[0].name,team[1].name,team[2].name]);
// Ann, John, Bill

team.sortAsc(‘name’);
alert([team[0].name,team[1].name,team[2].name]);
// Ann, Bill, John

[/js]

Мои 5 копеек

Этот метод, мне кажется, неплохое решение конкретной проблемы. Но это так же прекрасная иллюстрация: лучший способ сделать что-то с данными в Internet Explorer – это не делать совсем, то есть организовать модель так, что бы вся обработка данных (включая сортировку) осталась на стороне сервера. Иначе потом, когда IE будет отвратительно справляться с очевидными задачами, придется потратить немало сил на обход проблемы.

скачать библиотеку