performance

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Performance

性能优化

Comprehensive performance optimization patterns for frontend, backend, and LLM inference.

涵盖前端、后端及LLM推理的全方位性能优化模式。

Quick Reference

快速参考

Category	Rules	Impact	When to Use
Core Web Vitals	3	CRITICAL	LCP, INP, CLS optimization with 2026 thresholds
Render Optimization	3	HIGH	React Compiler, memoization, virtualization
Lazy Loading	3	HIGH	Code splitting, route splitting, preloading
Image Optimization	3	HIGH	Next.js Image, AVIF/WebP, responsive images
Profiling & Backend	3	MEDIUM	React DevTools, py-spy, bundle analysis
LLM Inference	3	MEDIUM	vLLM, quantization, speculative decoding
Caching	2	HIGH	Redis cache-aside, prompt caching, HTTP cache headers
Query & Data Fetching	2	HIGH	TanStack Query prefetching, optimistic updates, rollback

Total: 22 rules across 8 categories

分类	规则数量	影响级别	使用场景
Core Web Vitals	3	关键	基于2026年阈值优化LCP、INP、CLS
渲染优化	3	高	React Compiler、记忆化、虚拟化
懒加载	3	高	代码分割、路由分割、预加载
图片优化	3	高	Next.js Image、AVIF/WebP、响应式图片
性能分析与后端	3	中	React DevTools、py-spy、打包分析
LLM推理	3	中	vLLM、量化、推测解码
缓存	2	高	Redis缓存策略、提示词缓存、HTTP缓存头
查询与数据获取	2	高	TanStack Query预获取、乐观更新、回滚

总计：8大分类共22条规则

Core Web Vitals

Google's Core Web Vitals with 2026 stricter thresholds.

Rule	File	Key Pattern
LCP Optimization	`rules/cwv-lcp.md`	Preload hero, SSR, fetchpriority="high"
INP Optimization	`rules/cwv-inp.md`	scheduler.yield, useTransition, requestIdleCallback
CLS Prevention	`rules/cwv-cls.md`	Explicit dimensions, aspect-ratio, font-display

谷歌2026年更严格阈值的Core Web Vitals指标。

规则	文件	核心模式
LCP优化	`rules/cwv-lcp.md`	预加载首屏核心内容、SSR、fetchpriority="high"
INP优化	`rules/cwv-inp.md`	scheduler.yield、useTransition、requestIdleCallback
CLS预防	`rules/cwv-cls.md`	显式尺寸设置、aspect-ratio、font-display

2026 Thresholds

2026年阈值

Metric	Current Good	2026 Good
LCP	<= 2.5s	<= 2.0s
INP	<= 200ms	<= 150ms
CLS	<= 0.1	<= 0.08

指标	当前良好标准	2026年良好标准
LCP	<= 2.5s	<= 2.0s
INP	<= 200ms	<= 150ms
CLS	<= 0.1	<= 0.08

Render Optimization

渲染优化

React render performance patterns for React 19+.

Rule	File	Key Pattern
React Compiler	`rules/render-compiler.md`	Auto-memoization, "Memo" badge verification
Manual Memoization	`rules/render-memo.md`	useMemo/useCallback escape hatches, state colocation
Virtualization	`rules/render-virtual.md`	TanStack Virtual for 100+ item lists

适用于React 19+的React渲染性能优化模式。

规则	文件	核心模式
React Compiler	`rules/render-compiler.md`	自动记忆化、“Memo”标识验证
手动记忆化	`rules/render-memo.md`	useMemo/useCallback逃逸舱、状态内聚
虚拟化	`rules/render-virtual.md`	TanStack Virtual处理100+条目的列表

Lazy Loading

懒加载

Code splitting and lazy loading with React.lazy and Suspense.

Rule	File	Key Pattern
React.lazy + Suspense	`rules/loading-lazy.md`	Component lazy loading, error boundaries
Route Splitting	`rules/loading-splitting.md`	React Router 7.x, Vite manual chunks
Preloading	`rules/loading-preload.md`	Prefetch on hover, modulepreload hints

