10 ЈаваСцрипт савета и трикова за оптимизацију перформанси

ЈаваСцрипт је од виталног значаја за развој веба. Језик је иза већине интерактивности и анимације које ћете видети на веб локацијама. Али ЈаваСцрипт такође може проузроковати успоравање веб локације ако је код лоше написан. Неефикасност може резултирати и лошим временом учитавања и спором брзином рендеровања.

Усвојите следеће праксе да бисте побољшали брзину и перформансе своје веб локације.

1. Дефинишите варијабле локално

Као програмер, морате знати како функционише опсег. Постоје две врсте променљивих у ЈаваСцрипт-у: локалне променљиве и глобалне променљиве.

Локалне променљиве су променљиве декларисане унутар функционалног блока. Опсег остаје само унутар функције у којој су декларисани. Глобалне променљиве су променљиве доступне у целој скрипти. У случају глобалних променљивих, опсег остаје у целом програму.

Кад год покушате да приступите променљивој, претраживач ради нешто познато као претраживање опсега. Проверава најближи опсег за променљиву и наставља да тражи све док не пронађе променљиву. Дакле, што више ланца опсега имате у свом програму, дуже ће бити потребно да приступите променљивим изван тренутног опсега.

Из тог разлога, најбоље је да увек дефинишете своје варијабле ближе контексту извршавања. Користите глобалне варијабле само у ретким приликама; када желите да сачувате податке који се користе у целој скрипти, на пример. Ово ће смањити број опсега у вашем програму и тиме побољшати перформансе.

2. Учитајте ЈаваСцрипт асинхроно

ЈаваСцрипт је једнонитни програмски језик. То значи да када се функција једном изврши, мора да ради до краја пре него што друга функција може да се покрене. Ова архитектура може довести до ситуација у којима код може блокирати нит и замрзнути апликацију.

Да би нит радила добро, требало би да асинхроно покренете одређене задатке који губе време. Када задатак ради асинхроно, он не заузима сву процесорску снагу нити. Уместо тога, функција се придружује реду догађаја где се покреће након извршења свих осталих кодова.

АПИ позиви су савршени за асинхрони образац јер им је потребно време да се реше. Дакле, уместо да задржава нит, користили бисте библиотеку засновану на обећањима као што је АПИ за дохват за асинхроно преузимање података. На тај начин, други код може да ради док прегледач преузима податке из АПИ-ја.

Схватите замршености асинхроног програмирања и побољшаћете перформансе ваше апликације.

3. Избегавајте непотребне петље

Коришћење петљи у ЈаваСцрипт-у може бити скупо ако нисте пажљиви. Бициклирање кроз колекцију ставки може довести до великог оптерећења претраживача.

Иако дефинитивно не можете да избегнете петље у свом коду, морате да радите што је мање могуће у њима. Можете користити друге технике које избегавају потребу да се крећете кроз колекцију.

На пример, можете да ускладиштите дужину низа у другу променљиву, уместо да је читате током сваке итерације петље. Ако добијете оно што желите од петље, одмах искочите из ње.

4. Умањите ЈаваСцрипт код

Минификација је ефикасан метод за оптимизацију ЈаваСцрипт кода. Минимизатор трансформише ваш сирови изворни код у мању производну датотеку. Они уклањају коментаре, скраћују непотребну синтаксу и скраћују дуга имена променљивих. Такође уклањају неискоришћени код и оптимизују постојеће функције да заузму мање редова.

Примери минимизатора су Гоогле Цлосуре Цомпилер, УглифиЈС и Мицрософт АЈАКС минифиер. Такође можете ручно да умањите свој код тако што ћете га прегледати и тражити начине да га оптимизујете. На пример, можете поједноставите иф наредбе у вашем коду.

5. Компримујте велике датотеке помоћу Гзип-а

