Шест јКуери најбољих пракси за побољшане перформансе

јКуери је једна од тхе најпопуларнијих ЈаваСцрипт библиотека данас. Његов АПИ је веома једноставан за употребу, што доводи до не тако стрме криве учења. Многи пројекти користе јКуери код уместо да директно користе ваниљи ЈаваСцрипт да би унели динамичке функционалности.

Али јКуери има и своје недостатке. То може довести до неких проблема са перформансама ако се користи безбрижно баш као и језик на којем се темељи. Овај пост ће навести неке од најбољих пракси у коришћењу јКуери који ће нам помоћи да избегнемо проблеме са перформансама.

1. Лази учитајте скрипте када је то потребно

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

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

$ .гетСцрипт ("сцриптс / галлери.јс", цаллбацк); 

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

$ .ајакСетуп (цацхе: труе); 

2. Избегавајте $ (прозор) .лоад () ако вашој скрипти нису потребни никакви под-ресурси странице

Тхе $ (доцумент) .реади () је еквивалентно са ДОМЦонтентЛоадед (где ДОМЦонтентЛоадед је доступно) и $ (прозор) .лоад () до Лоад. Први је испаљен када се учита страница ДОМ-а, али не и спољна средства као што су слике и стилови. Други је испаљен када је све што је страница сачињена, укључујући свој садржај и под-ресурсе учитане.

Дакле, ако пишете скрипту која се ослања на под-ресурсе странице, као што је промена боје позадине а див који је дизајниран од стране екстерног стилског листа, најбоље је користити $ (прозор) .лоад ().

Али, ако то није случај, боље је да се држите $ (доцумент) .реади () јер, јКуери позива своје реади руковалац догађаја да ли користите $ (доцумент) .реади () или не, зато га употребите када можете.

3. Користите одвојити да уклоните елементе из ДОМ-а које је требало променити.

“Рефлов” је израз који се односи на измјене изгледа на веб страници, то је када прегледник преуреди елементе странице како би се прилагодио новом елементу, прилагодио структурним промјенама елемента, попунио празнину коју је уклонио уклоњени елемент, или неку другу акцију која треба промена изгледа странице. рефлов је скупо процес прегледача.

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

јКуери'с одвојити() омогућава нам да уклонимо елемент са странице, разликује се од тога уклони () зато што ће сачувати податке који су повезани са елементом када ће се касније морати додати на страницу. Одвојени елемент се онда може вратити на страницу када је измењен.

4. Користите цсс () да бисте поставили висину или ширину уместо хеигхт () и видтх ()

Ако подешавате висину или ширину елемента у јКуери, предлажем да користите цсс () функција зато што се користе те вредности хеигхт () и видтх () ће узроковати додатна рефлов-а због приступа неким својствима распореда у функцији цомпутеСтилеТестс у јКуери (тестирано у најновијој вер.).

За код п.хеигхт ("300пк"); ево рефлова.

За п.цсс ("хеигхт": "300пк");

цомпутеСтилеТестс користи се за неке тестове подршке. Зове се и док добити користећи висину и ширину и једно и друго цсс () и висина Ширина() , али за подешавање то се само тражи висина Ширина() које можда нису потребне, зато користите цсс () уместо тога.

5. Не приступајте непотребно својствима изгледа

Приступ карактеристикама распореда, као што су висина, ширина, маргина, итд. Ће покренути рефлов на страници. Разлог је кад год питате претраживач за било која својства изгледа, то обезбеђује да добијете ажурирану вредност (у случају да је вредност раније била поништена) прерачунавање вредности и примена било каквих промена изгледа.

Дакле, да ли користите јКуери или ванилла ЈаваСцрипт, чувајте се непотребног приступа својствима изгледа посебно у петљи или последично након промене стила.

6. Користите кеширање где можете

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

Такође имајте на уму да ако користите ресурсе пошта неће бити кеширано чак и ако омогућите кеширање са горе наведеним подешавањима.

Као што сам већ споменуо, одвојити() кеше податке повезане са елементом који се жели уклонити за разлику од уклони ();сакрити() кешира почетни ЦСС приказ вредност елемента пре него што га сакријете, тако да се касније може вратити без губитка података.

Закључак

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

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