基于React.lazy和Suspense的代码分割与懒加载方案。

规则	文件	核心模式
React.lazy + Suspense	`rules/loading-lazy.md`	组件懒加载、错误边界
路由分割	`rules/loading-splitting.md`	React Router 7.x、Vite手动代码块
预加载	`rules/loading-preload.md`	鼠标悬停预获取、modulepreload提示

Image Optimization

图片优化

Production image optimization for modern web applications.

Rule	File	Key Pattern
Next.js Image	`rules/images-nextjs.md`	Image component, priority, blur placeholder
Format Selection	`rules/images-formats.md`	AVIF/WebP, quality 75-85, picture element
Responsive Images	`rules/images-responsive.md`	sizes prop, art direction, CDN loaders

适用于现代Web应用的生产环境图片优化方案。

规则	文件	核心模式
Next.js Image	`rules/images-nextjs.md`	Image组件、priority属性、模糊占位符
格式选择	`rules/images-formats.md`	AVIF/WebP、质量75-85、picture元素
响应式图片	`rules/images-responsive.md`	sizes属性、艺术方向、CDN加载器

Profiling & Backend

性能分析与后端

Profiling tools and backend optimization patterns.

Rule	File	Key Pattern
React Profiling	`rules/profiling-react.md`	DevTools Profiler, flamegraph, render counts
Backend Profiling	`rules/profiling-backend.md`	py-spy, cProfile, memory_profiler, flame graphs
Bundle Analysis	`rules/profiling-bundle.md`	vite-bundle-visualizer, tree shaking, performance budgets

性能分析工具及后端优化模式。

规则	文件	核心模式
React性能分析	`rules/profiling-react.md`	DevTools Profiler、火焰图、渲染次数统计
后端性能分析	`rules/profiling-backend.md`	py-spy、cProfile、memory_profiler、火焰图
打包分析	`rules/profiling-bundle.md`	vite-bundle-visualizer、Tree Shaking、性能预算

LLM Inference

LLM推理

High-performance LLM inference with vLLM, quantization, and speculative decoding.

Rule	File	Key Pattern
vLLM Deployment	`rules/inference-vllm.md`	PagedAttention, continuous batching, tensor parallelism
Quantization	`rules/inference-quantization.md`	AWQ, GPTQ, FP8, INT8 method selection
Speculative Decoding	`rules/inference-speculative.md`	N-gram, draft model, 1.5-2.5x throughput

基于vLLM、量化及推测解码的高性能LLM推理方案。

规则	文件	核心模式
vLLM部署	`rules/inference-vllm.md`	PagedAttention、连续批处理、张量并行
量化	`rules/inference-quantization.md`	AWQ、GPTQ、FP8、INT8方法选择
推测解码	`rules/inference-speculative.md`	N-gram、草稿模型、1.5-2.5倍吞吐量提升

Caching

缓存

Backend Redis caching and LLM prompt caching for cost savings and performance.

Rule	File	Key Pattern
Redis & Backend	`rules/caching-redis.md`	Cache-aside, write-through, invalidation, stampede prevention
HTTP & Prompt	`rules/caching-http.md`	HTTP cache headers, LLM prompt caching, semantic caching

后端Redis缓存与LLM提示词缓存方案，兼顾成本节约与性能提升。

规则	文件	核心模式
Redis与后端缓存	`rules/caching-redis.md`	缓存旁路、写穿透、失效策略、缓存击穿预防
HTTP与提示词缓存	`rules/caching-http.md`	HTTP缓存头、LLM提示词缓存、语义缓存

Query & Data Fetching

查询与数据获取

TanStack Query v5 patterns for prefetching and optimistic updates.

Rule	File	Key Pattern
Prefetching	`rules/query-prefetching.md`	Hover prefetch, route loaders, queryOptions, Suspense
Optimistic Updates	`rules/query-optimistic.md`	Optimistic mutations, rollback, cache invalidation

