angular-performance

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

NgOptimizedImage (REQUIRED for images)

NgOptimizedImage（图片优化必备）

typescript

import { NgOptimizedImage } from '@angular/common';

@Component({
  imports: [NgOptimizedImage],
  template: `
    <!-- LCP image: add priority -->
    <img ngSrc="hero.jpg" width="800" height="400" priority>
    
    <!-- Regular: lazy loaded by default -->
    <img ngSrc="thumb.jpg" width="200" height="200">
    
    <!-- Fill mode (parent needs position: relative) -->
    <img ngSrc="bg.jpg" fill>
    
    <!-- With placeholder -->
    <img ngSrc="photo.jpg" width="400" height="300" placeholder>
  `
})

typescript

import { NgOptimizedImage } from '@angular/common';

@Component({
  imports: [NgOptimizedImage],
  template: `
    <!-- LCP image: add priority -->
    <img ngSrc="hero.jpg" width="800" height="400" priority>
    
    <!-- Regular: lazy loaded by default -->
    <img ngSrc="thumb.jpg" width="200" height="200">
    
    <!-- Fill mode (parent needs position: relative) -->
    <img ngSrc="bg.jpg" fill>
    
    <!-- With placeholder -->
    <img ngSrc="photo.jpg" width="400" height="300" placeholder>
  `
})

Rules

规则

ALWAYS set
```
width
```
and
```
height
```
(or
```
fill
```
)
Add
```
priority
```
to LCP (Largest Contentful Paint) image
Use
```
ngSrc
```
not
```
src
```
Parent of
```
fill
```
image must have
```
position: relative/fixed/absolute
```

必须设置
```
width
```
和
```
height
```
（或
```
fill
```
）
为LCP（最大内容绘制）图片添加
```
priority
```
属性
使用
```
ngSrc
```
而非
```
src
```
```
fill
```
图片的父元素必须设置
```
position: relative/fixed/absolute
```

@defer - Lazy Components

@defer - 懒加载组件

html

@defer (on viewport) {
  <heavy-component />
} @placeholder {
  <p>Placeholder shown immediately</p>
} @loading (minimum 200ms) {
  <spinner />
} @error {
  <p>Failed to load</p>
}

html

@defer (on viewport) {
  <heavy-component />
} @placeholder {
  <p>Placeholder shown immediately</p>
} @loading (minimum 200ms) {
  <spinner />
} @error {
  <p>Failed to load</p>
}

Triggers

触发条件

Trigger	When to Use
`on viewport`	Below the fold content
`on interaction`	Load on click/focus/hover
`on idle`	Load when browser is idle
`on timer(500ms)`	Load after delay
`when condition`	Load when expression is true

html

<!-- Multiple triggers -->
@defer (on viewport; on interaction) {
  <comments />
}

<!-- Conditional -->
@defer (when showComments()) {
  <comments />
}

触发方式	使用场景
`on viewport`	视口外（折叠下方）的内容
`on interaction`	点击/获取焦点/悬停时加载
`on idle`	浏览器空闲时加载
`on timer(500ms)`	延迟指定时间后加载
`when condition`	当表达式为真时加载

html

<!-- Multiple triggers -->
@defer (on viewport; on interaction) {
  <comments />
}

<!-- Conditional -->
@defer (when showComments()) {
  <comments />
}

Lazy Routes

懒加载路由

typescript

// Single component
{
  path: 'admin',
  loadComponent: () => import('./features/admin/admin').then(c => c.AdminComponent)
}

// Feature with child routes
{
  path: 'users',
  loadChildren: () => import('./features/users/routes').then(m => m.USERS_ROUTES)
}

typescript

// Single component
{
  path: 'admin',
  loadComponent: () => import('./features/admin/admin').then(c => c.AdminComponent)
}

// Feature with child routes
{
  path: 'users',
  loadChildren: () => import('./features/users/routes').then(m => m.USERS_ROUTES)
}

SSR & Hydration

SSR与水合作用

typescript

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration()
  ]
});

Scenario	Use
SEO critical (blog, e-commerce)	SSR
Dashboard/Admin	CSR
Static marketing site	SSG/Prerender

typescript

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration()
  ]
});

场景	推荐方案
SEO关键场景（博客、电商）	SSR
仪表盘/后台管理系统	CSR
静态营销网站	SSG/预渲染

Slow Computations

缓慢计算处理方案

Solution	When
Optimize algorithm	First choice always
Pure pipes	Cache single result
Memoization	Cache multiple results
`computed()`	Derived signal state

NEVER trigger reflows/repaints in lifecycle hooks (

ngOnInit

ngAfterViewInit

解决方案	适用场景
优化算法	首选方案
纯管道（Pure pipes）	缓存单一结果
记忆化（Memoization）	缓存多个结果
`computed()`	派生信号状态

切勿在生命周期钩子（

ngOnInit

、

ngAfterViewInit

）中触发重排/重绘。

angular-performance

Original

Translation

NgOptimizedImage (REQUIRED for images)

NgOptimizedImage（图片优化必备）

Rules

规则

@defer - Lazy Components

@defer - 懒加载组件

Triggers

触发条件

Lazy Routes

懒加载路由

SSR & Hydration

SSR与水合作用

Slow Computations

缓慢计算处理方案

Resources

参考资源