Про оптимизацию javascript кода (часть 2)
Первая часть с выводами.
Как говорилось в первой части, большого смысла в оптимизации повседневного кода нет. Разумеется, я не призываю писать заведомо неудачные решения. Но и особо изгалаться тоже нет смысла. В подтверждение этому привожу историю оптимизации. Сразу оговорюсь, что можно было бы, например, генерировать новую таблицу,
Задача:
случайным образом перемешать ряды в таблице. Генерировать новую таблицу нельзя, необходимо использовать существующие узлы.
Возможные оптимизации
- Избегать использований liveCollection. А точнее: превращение liveCollection в массив. Гипотеза заключается в том, что так как liveCollection должна обновляться вместе с обновлением DOM, это приведет к дополнительным штрафам скорости. Разумеется, браузеры могут оптимизировать работу с liveCollection, но об этом еще предстоит узнать.
- Свести к минимуму обращения к DOM-у, как удаление, так и добавление узлов. Применение documentFragment и временное удаление узла из DOM-а.
- Использование documentFragment, как буфера для временного хранения отсортированных случайным образом рядов.
- Удаление на время из DOM-а, элемента, который содержит в себе перемешиваемы ряды. Теоретически должно произойти уменьшение количества обращений к DOM при удалении ряда.
Из этих вариантов я составил варианты их комбинаций и написал тесты на jspref.com и прогнал через имеющиеся браузеры. Ниже находится интерпретация полученных данных.
- Самое главное: нет подхода, который был бы самым быстрым для каждого браузера. Из этого следует следующее:
- Оптимизируя код, не зная как он будет в последствии работать, можно сделать оптимальную версию для одного браузера, и неоптимальную для другого.
- Изменение кода до неузнаваемости может не дать выигрыша в производительности
- Все браузеры медленно работают с liveCollection. Для выигрыша в производительности надо преобразовывать liveCollection в массив.
- Хрому и сафари не имеет значения, используется ли documentFragment и удаляется ли нод временно из DOM-а. Это говорит про оптимизированность методов, которые он применяет к обработке дома. Налицо несомненный плюс для пользователей, но с другой стороны есть эффект поощрения излишних DOM манипуляций со стороны непонимающих программистов (особенно, если они разрабатывают в хроме и не проверяют параллельно в других браузерах). Хотя это их проблемы.
- documentFragment играет важную роль в ускорении работы с DOM в ие.
- В фаерфоксе не оптимизирована работа с удаляемыми нодами. Временное удаление контейнера, содержащий удаляемыми строки, дает почти двукратное ускорение.
Итого
При работе с DOM-ом имеет смысл поменьше использовать liveCollection и побольше documentFragment. Остальные оптимизации будут давать неоднозначные результаты.