适用于TanStack Query v5的预获取与乐观更新模式。

规则	文件	核心模式
预获取	`rules/query-prefetching.md`	悬停预获取、路由加载器、queryOptions、Suspense
乐观更新	`rules/query-optimistic.md`	乐观突变、回滚、缓存失效

Quick Start Example

快速开始示例

tsx

// LCP: Priority hero image with SSR
import Image from 'next/image';

export default async function Page() {
  const data = await fetchHeroData();
  return (
    <Image
      src={data.heroImage}
      alt="Hero"
      priority
      placeholder="blur"
      sizes="100vw"
      fill
    />
  );
}

tsx

// LCP: 带SSR的优先级首屏图片
import Image from 'next/image';

export default async function Page() {
  const data = await fetchHeroData();
  return (
    <Image
      src={data.heroImage}
      alt="Hero"
      priority
      placeholder="blur"
      sizes="100vw"
      fill
    />
  );
}

Key Decisions

关键决策

Decision	Recommendation
Memoization	Let React Compiler handle it (2026 default)
Lists 100+ items	Use TanStack Virtual
Image format	AVIF with WebP fallback (30-50% smaller)
LCP content	SSR/SSG, never client-side fetch
Code splitting	Per-route for most apps, per-component for heavy widgets
Prefetch strategy	On hover for nav links, viewport for content
Quantization	AWQ for 4-bit, FP8 for H100/H200
Bundle budget	Hard fail in CI to prevent regression

决策	推荐方案
记忆化	由React Compiler处理（2026年默认方案）
100+条目列表	使用TanStack Virtual
图片格式	优先AVIF，WebP作为降级方案（体积小30-50%）
LCP内容	采用SSR/SSG，绝不要客户端侧获取
代码分割	多数应用按路由分割，重型组件按组件分割
预获取策略	导航链接悬停时预获取，内容进入视口时预获取
量化方案	H100/H200使用FP8，其他场景使用4-bit AWQ
打包预算	在CI中设置硬性失败阈值，防止性能退化

Common Mistakes

常见错误

Client-side fetching LCP content (delays render)
Images without explicit dimensions (causes CLS)
Lazy loading LCP images (delays largest paint)
Heavy computation in event handlers (blocks INP)
Layout-shifting animations (use transform instead)
Lazy loading tiny components < 5KB (overhead > savings)
Missing error boundaries on lazy components
Using GPTQ without calibration data
Not benchmarking actual workload patterns
Only measuring in lab environment (need RUM)

客户端侧获取LCP内容（延迟渲染）
图片未设置显式尺寸（导致CLS）
对LCP图片使用懒加载（延迟最大内容绘制）
事件处理器中执行重计算（阻塞INP）
使用会导致布局偏移的动画（改用transform）
对小于5KB的小型组件使用懒加载（开销大于收益）
懒加载组件未配置错误边界
使用GPTQ但未提供校准数据
未针对实际工作负载模式进行基准测试
仅在实验室环境中测量性能（需要真实用户监控RUM）

Related Skills

Capability Details

能力详情

lcp-optimization

Keywords: LCP, largest-contentful-paint, hero, preload, priority, SSR Solves:

Optimize hero image loading
Server-render critical content
Preload and prioritize LCP resources

关键词： LCP, largest-contentful-paint, 首屏核心内容, 预加载, 优先级, SSR 解决问题：

优化首屏核心图片加载
服务端渲染关键内容
预加载并优先处理LCP资源

inp-optimization

Keywords: INP, interaction, responsiveness, long-task, transition, yield Solves:

Break up long tasks with scheduler.yield
Defer non-urgent updates with useTransition
Optimize event handler performance

关键词： INP, 交互, 响应速度, 长任务, transition, yield 解决问题：

使用scheduler.yield拆分长任务
使用useTransition延迟非紧急更新
优化事件处理器性能

cls-prevention

