Оптимізація коду - як змусити сторінки схуднути - javascript - 35 - Game And Me
Завантажуйте сторонній вміст асинхронно
Хто ніколи не завантажував сторонній вміст (відео YouTube або кнопка твіту) ?
Велика проблема полягає в тому, що ці коди не завжди доставляються ефективно, або через вхід користувача, або через підключення сервера, де вони розміщені. Ця послуга також може бути тимчасово недоступною або навіть заблокована користувачем або брандмауером їх компанії.
Щоб запобігти тому, що це стане важливою проблемою під час завантаження сайту, заблокуйте завантаження всієї сторінки та завжди завантажуйте ці коди асинхронно (або використовуйте зручні iFrames).
Довжини таблиць
Однією з найважливіших речей щодо продуктивності з JavaScript є цикл. Спробуйте оптимізувати логіку всередині циклу, щоб кожна ітерація робилася ефективно.
Один із способів зробити це - зберегти розмір масиву, який буде охоплений, так що його не потрібно буде перераховувати щоразу, коли цикл повторюється.
> Примітка: Хоча сучасні браузерні механізми автоматично оптимізують цей процес, все ще існує хороша практика, заснована на існуючих браузерах, які зберігаються.
У колекціях у вигляді списку вузлів (NodeList), сформованих, наприклад, за допомогою document.getElementsByTagName ('a'), це особливо важливо. Ці колекції вважаються "живими", тобто вони автоматично оновлюються при внесенні змін до елемента, якому належить вузол.
Уникайте document.write
Використання document.write призводить до повного завантаження залежності від завантаження сторінки.
Цю (погану) практику розробники скасували роками, але все ще існують випадки, коли її використання все ще є необхідним, наприклад, у випадку синхронного повернення файлу JavaScript.
Наприклад, шаблонний шаблон HTML5 використовує цю техніку для локального завантаження jQuery, якщо CDN Google не відповідає.
> Увага: document.write, виконаний під час або після події window.onload, замінює весь вміст поточної сторінки.
Результатом останньої сторінки буде лише штрих, а не фобар, як очікувалося. Те ж саме відбувається відразу після події window.onload .
Результат збігається з попереднім прикладом, якщо функція, запрограмована setTimeout, виконується після події window.onload .
Мінімізуйте переналаштування дисплея
Переналаштування проводяться, коли відбувається процес рендерингу DOM при зміні певних властивостей або елементів.
Вони спрацьовують, коли зовнішній вигляд елемента змінюється без зміни його макета. Ніколь Салліван описує це як зміну стилів, таких як зміна кольору фону .
Ці переналаштування дуже дорогі, оскільки вони спричинені зміною макета, наприклад, коли ви змінюєте ширину елемента.
Немає сумнівів, що слід уникати перенастроювання, а не робити:
Таким чином, ви уникаєте маніпулювання DOM на кожній ітерації циклу, і зробите це лише один раз.
Згорніть свій сценарій
Як і CSS, для підтримки читабельного коду корисно писати коментарі та використовувати відступи:
Але для браузера нічого з цього насправді не має значення. З цієї причини не забувайте зменшувати javascript за допомогою автоматизованих інструментів.
Це зменшить розмір файлу, що призведе до швидшого завантаження, аналізу та часу виконання., .
Об'єднайте кілька файлів js в один
Ще однією вдалою практикою організації та оптимізації її виконання є поділ їх на модульні компоненти.
Однак для кожного з цих файлів потрібен HTTP-запит (і ми знаємо, що браузери можуть завантажувати обмежену кількість ресурсів паралельно).
Тож розгляньте можливість об’єднання вашого JS. Наявність меншої кількості файлів призведе до меншої кількості запитів та швидшого завантаження сторінки.
Хочете мати найкраще з обох світів? Автоматизуйте цей процес за допомогою інструмента побудови.
Завжди використовуйте останню версію jquery
Команда jQuery завжди шукає вдосконалення своєї бібліотеки за рахунок кращої читабельності коду, нових функцій та оптимізації існуючих алгоритмів.
Селектори
Одне з найважливіших питань використання jQuery - це селектори. Є багато різних способів вибрати елемент із DOM, але це не означає, що вони мають однакову продуктивність, ви можете вибрати елемент за допомогою класів, ідентифікаторів або методів, таких як find (), children () .
З усіх них вибір ідентифікатора є найшвидшим, оскільки він покладається на власну роботу DOM:
Скористайтеся перевагами методів ланцюгів
Прив’язка ланцюгів означає, що ви можете запускати один метод jQuery один за одним, не потребуючи повторного вказівки селектора. Майже всі методи jQuery дозволяють ланцюжок, повертаючи об'єкт jQuery.
Тести показують, що не використовувати ланцюжок повільніше.
Використовуйте замість кожного
Використання власних функцій JavaScript майже завжди призводить до швидшого виконання, ніж функції jQuery. З цієї причини, замість використання методу jQuery.each, використовуйте JavaScript та його цикли for. .
Але будьте обережні, навіть якщо in є рідною, у багатьох випадках обробка гірша, ніж jQuery.each .
А використання циклу for дає нам ще одну можливість пришвидшити процес, кешуючи довжину колекцій після завершення ітерацій.
Використання циклу while та циклу for є гарячою темою у спільноті, і його часто цитують як найшвидший, ніж повторюваний. Однак іноді потрібно уникати, щоб мати більш читабельний код.
Не використовуйте jquery ...
Хіба що це вкрай необхідно. 🙂
Іноді власний JavaScript може бути навіть простішим, ніж jQuery. Навіщо використовувати метод attr () для пошуку ідентифікатора?
Ви можете отримати цей атрибут спочатку:
І це швидше.
Щоб прочитати більше, натисніть на стрілку нижче.