Већина клијената користите Гзип за компримовање и декомпресију велике ЈаваСцрипт датотеке. Када претраживач затражи ресурс, сервер може да га компримује да би вратио мању датотеку у одговору. Када клијент прими датотеку, декомпресује је. Све у свему, овај приступ штеди пропусни опсег и смањује кашњење, побољшавајући перформансе апликације.

6. Минимизирајте ДОМ приступ

Приступ ДОМ-у може утицати на перформансе ваше апликације јер прегледач мора да се освежава са сваким ажурирањем ДОМ-а. Најбоље је ограничити приступ ДОМ-у на најмању могућу фреквенцију. Један од начина на који то можете да урадите је чување референци на објекте претраживача.

Такође можете користити библиотеку као што је Реацт која прави промене у виртуелном ДОМ-у пре него што их гурне у прави ДОМ. Као резултат тога, претраживач ажурира делове апликације које треба ажурирати, уместо да освежава целу страницу.

7. Одложите непотребно оптерећење ЈаваСцрипт-а

Иако је битно да се ваша страница учитава на време, не морају све функције да раде при почетном учитавању. Претпоставимо да имате дугме на које се може кликнути и мени картица који упућују на ЈаваСцрипт код; можете одложити оба док се страница не учита.

Овај метод ослобађа процесорску снагу, омогућавајући вам да на време прикажете неопходне елементе странице. Одлажете компајлирање кода који може задржати почетни приказ странице. Затим, када се страница заврши учитавањем, можете почети да учитавате функционалности. На тај начин, корисник може уживати у брзом времену учитавања и почети интеракцију са елементима на време.

Такође можете да укључите најмању количину ЦСС-а и ЈаваСцрипт-а у елемент главе, тако да се одмах учитава. Секундарни код тада може да живи у засебним .цсс и .јс датотекама. Ова техника захтева пристојно познавање како функционише ДОМ.

8. Користите ЦДН да бисте учитали ЈаваСцрипт

Коришћење мреже за испоруку садржаја помаже да се убрза време учитавања странице, али није увек ефикасно. На пример, ако изаберете ЦДН без локалног сервера у земљи посетиоца, они неће имати користи.

Да бисте решили овај проблем, можете користити алате да упоредите неколико ЦДН-ова и одлучите који нуди најбоље перформансе за ваш случај употребе. Да бисте сазнали који је ЦДН најбољи за вашу библиотеку, погледајте цдњс веб сајт.

9. Уклоните цурење меморије

Цурење меморије може негативно утицати на перформансе апликације. До цурења долази када учитана страница заузима све више меморије.

Пример цурења меморије је када ваш претраживач почне да успорава након дуге сесије рада са апликацијом.

Можете да користите Цхроме алатке за програмере да бисте открили цурење меморије у апликацији. Алат бележи временску линију на картици перформанси. Многа цурења меморије настају као резултат уклањања ДОМ елемената. Сакупљач смећа ће ослободити меморију тек када све варијабле које упућују на ове елементе изађу ван опсега.

Алатке као што су Лигхтхоусе, Гоогле ПагеСпеед Инсигхтс и Цхроме могу вам помоћи да откријете проблеме. Лигхтхоусе проверава доступност, перформансе и проблеме са СЕО-ом. Гоогле ПагеСпеед вам може помоћи да оптимизујете ЈаваСцрипт да бисте побољшали перформансе ваше апликације.

Цхроме прегледач пружа функцију алатки за програмере коју можете укључити кликом на Ф12 на кључној речи. Можете користити његову анализу перформанси да укључите и искључите мрежу и проверите потрошњу процесора. Такође проверава друге метрике да би открио проблеме који утичу на вашу веб локацију.

Као веб програмер, много ћете радити у свом веб претраживачу. Већина прегледача долази са пакетом алата за програмере који ће вам помоћи у решавању проблема са веб локацијама. Функција Гоогле Цхромес Девелопер Тоолс има много функција које ће вам помоћи.