Keywords: CLS, layout-shift, dimensions, aspect-ratio, font-display Solves:

Reserve space for dynamic content
Prevent font flash and image pop-in
Use transform for animations

关键词： CLS, 布局偏移, 尺寸, aspect-ratio, font-display 解决问题：

为动态内容预留空间
防止字体闪烁与图片突现
使用transform实现动画

react-compiler

Keywords: react-compiler, auto-memo, memoization, React 19 Solves:

Enable automatic memoization
Identify when manual memoization needed
Verify compiler is working

关键词： react-compiler, auto-memo, 记忆化, React 19 解决问题：

启用自动记忆化
识别需要手动记忆化的场景
验证Compiler是否正常工作

virtualization

Keywords: virtual, TanStack, large-list, scroll, overscan Solves:

Render 100+ item lists efficiently
Dynamic height virtualization
Window scrolling patterns

关键词： virtual, TanStack, 大型列表, 滚动, overscan 解决问题：

高效渲染100+条目的列表
动态高度虚拟化
窗口滚动模式

lazy-loading

Keywords: React.lazy, Suspense, code-splitting, dynamic-import Solves:

Route-based code splitting
Component lazy loading with error boundaries
Prefetch on hover and viewport

关键词： React.lazy, Suspense, code-splitting, dynamic-import 解决问题：

基于路由的代码分割
带错误边界的组件懒加载
悬停与视口触发的预获取

image-optimization

Keywords: next/image, AVIF, WebP, responsive, blur-placeholder Solves:

Next.js Image component patterns
Format selection and quality settings
Responsive sizing and CDN configuration

关键词： next/image, AVIF, WebP, 响应式, blur-placeholder 解决问题：

Next.js Image组件使用模式
格式选择与质量设置
响应式尺寸与CDN配置

profiling

Keywords: profiler, flame-graph, py-spy, DevTools, bundle-analyzer Solves:

Profile React renders and backend code
Generate and interpret flame graphs
Analyze and optimize bundle size

关键词： profiler, flame-graph, py-spy, DevTools, bundle-analyzer 解决问题：

分析React渲染与后端代码性能
生成并解读火焰图
分析与优化打包体积

llm-inference

Keywords: vllm, quantization, speculative-decoding, inference, throughput Solves:

Deploy LLMs with vLLM for production
Choose quantization method for hardware
Accelerate generation with speculative decoding

关键词： vllm, quantization, speculative-decoding, 推理, 吞吐量 解决问题：

使用vLLM部署生产环境LLM
根据硬件选择量化方案
通过推测解码提升生成速度

References

参考资料

RUM Setup - Real User Monitoring
React Compiler Migration - Compiler adoption
TanStack Virtual - Virtualization patterns
vLLM Deployment - Production vLLM config
Quantization Guide - Method comparison
CDN Setup - Image CDN configuration

RUM设置 - 真实用户监控
React Compiler迁移 - Compiler adoption
TanStack Virtual - 虚拟化模式
vLLM部署 - 生产环境vLLM配置
量化指南 - 方案对比
CDN设置 - 图片CDN配置

performance

Original

Translation

Performance

性能优化

Quick Reference

快速参考

Core Web Vitals

Core Web Vitals

2026 Thresholds

2026年阈值

Render Optimization

渲染优化

Lazy Loading

懒加载

Image Optimization

图片优化

Profiling & Backend

性能分析与后端

LLM Inference

LLM推理

Caching

缓存

Query & Data Fetching

查询与数据获取

Quick Start Example

快速开始示例

Key Decisions

关键决策

Common Mistakes

常见错误

Related Skills

相关技能

Capability Details

能力详情

lcp-optimization

lcp-optimization

inp-optimization

inp-optimization

cls-prevention

cls-prevention

react-compiler

react-compiler

virtualization

virtualization

lazy-loading

lazy-loading

image-optimization

image-optimization

profiling

profiling

llm-inference

llm-inference

References

参考资料