Поширені помилки 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, який використовується як заміна флеш. Якщо ви не впевнені в цьому, документуйте відповідь про сценарій дій: він дуже близький до JS.

Як вбивця виступу, ви можете знайти кілька поганих практик:

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

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

Найбільшою проблемою в продуктивності є використання абстракцій високого рівня (наприклад, jQuery) без розуміння основної моделі DOM та анімаційної моделі CSS3 (або полотна, або 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().