CSS-ն ընդդեմ JS անիմացիայի. Ո՞րն է ավելի արագ | WEBSTART TEAM

24/05/2022 Կայքի ստեղծում
CSS vs JavaScript անիմացիայիnbsp| WEBSTART



Այս նյութում Webstart-ի frontend ծրագրավորող Քրիստինեի հետ կխոսենք պարզ՝ բարդ թվացող պրոցեսների մասին։

Ծրագրավորման համաշխարհային թրենդներից արդեն որերորդ տարին է դուրս չեն գալիս անիմացիաները։ Անիմացիան արվում է ոչ միայն կայքին կրեատիվ տեսք հաղորդելու համար, այն նաև հաճախ կրում է ֆունկցիոնալ նշանակություն։ Օրինակ, եթե հարկավոր է ընդգծել կամ օգտատիրոջ ուշադրությունը հրավիրել ինչ-որ հրամանի, կոճակի կամ նախադասության վրա՝ այդ դեպքում ևս օգնության են գալիս անիմացիաները։

Մի փոքր սփոյլեր սկզբում։ Քրստինեն նշում է, որ JS-ի հնարավորություններն ավելի մեծ են. ընդունված է համարել, որ այն ավելի արագ է, սակայն դա միանշանակ չէ։ JavaScript-ը լեզու է և լոգիկա է պահանջում։

Եվ ուրեմն, նշված պրոցեսները լավ պատկերացնելու համար նախ պատասխանենք մի կարևոր հարցի։



Ինչպե՞ս են ստեղծվում անիմացիաները JS-ի օգնությամբ

Մի քիչ ծրագրավորման բառապաշար օգտագործենք, սկսնակներին այս տեղեկությունը հաստատ պետք կգա 🙂

Որպեսզի ստացվի անիմացիա, պետք է տվյալ կոնտեյներ էլեմենտը ստեղծված լինի հետևյալ կերպ՝ style = “position: relative”։ Իսկ այն տարրը, որին անիմացիա պետք է հաղորդվի, այսպես՝ style = “position: absolute”։

Իսկ այժմ անդրադառնանք մեր գլխավոր խնդրին։



JS և CSS անիմացիաների տարբերությունները

Քրիստինեն պնդում է, որ կան փոքրիկ անիմացիաներ, որոնք JS-ով ստեղծելն անիմաստ է, չնայած որ հնարավոր է, քանի որ CSS-ով այն ավելի արագ է ստացվում։



Ահա մի քանի օրինակ՝


  • JS-ով կոճակի վրա քլիք ես անում ու պատասխանի համար ժամանակ կարող ես դնել, օրինակ՝ հինգ րոպեից արձագանքի։ Իսկ CSS-ի վրա դա, եթե անգամ հնարավոր է, ապա շատ ավելի աշխատատար կլինի։

  • Հովըր, ֆոկուս, գույն, դիրք, չափսեր CSS-ով ենք ստեղծում։

  • Եթե տվյալները ինչ-որ տեղից վերցնում ես և սպասում պատասխանի՝ դա JS-ով ես անում։



Այժմ անդրադառնանք JS-ի և CSS-ի գլխավոր տարբերություններին, որպեսզի իմանաս որը երբ գործածել՝ առանց փորձարկումների վրա ավելորդ ժամանակ վատնելու։



CSS անիմացիաները հիմնականում մշակվում են հոսքային կոմպոզիցիայով (animation thread), որը տարբերվում է գլխավոր բրաուզերի հոսքից (main thread)։ Եթե բրաուզերը կատարում է բարդ հրամանները գլխավոր հոսքում՝ անիմացիաներն առանց ընդհատնվելու կիրականացվեն։


Իրականում, անիմացիա պատրաստելու գործիքի ընտրության հարցում ավելի կարևոր է ոչ թե այն, թե ինչ է լիելու վերջնական տեսքը, այլ այն, թե ինչպես է դա արվելու։

Օրինակ՝ CSS-ը թույլ է տալիս ստեղծել html անիմացիաներ՝ առանց JavaScript օգտագործելու։ CSS-ը նաև կարող է JS-ից ավելի արագ աշխատել, եթե բրաուզերով օպտիմիզացնենք այն։

Եթե դիտարկենք CSS-ը որպես գործիք, այլ ոչ թե որպես լեզու, ապա կստացվի, որ այն ավելի արագ է և ավելի լավ է աշխատում, ինչը չի համապատասխանում իրականությանը։ Եվ ահա թե ինչու։

Օրինակ եթե անիմացիան պետք է լինի SVG ֆիլտրերով, ապա թույլ համակարգչի վրա այն ընդհատումներով կաշխատի, և ոչ մի ծրագիր չի օգնի։ Այստեղից հետևում է որ տվյալ պարագայում ամեն ինչ խիստ հարաբերական է։

Սակայն եթե այնուամենայնիվ պետք է ընտրել այդ երկուսից մեկը, ապա հետևյալ տեղեկությունը հաստատ կօգնի։

Ամփոփում

Եթե հարկավոր է անիմացիայի պրոցեսը կառավարել և հետագայում ընդլայնել ֆունկցիոնալը՝ հնարավորությունների հաշվին, ապա JS-ն այս առումով ավելի հարմար է։ Մնացած դեպքերում կարող ես օգտագործել CSS։

Իրականում լավագույն տարբերակն այս երկուսի համադրումն է, քանի որ CSS-ը անիմացիան նկարագրելու համար է, JS-ը միացնելու համար է։ Այդ դեպքում կայքն ավելի լավ և բալասնավորված է աշխատում։ Պարզ ասած՝ առաջինը շարժիչն է, իսկ երկրորդը՝ մեքենան։ Դե իսկ եթե այս ամենից քեզ ոչինչ պարզ չէր, ապա կապ հաստատրիր մեր մասնագետների հետ, մենք կօգնենք որոշել, թե պե՞տք է արդյոք քեզ անիմացիայով կայք։

window.addEventListener('visibilitychange', function() { !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '644109783541101'); fbq('track', 'PageView'); });