📚 课程目录第1章岗位能力画像与简历优化模板

第1章：岗位能力画像与简历优化

本章为《Angular性能优化工程师面试宝典》奠基，精准定位岗位核心能力、简历结构、关键词清单及成果量化公式。通过能力画像与简历模板，帮助候选人快速对齐大厂面试期望，提升简历通过率。

岗位能力画像详表

能力维度	技能要求	面试权重	核心关键词
框架核心机制	ChangeDetection、Zone.js、AOT、Lazy Loading	30%	markForCheck、detach、immutable
性能监控与分析	Chrome Performance、Angular DevTools、Lighthouse	20%	FPS、内存泄漏、Bundle Size
工具链与生态	Webpack、Vite、NX Monorepo、ESBuild	20%	Tree-Shaking、Code Splitting
优化策略	虚拟滚动、OnPush、预编译、SSR	20%	IntersectionObserver、TransferState
工程化与最佳实践	模块化设计、状态管理、代码规范	10%	NgRx、Facade模式、Lint

简历结构模板与关键词清单

推荐简历结构（按大厂HR偏好排序）：

个人信息 + 技术栈标签
工作经历（突出项目规模与性能指标）
项目经验（按STAR法则：背景、动作、结果、量化）
技术亮点（独立重构/优化/工具）
教育背景 + 证书

关键词清单（用于简历与项目描述）：

Angular 12+/Ivy、OnPush、detach、markForCheck
Lazy Loading、PreloadStrategy、RouteReuseStrategy
Webpack Bundle Analyzer、Angular DevTools
虚拟滚动（CDK Virtual Scroll）、IntersectionObserver
SSR（Angular Universal）、TransferState、预渲染
RxJS优化（switchMap、shareReplay、避免内存泄露）

成果量化句式（STAR量化模板）：

“主导XX模块重构，采用OnPush+虚拟滚动，将首屏加载时间从3.2s降至1.1s（-65%），TTI降低40%。”  
“通过Code Splitting+预加载策略，主包体积缩小48%，Lighthouse Performance评分从62提升至94。”  
“引入CDK虚拟滚动处理10万+长列表，FPS从18提升至58，用户操作卡顿率下降90%。”

面试问答卡片 1：简历中如何体现性能优化能力

面试问题	请介绍你在项目中做过的最有影响力的性能优化。
面试官考察点	是否真正做过落地优化，能否量化结果，是否理解优化原理。
回答框架	STAR法则：背景（业务痛点）→ 问题指标（如首屏3s）→ 动作（具体技术栈）→ 结果（量化提升百分比）。
简短示例回答	“在某某电商项目中，首页组件渲染耗时超3s。我分析Chrome Performance发现重复变更检测开销大，改为OnPush+detach策略，并引入虚拟滚动处理商品列表。最终首屏降至1.2s，FPS从22提升至56，Lighthouse性能评分从68提升至92。”
可能追问	Q1: 如何确定是变更检测导致的问题？ Q2: 为什么选择OnPush而不是immutable？ Q3: 虚拟滚动遇到哪些边界问题？
避坑提醒	避免只讲“使用了XX技术”，要量化且可验证；如未做A/B测试，可用“与旧版本对比”说明。

面试问答卡片 2：ChangeDetection策略选择

面试问题	何时改用ChangeDetectionStrategy.OnPush？有何优缺点？
面试官考察点	对Angular检测机制的理解深度，适用场景判断，以及工程权衡能力。
回答框架	1) 说明OnPush触发条件（@Input变化、事件、async pipe等）； 2) 对比Default的优缺点； 3) 举例何时必须用Default（如频繁动态更新且不可控）。
简短示例回答	“OnPush适合纯展示组件或数据流可控的场景，减少不必要的检测。缺点是需手动管理变更（markForCheck）。我在仪表盘子组件中使用OnPush，结合async pipe订阅数据，避免了父组件刷新导致子组件重复渲染。但若组件内部有定时器或DOM事件需自动更新，则需谨慎。”
可能追问	Q1: markForCheck和detach的区别？ Q2: 如何调试变更检测循环？ Q3: 微前端中OnPush有什么注意点？
避坑提醒	不要简单说“用OnPush就快了”，要结合业务说明选择原因；避免在组件依赖外部状态时滥用OnPush导致画面不更新。

面试问答卡片 3：Bundle体积优化策略

面试问题	如何分析和优化Angular项目的Bundle体积？
面试官考察点	实际工具使用经验（Webpack Bundle Analyzer），对懒加载、Tree-Shaking、第三方库优化的掌握。
回答框架	1) 分析工具：Angular CLI stats.json → webpack-bundle-analyzer； 2) 优化手段：路由懒加载、组件级懒加载、第三方库按需引入、Tree-Shaking配置； 3) 效果验证。
简短示例回答	“先通过ng build --stats-json生成分析文件，用webpack-bundle-analyzer发现lodash和moment.js占大。用lodash-es替换lodash，moment替换为dayjs（体积减少80%）；同时将非首屏路由改为loadChildren懒加载，主bundle从680KB降至310KB。FCP减少32%。”
可能追问	Q1: Angular Ivy的Tree-Shaking比View Engine强在哪里？ Q2: 如何避免懒加载导致的首屏白屏？ Q3: 预加载策略如何配置？
避坑提醒	不要只提分析工具不提具体结果；注意区分开发环境与生产环境的优化；避免过度优化导致业务代码可维护性下降。

核心提示：本章能力画像和简历模板是后续所有章节的基础。面试前请对照岗位能力画像逐项自评，并按照简历模板重构简历，确保每个项目都有量化指标和可迁移话术。

行动清单：
✓ 利用本文配发的关键词清单，检查简历中是否覆盖了OnPush、虚拟滚动、SSR、Bundle分析等高频词。
✓ 为每个项目写出至少2条STAR量化语句（参考文中的成果量化句式）。
✓ 模拟面试时，先练习3个问答卡片中的问题，再逐步覆盖后续章节。

注意：简历中避免出现“优化了性能”这种模糊描述，必须附带具体数字（如时间、体积、FPS）以及对比基准。大厂面试官会深挖数字来源，提前准备好A/B测试数据或线上监控截图。