fixing-motion-performance

Paranda animatsioonijõudluse probleeme.

kuidas kasutada

• /fixing-motion-performance Rakenda need piirangud igale UI-animatsioonitööle selles vestluses.

• /fixing-motion-performance <file> Vaata fail üle alltoodud reeglite vastu ja teata:

• rikkumised (tsiteeri täpne rida või lõik)
• miks see oluline on (üks lühike lause)
• konkreetne parandus (kooditaseme soovitus)

Ära migreeri animatsiooniteeke, kui seda ei ole selgelt küsitud. Rakenda reegleid olemasolevas stack’is.

millal rakendada

Viita nendele juhistele, kui: - lisad või muudad UI-animatsioone (CSS, WAAPI, Motion, rAF, GSAP) - refaktoreerid tõrkuvat interaktsiooni või üleminekut - rakendad kerimisega seotud liikumist või reveal-on-scroll’i - animeerid paigutust, filtreid, maske, gradiente või CSS-muutujaid - vaatad üle komponente, mis kasutavad will-change’i, transforme või mõõtmist

renderdamissammude sõnastik

• composite: transform, opacity
• paint: color, borders, gradients, masks, images, filters
• layout: size, position, flow, grid, flex

reeglikategooriad prioriteedi järgi

kiirviide

1. never patterns (kriitiline)

• ära sega samas kaadris layout’i lugemisi ja kirjutamisi
• ära animeeri layout’i pidevalt suurtel või tähenduslikel pindadel
• ära juhi animatsiooni scrollTop’ist, scrollY-st või scroll-sündmustest
• ei requestAnimationFrame’i tsükleid ilma peatumistingimuseta
• ära sega mitut animatsioonisüsteemi, mis kumbki mõõdavad või muudavad layout’i

2. choose the mechanism (kriitiline)

• vaikimisi kasuta liikumiseks transform’i ja opacity’t
• kasuta JS-juhitud animatsiooni ainult siis, kui interaktsioon seda nõuab
• paint- või layout-animatsioon on vastuvõetav ainult väikestel, isoleeritud pindadel
• ühekordsed efektid on sagedamini vastuvõetavad kui pidev liikumine
• eelista tehnika alandamist liikumise täielikule eemaldamisele

3. measurement (kõrge)

• mõõda üks kord, seejärel animeeri transform’i või opacity kaudu
• koonda kõik DOM-lugemised enne kirjutamisi
• ära loe layout’i korduvalt animatsiooni ajal
• eelista FLIP-stiilis üleminekuid layout’ilaadsete efektide jaoks
• eelista lähenemisi, mis koondavad mõõtmise ja kirjutamised

4. scroll (kõrge)

• eelista Scroll või View Timeline’e kerimisega seotud liikumiseks, kui saadaval
• kasuta IntersectionObserver’it nähtavuse ja peatamise jaoks
• ära polli scroll-positsiooni animatsiooni jaoks
• peata või peata animatsioonid, kui need on ekraanilt väljas
• kerimisega seotud liikumine ei tohi käivitada pidevat layout’i või paint’i suurtel pindadel

5. paint (keskmine-kõrge)

• paint’i käivitav animatsioon on lubatud ainult väikestel, isoleeritud elementidel
• ära animeeri paint-raskeid omadusi suurtel konteineritel
• ära animeeri CSS-muutujaid transform’i, opacity või positsiooni jaoks
• ära animeeri pärandatud CSS-muutujaid
• hoia animeeritud CSS-muutujad lokaalsed ja väldi pärandamist

6. layers (keskmine)

• compositor’i liikumine nõuab kihi edutamist, ära eeldada seda
• kasuta will-change’i ajutiselt ja kirurgiliselt
• väldi paljusid või suuri edutatud kihte
• valideeri kihi käitumist tööriistadega, kui jõudlus on oluline

7. blur and filters (keskmine)

• hoia blur-animatsioon väike (<=8px)
• kasuta blur’i ainult lühikeste, ühekordsete efektide jaoks
• ära kunagi animeeri blur’i pidevalt
• ära kunagi animeeri blur’i suurtel pindadel
• eelista enne blur’i opacity’t ja translate’i

8. view transitions (madal)

• kasuta view transition’e ainult navigatsioonitaseme muutusteks
• väldi view transition’e interaktsioonirikka UI jaoks
• väldi view transition’e, kui on vaja katkestamist või tühistamist
• käsitle suuruse muutusi potentsiaalselt layout’i käivitavatena

9. tool boundaries (kriitiline)

• ära migreeri ega kirjuta ümber animatsiooniteeke, kui seda ei ole selgelt küsitud
• rakenda neid reegleid olemasolevas animatsioonisüsteemis
• ära kunagi migreeri API-sid osaliselt ega sega stiile samas komponendis

levinud parandused

/* layout thrashing: animate transform instead of width */
/* before */ .panel { transition: width 0.3s; }
/* after */  .panel { transition: transform 0.3s; }

/* scroll-linked: use scroll-timeline instead of JS */
/* before */ window.addEventListener('scroll', () => el.style.opacity = scrollY / 500)
/* after */  .reveal { animation: fade-in linear; animation-timeline: view(); }

// measurement: batch reads before writes (FLIP)
// before — layout thrash
el.style.left = el.getBoundingClientRect().left + 10 + 'px';
// after — measure once, animate via transform
const first = el.getBoundingClientRect();
el.classList.add('moved');
const last = el.getBoundingClientRect();
el.style.transform = `translateX(${first.left - last.left}px)`;
requestAnimationFrame(() => { el.style.transition = 'transform 0.3s'; el.style.transform = ''; });

ülevaatuse juhised

• jõusta esmalt kriitilised reeglid (never patterns, tool boundaries)
• vali kõige odavam renderdamistöö, mis vastab kavatsusele
• iga mittevaikimisi valiku puhul ütle piirang, mis seda õigustab (pinna suurus, kestus või interaktsiooninõue)
• ülevaatusel eelista tegutsetavaid märkusi ja konkreetseid alternatiive teooriale