Angular-megjelenítés és SSR-teljesítmény
Mért megjelenítési és betöltési költségeket csökkent a szerveroldali előállítás és böngészős hidratálás összehangolásával.
angular-performance-ssr
Nézd meg, miben segítMikor hasznos?
Akkor használd, ha Angular-listák, diagramok vagy az első oldalbetöltés lassú.
Miben segít neked?
- Csökkenti az ismételt sablonszámítást és megőrzi a listaelemek azonosságát.
- Támogatott késleltetett betöltést, megjelenítést vagy lapozást alkalmaz.
- Elkülöníti a böngészős API-kat és a hidratálást megzavaró DOM-módosításokat.
Például ezt kérheted
Mérd meg a hosszú rendeléslistát, csökkentsd a felesleges rajzolást, majd ellenőrizd a szerverről betöltött oldal hidratálását. Ugyanazzal a nagy adathalmazzal mérj a változtatás előtt és után. Rögzítsd a megjelenítési időt, és ellenőrizd, újraépül-e minden sor rendezéskor.
Részletes dokumentáció
Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.
Összecsukás
Angular Performance & SSR
Measure before optimizing, eliminate unnecessary change-detection work and DOM thrashing, and keep code safe across browser and SSR/hydration environments when SSR is used.
1. Change detection and template rendering efficiency
- Use
ChangeDetectionStrategy.OnPushand reactive inputs (immutable object references, Signals, orasyncpipe) so Angular only re-checks subtrees whose inputs or local state actually changed. - Always provide a stable, unique identity in
@for (item of items; track item.id)(or*ngFor="...; trackBy: trackById"). Never track by$indexon lists that can be reordered, filtered, inserted into or deleted from. - Move formatting and derived calculations out of template method calls into
computed()signals or pure@Pipe({ pure: true })pipes.
2. Bundle size, lazy loading and @defer
- Keep initial bundles lean with route-level
loadComponent/loadChildrenand, in Angular 17+,@defer (on viewport)/@defer (on interaction)with@placeholder,@loadingand@errorblocks for heavy below-the-fold widgets or charts. - For large lists (hundreds or thousands of rows), use pagination or
@angular/cdk/scrolling(cdk-virtual-scroll-viewport) rather than rendering every DOM node at once. - Run tasks that fire at high frequency outside Angular's template needs (
requestAnimationFrame, scroll/mousemove listeners) viaNgZone.runOutsideAngularor passive listeners, re-entering only when UI state actually changes.
3. SSR and hydration safety (when @angular/ssr is present)
- Guard browser-only globals (
window,document,localStorage,ResizeObserver,IntersectionObserver) behindafterNextRender/afterRender(Angular 16+) orisPlatformBrowser( inject(PLATFORM_ID) ). - Avoid direct DOM manipulation that mutates server-rendered HTML structure before Angular hydration completes, and ensure
withEventReplay()/HttpClienttransfer cache is respected.
Before you finish
- Lists use stable
track item.id/trackBy, never$indexon mutable lists. -
OnPushandcomputed()/ pure pipes avoid redundant work on every change-detection cycle. - Browser-only APIs are guarded when SSR/hydration is active.
Csomagban lévő fájlok 2
LICENSE.txtSKILL.md
A skillcsomag bemutatása
angular-performance-ssr
angular-performance-ssr: Jól karbantartható Angular funkciókat készít világos komponenshatárokkal, reaktív állapottal, űrlapokkal és tesztelt migrációkkal.
Összecsukás
angular-performance-ssr
angular-performance-ssr: Jól karbantartható Angular funkciókat készít világos komponenshatárokkal, reaktív állapottal, űrlapokkal és tesztelt migrációkkal.
A teljes skillt és a hozzá tartozó fájlokat tartalmazza (2 fájl). Az alábbi eredeti leírás rögzíti a pontos alkalmazási területét.
A skill eredeti leírása (a forrás nyelvén)
Use when optimizing Angular runtime or bundle performance, configuring OnPush change detection, track expressions in @for / *ngFor, @defer blocks, NgOptimizedImage, or SSR and hydration safety.
Telepítsd a skillt, nézd át a forrását és a megbízhatósági beállításait, majd engedélyezd a megfelelő projektben vagy ügynöknél.
Előfeltételek
- A számítógépedre telepített Orqestria.