Распространенные ошибки Javascript, которые сильно влияют на производительность? [закрыто]

На недавнем UI / UX MeetUp, который я посетил, я дал несколько отзывов на веб-сайте, который использовал Javascript (jQuery) для взаимодействия и пользовательского интерфейса - это были довольно простые анимации и манипуляции, но производительность на приличном компьютере была ужасающей.

Это на самом деле напомнило мне множество сайтов / программ, которые я видел с той же проблемой, где определенные действия просто разрушают производительность. Это в основном (или, по крайней мере, более заметно в) ситуациях, когда Javascript почти служит заменой Flash. Это резко контрастирует с некоторыми веб-приложениями, которые я использовал, которые имеют гораздо больше Javascript и функциональности, но работают очень гладко (COGNOS от IBM - один из тех, что я могу придумать не по себе).

Я хотел бы знать некоторые распространенные проблемы, которые не учитываются при разработке JS и которые снижают производительность сайта.

Распространенный убийца производительности вызывает .lengthHTMLCollection внутри forцикла:

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

Этот анти-шаблон приводит к тому, что размер коллекции рассчитывается при каждом прохождении цикла. Лучшим подходом является вычисление длины вне цикла:

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

Нет, проблема не в том, что JS используется для замены флэш-памяти. Если вы не уверены в этом, документируйте свои действия в ActionScript: он очень близок к JS.

Как убийца производительности, вы можете найти несколько плохих практик:

• Прикрепите обработчик событий к непрерывному событию, такому как прокрутка, перемещение мыши или подобные вещи. Это имеет 2 недостатка: если событие не достаточно запущено, ваше приложение не будет реагировать. Если он срабатывает слишком много, вы будете иметь огромную нагрузку на процессор бесплатно.
• Выполнение синхронных вызовов AJAX. Javascript не является многопоточным, поэтому, когда часть JS чего-то ждет, ваше приложение зависает. Вам лучше использовать асинхронные вызовы AJAX и таким же образом использовать setTimeout / setInterval, чтобы разделить длительную фазу вычислений и сохранить реактивность вашего приложения.
• Высокая сложность алгоритма, как и в любых других языках.

Я дал несколько отзывов на веб-сайте, который использовал Javascript (jQuery) для его взаимодействия и пользовательского интерфейса - это были довольно простые анимации и манипуляции, но производительность на приличном компьютере была ужасной.

Одной из самых больших проблем с производительностью является использование абстракций высокого уровня (таких как jQuery) без понимания базовой модели DOM и модели анимации CSS3 (или canvas, или svg).

Если вы не знаете , как сделать это без абстракций , то у вас есть абсолютный ноль знание о том , что методы быстро или медленно.

Изучите JavaScript, изучите DOM. Как только вы знаете эти два и знаете, что ваши абстракции делают под капотом, вы можете использовать их эффективно. Конечно, большую часть времени вы понимаете, что абстракция заключается в замедлении и просто делаете это вручную без библиотеки.

Красота и недостаток Javascript в том, что он чрезвычайно гибкий. Это, как говорится, на самом деле позволяет вам делать вещи, которые вы, вероятно, не должны делать во многих случаях.

Из обзоров кода, частью которых я был, основные проблемы, как правило, связаны с рендерингом CSS. Для новых разработчиков JS мы склонны видеть слишком много переменных, используемых в глобальной области видимости.

Кроме того, неправильное закрытие может часто вызывать утечки памяти. Тем не менее, большинство современных сред Javascript предотвращают подобные проблемы, если ваш код следует структуре.

Вот быстрая ссылка, которую я нашел год или около того назад о написании лучшего кода jquery: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance /

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

Пример:

var table = $("#data").dataTable(.....);

DataTables - это плагин jQuery, который мы используем для создания хороших сеток. Как бы то ни было, в таблице было около 5 тыс. Строк, применяя плагин DataTables и затем сохраняя его в переменной таблицы, что фактически привело к тому, что FireFox и IE предупредили, что выполнение сценария занимает слишком много времени. Мораль истории, только кешируй данные, если нужно.

Из того, что я слышал, forциклы вычислительно быстрее, чем циклы jQuery $.each().