Оптимизация Javascript, с чего начать?

Question

Я недавно начал работу в новой компании, и у них есть существующее приложение с 1000-ю строками кода Javascript. Базовый уровень содержит десятки JS-файлов с легкостью более 10 000 пользовательских строк кода, они также используют несколько сторонних библиотек, таких как JQuery, Livequery, JQTransform и другие. Одной из основных жалоб, которые они получали от пользователей, является медленность работы на стороне клиента на сайте. Мне поручено оптимизировать и улучшить производительность JS. Первым моим шагом будет, очевидно, переход к новейшей библиотеке JQuery и включение JSMin в процесс сборки. Помимо этого, мне интересно, есть ли у кого-нибудь советы о том, с чего начать оптимизацию на такой огромной базе кода?

Answer 1

Вы можете попробовать установить DynaTrace Ajax Edition (free download here) и посмотреть, что вы скажете. Он поддерживает только IE8, я думаю, но это, вероятно, хорошее место для начала, как и все. На мой взгляд, у него гораздо более тщательный и понятный интерфейс профилировщика, чем у Firebug или Chrome.

Одна вещь, которая выпрыгивает на меня, - это «Livequery», которая, если не используется очень, может привести к гигантским проблемам с производительностью.

Помните: в кодовой базе, которая большая, развитая в течение долгого времени и, возможно, не самая современная технология Javascript, ваши настоящие проблемы будут неправильными алгоритмами в вашем собственном коде. Новые библиотеки и методы минимизации/оптимизации - хорошие идеи, но первое, что вам нужно сделать, - найти страницы, которые кажутся вялыми, а затем начать профилирование. По моему опыту, в большой старой кодовой базе, вы найдете что-то ужасное действительно быстро. Установите настольный гаджет, который отслеживает использование ЦП. Это отличный способ увидеть, когда код страницы заставляет браузер замедляться напрямую, а не только сетевое отставание. Любой большой всплеск использования процессора браузера в течение значительного времени должен быть большим красным флагом.

Answer 2

Профиль этого кода. Не оптимизируйте что-то, если вы просто «почувствуете», что его можно оптимизировать. Помните правило 80% 20%. 80% времени тратится на 20% кода.

Используйте Google Closure tools. Они могут оптимизировать и сократить ваш JS-код, который, по крайней мере, заставит его быстрее загружать компьютеры вашего клиента.

Answer 3

Путь к найти узкие места. Если вы находите фактическое местоположение, где приложение работает медленно, вы можете использовать Firebug, чтобы прокомментировать ваш код и рассказать, сколько потрачено на каждую функцию и сколько раз они были вызваны. Из этой информации довольно легко определить, какие области нуждаются в улучшении.

Обычно узкие места в WebApplication являются:

• Работа с DOM экстенсивно (перерисовки, перекомпоновке)
• Тяжелая сеть связи (AJAX)

Answer 4

У вас есть долгий путь впереди вы спариваетесь, и я не завидую вам.

Вот некоторые Performance Optimization Techniques for Javascript, которые я записал после работы в той же роли, что и ваша.

Они разбиты на 5 широких категорий в порядке их разницы в производительности.

Однако, учитывая то, что вы сказали о кодовом, я думаю, что второй раздел Управления и активно сокращая зависимости является наиболее актуальной, в частности:

1. Модификация коды для уменьшения библиотечных зависимостей и
2. Использование менеджера пост-нагрузки зависимостей для библиотек и модулей

Однако все 25 методы перечислены они полезны для повышения производительности.

Я надеюсь, что вы найдете их полезными.