Раціональне використання jQuery

Про те, як правильно використовувати jQuery

А тепер про те, що незрозуміло. Візьмемо невелику ділянку розмітки на якій і наводитимемо приклади.

1. Елемент краще і швидше шукати за його атрибутом id, тому що використовується метод DOM getElementById. Якщо елемент не має id, то потрібно вказувати найближчий до нього елемент з id:

2. Використовувати ім'я тега перед назвою класу:

У цьому випадку використовується метод DOM getElementsByTagName і серед вибраних елементів шукається той, у якого є клас on. Найпопулярніша вибірка елементів за назвою класу – одна з найповільніших у jQuery.

3. Ніколи не ставте ім'я тега перед id:

У цьому випадку спочатку будуть вибрані всі елементи з тегом 'div', а потім серед них буде знайдений елемент з потрібним id.

4. Кешуйте об'єкти jQuery. Наприклад, ви використовуєте об'єкт більше одного разу, замість того, щоб кілька разів шукати по елементу:

збережіть його в локальну змінну:

Примітка: найчастіше '$' перед ім'ям змінної ставлять, щоб показати, що в ній зберігається об'єкт jQuery.

5. Вибудовуйте ланцюжки. Більшість методів jQuery повертають після виконання об'єкт jQuery, це дозволить скоротити розмір коду:

6. Використовуйте підзапити. Це скоротить час пошуку об'єкта, оскільки наступні вибірки відбуватимуться зі збереженого об'єкта.

7. Мінімізуйте роботу з DOM-деревом. Будь-які маніпуляції (видалення, переміщення та вставка нових елементів) з DOM досить повільні, тому замість того, щоб вставляти кожен елемент у DOM:

8. $(window).load. Найчастіше виконання скрипту прив'язують до події $(document).ready(). Подія відбувається у той час, коли об'єкти все ще завантажуються. Іноді можна спостерігати, що сторінкапідвисає під час завантаження. Причиною цього можуть бути функції, які прив'язані до $(document).ready(). Щоб уникнути цього, можна частину функцій прив'язати до події $(window).load(), яка відбувається вже після того, як весь вміст сторінки (включаючи iframe) вже завантажено.

9. Прив'язуйте до сторінки лише скрипти, що відносяться до неї. Зазвичай, все складається в один великий скрипт, який вставляється на всі сторінки сайту і виконується на подію $(document).ready(). Але навіть якщо функція не працює на даній конкретній сторінці, все одно витрачається час на пошук елементів, до яких прив'язана ця функція. Скрипт можна розділити на кілька частин або зробити його так:

а на сторінці, де ми хочемо використовувати функції, що відносяться, наприклад, до article вставити:

---