Шість JQuery кращих практик для поліпшення продуктивності
jQuery є одним з найбільш популярні бібліотеки JavaScript сьогодні. Його API дуже простий у використанні, що призводить до не настільки крутої кривої навчання. Багато проектів використовують код jQuery замість безпосереднього використання ванільного JavaScript для введення динамічних функцій.
Але jQuery теж має свої недоліки. Це може призвести до деяких проблем із продуктивністю, якщо їх використовувати недбало так само, як і мова, на якій вона базується. У цій публікації буде вказано деякі з найкращих практик використання jQuery, які допоможуть нам уникнути проблем із продуктивністю.
1. За необхідності, зайві сценарії завантаження
Браузери запускають JavaScript перед створенням дерева DOM і малюють пікселі на екрані, оскільки скрипти можуть додавати нові елементи до сторінки або змінювати макет або стиль деяких вузлів DOM. Отже, мимо надає браузеру менше скриптів для виконання під час завантаження сторінки, ми можемо скоротити час для остаточного створення і малювання дерева DOM, після чого користувач буде побачити сторінку.
Один із способів зробити це в jQuery - це використання $ .getScript завантажувати будь-який файл сценарію під час його потреби, а не під час завантаження сторінки.
$ .getScript ("scripts / gallery.js", зворотний виклик); Це ajax функція, яка отримає єдиний файл сценарію, якщо ви цього хочете, але зауважте, що витягнутий файл не кешується. Щоб увімкнути кешування для getScript Ви повинні ввімкнути те ж саме для всіх запитів ajax. Ви можете зробити це, використовуючи код нижче:
$ .ajaxSetup (cache: true);
2. Уникайте $ (window) .load () якщо скрипт не потребує жодних під-ресурсів сторінки
The $ (document) .ready () еквівалентно DOMContentLoaded (де DOMContentLoaded є) і $ (window) .load () до Завантаження. Перший запускається, коли завантажується власний DOM сторінки, але не зовнішні активи, такі як зображення та таблиці стилів. Другий запускається, коли все, з чого складається сторінка, включаючи його власний вміст та його підресурси, завантажуються.
Отже, якщо ви пишете сценарій, який спирається на підресурси сторінки, наприклад, змінюючи колір фону a div це стиль зовнішньої таблиці стилів, краще використовувати $ (window) .load ().
Але, якщо це не так, краще дотримуватися $ (document) .ready () тому що jQuery називає його готовий обробник подій, який ви використовуєте $ (document) .ready () чи ні, тому використовуйте його, коли можете.
3. Використовуйте від'єднати щоб видалити елементи з DOM, які потрібно змінити.
“Reflow” це термін, який посилається на зміни макета на веб-сторінці, коли браузер переставляє елементи сторінки для розміщення нового елемента, пристосовується до структурних змін елемента, заповнює пробіл, що залишився вилученим елементом, або інші дії, які потребують зміна макета на сторінці. reflow є дорого процес браузера.
Ми можемо зменшити ні. зміни, що відбуваються внаслідок структурних змін елемента шляхом виконання змін на ньому після витягування з потоку сторінки і повертаючи, коли це зроблено. Якщо ви додаєте декілька рядків до таблиці один за одним, це призведе до великої кількості переплат. Так що краще візьміть таблицю з дерева DOM, додайте до неї рядки і поверніть її до DOM; це призведе до зменшення переплат.
jQuery's detach () дозволяє видалити елемент зі сторінки, він відрізняється від видалити () тому що він буде зберігати дані, пов'язані з елементом, коли потрібно буде додати його на сторінку пізніше. Після цього окремий елемент може бути повернуто назад на сторінку, коли вона була змінена.
4. Використовуйте css () для встановлення висоти або ширини замість висота () і width ()
Якщо ви встановлюєте висоту або ширину елемента в jQuery, я пропоную вам використовувати css () функції, тому що використовуйте ці значення висота () і width () призведе до додаткових перезавантажень через доступ до деяких властивостей макета у функції computeStyleTests у jQuery (перевірено в останній версії).
Для коду p.height ("300px"); ось перепланування.
Для p.css ("height": "300px");
computeStyleTests використовується для виконання деяких тестів підтримки. Його також називають отримання висоту та ширину обидва css () і висота ширина() , Крім налаштування це тільки вимагається висота ширина() які можуть бути не потрібні, тому використовуйте css () замість цього.
5. Не звертайтесь до властивостей макета без необхідності
Доступ до властивостей макета, таких як висота, ширина, маржа і т.д., призведе до перекомпонування на сторінці. Причина, коли ви запитуєте браузер про будь-які властивості макета, це гарантує отримання оновленого значення (у випадку, якщо раніше значення було визнано недійсним) перерахунок значень і застосування будь-яких змін у макеті.
Отже, чи використовуєте ви jQuery або ванільний JavaScript, остерігайтеся зайвого доступу до властивостей макета особливо в циклі або, відповідно, після зміни стилю.
6. Використовуйте кешування, де ви можете
Деякі функції jQuery поставляються з механізмами кешування, які можуть бути використані. Запити Ajax виконують кешування ресурсів, але не доступні сценарій і jsonp, тому, якщо ви хочете кешувати всі ваші запити ajax, ви можете захотіти встановити його глобально як нижче.
Також зверніть увагу, що якщо ви вибираєте ресурси за допомогою повідомлення він не буде кешований, навіть якщо ввімкнути кешування за допомогою вказаної вище установки.
Як я вже згадував раніше, detach () кешує дані, пов'язані з елементом, який буде видалено на відміну від видалити ();приховати () кешує початковий CSS відображення значення елемента перед тим, як приховати його, щоб його можна було відновити пізніше без втрати даних.
Висновок
Одним із способів, яким ви можете бути впевнені, що ви використовуєте найбільш ефективний код jQuery для вашої необхідності, це почекати, поки ви насправді запустити код і помітили, чи є якісь проблеми з продуктивністю чи ні. Якщо є, скористайтеся інструментами ефективності та відладчика для виявити корінь проблеми.
Оскільки jQuery схожий на кокон для JavaScript з додатковими функціональними можливостями для сумісності та функцій браузера, діагностувати проблеми без цих інструментів може бути важко.
