Шест 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 () ако вашият скрипт не се нуждае от никакви под-ресурси на страницата
Най- $ (документ) .ready () е еквивалентно на DOMContentLoaded (където DOMContentLoaded ) и $ (window) .load () да се натоварване. Първият се изстрелва, когато се зарежда собствена DOM страница, но не и външни активи като изображения и стилове. Вторият се изстрелва, когато всичко, на което е съставена дадена страница, включително собственото му съдържание и неговите подресурси се зареждат.
Така че, ако пишете скрипт, който разчита на под-ресурси на страница, като например промяна на цвета на фона на a Разделение който е оформен от външен стил, най-добре е да го използвате $ (window) .load ().
Но, ако това не е така, по-добре е да се придържаме $ (документ) .ready () защото, jQuery се обажда готов манипулатор на събития дали използвате $ (документ) .ready () или не, затова го използвайте, когато можете.
3. Използвайте отвързвам да премахнете елементи от DOM, които трябва да бъдат променени.
“Преформатирай” е термин, който се отнася до промените в оформлението в дадена уеб страница, когато браузърът пренарежда елементите на страницата, за да приспособи нов елемент, да се приспособи към структурни промени на даден елемент, да запълни празнината, оставена от премахнат елемент, или друго действие, което се нуждае от промяна на оформлението в страницата. reflow е скъп процес на браузър.
Можем да намалим не. на поправки, причинени от структурни промени в даден елемент, чрез извършване на промените върху него след да го извадите от потока на страницата и да го върне, когато свърши. Ако добавяте няколко редове към таблица един по един, това ще доведе до много повторни плащания. Така че е по-добре вземете таблицата от дървото DOM, добавете редовете към нея и я върнете в DOM; това ще намали връщанията.
JQuery е отделят () ни позволява да премахнем елемент от страницата, различен е от Премахване() защото ще запази данните, свързани с елемента, когато трябва да бъде добавен към страницата по-късно. След това отделен елемент може да бъде поставен обратно в страницата, когато е била променена.
4. Използвайте CSS () за да зададете височина или ширина вместо височина () и ширина ()
Ако задавате височина или ширина на елемент в jQuery, предлагам да използвате CSS () функция, защото използва тези стойности височина () и ширина () ще предизвика допълнителни поправки поради достъпа до някои свойства на оформлението във функцията computeStyleTests в jQuery (тестван в последната версия.).
За кода p.height ( "300px"); тук са преформатираните.
За p.css ("height": "300px");
computeStyleTests се използва за някои тестове за поддръжка. Нарича се още докато получаване на височината и ширината и двете CSS () и височина ширина() , но за обстановка това е само изискване височина ширина() което може да не е необходимо, така че използвайте CSS () вместо.
5. Не постъпвайте ненужно в свойствата на оформлението
Достъпът до свойствата на оформлението, като височина, ширина, поле и т.н., ще предизвика преформатиране на страницата. Причината е, когато поискате от браузъра за някой от свойствата на оформлението, той гарантира, че получавате актуализираната стойност (ако стойността е била анулирана преди) от преизчисляване на стойностите и прилагане на промени в оформлението.
Така че независимо дали използвате jQuery или ванилия JavaScript, внимавайте за ненужно достъп до свойствата на оформлението особено в цикъл или съответно след смяна на стила.
6. Използвайте кеширането там, където можете
Някои от функциите на jQuery идват с механизми за кеширане, които могат да бъдат използвани добре. Ajax исканията кешират ресурсите, но не са налични за тях писменост и JSONP, така че ако искате кеширане във всичките ви аякс заявки, може да искате настройте глобално както по-долу.
Също така имайте предвид, че ако ползвате ресурси пост той няма да бъде кеширан дори ако активирате кеширането с горната настройка.
Както споменах преди, отделят () кешира данните, свързани с елемента, който трябва да бъде премахнат, за разлика от Премахване();Крия() кешира първоначалната CSS показ стойността на даден елемент, преди да го скриете, така че да може да се възстанови по-късно, без да се загубят данните.
заключение
Един от начините можете да бъдете сигурен, че използвате най-ефективния jQuery код за вашата нужда е да изчакате, докато реално изпълните кода си и сте забелязали, че има проблем с производителността или не. Ако има, използвайте инструментите за ефективност и дебъгер за открие корена на проблема.
Тъй като jQuery е като пашкул за JavaScript с допълнителни функции за съвместимост с браузъра и функции, може да е трудно да се диагностицират проблемите без тези инструменти.
