CSS  օպտիմիզացիա

CSS օպտիմիզացիա

Front-end ծրագրավորողների կողմից ամեաանտեսաված թեմաներց մեկը css օպտիմիզացիան է։ Որպեսի ստանանք սլացիկ եւ թեթեւ անիմացյաներ անհրաժեշ է հետեւել մի քանի պարզ ցուցումների՝

 

  1. Անիմացիաների մեջ տեղափոխությունների համար նախատեսված է «transform: none|transform-functions|initial|inherit;» ֆունկցիան, որը օգտագործում է համակարգչի GPU (Graphics Processing Unit) -ն, ապահովելով անիմացիայի արտադրողականությունը, այլ կերպ աշխատող անիմացիաները օգտագործում են CPU-ն ինչի պատճառով էլ բջջային հեռախոսների կամ թույլ համակարգիչների վրա դժվարությամբ են տեղաշարժվում օբյեկտը։

  2. Որպեսզի դիտարկիչը նախապատրաստվի, անիմացիային կամ բովանդակության փոփոխությանը անհրաժեշ է օգտագործել «will-change: auto | scroll-position | contents | custom-ident » ֆուկցիան, որն էլ կարագացնի էլեմենտի վերապատկերումը։

  3. Նկարների արագ բեռնման համար՝ դիտարկիչը հնարավորություն է տալիս նախորոք ընտրել նկարների մշակման մետհոդը «image-rendering: auto | optimizeSpeed | optimizeQuality | inherit | crisp-edges»։ Նույնատիպ ֆունկցիա կա նաեւ տեքստերի հմաար «text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit »։ Այս երկուսը վատացնում են տեքստի կամ նկարի որակը, այդ պատճառով, առավել հարմար է ռեսուրսի վերջնական բեռնումից հետո փոխել համապատասխան ֆունկցիայի պարամետրը՝ auto'։

 

 

Վերոնշված ֆուկցիաների մասին ավելի մանրամասն կարող եք կարդալ w3c պաշտոնական կայքում կամ որոնել  google ում։

 

Tigran Simonyan

25.07.2017

css

Front end