第1章 岗位能力画像与简历优化模板
本章帮助面试者系统梳理小程序UI工程化工程师的岗位能力模型，同时提供简历结构的优化思路与关键词、成果量化句式。通过本章学习，你能快速将自己的经验对接到面试官的高频考察点，提升简历筛选通过率与面试第一印象。
一、岗位能力画像详解
下表列出每个维度的关键能力与面试高频考察点，方便你对照自查：
| 维度 | 关键能力 | 面试高频考察点 |
|---|---|---|
| 组件化架构 | 自定义组件、插槽、behaviors、组件间通信 | 组件复用性设计、复杂组件拆分、父子组件通信方案 |
| 性能优化 | setData 优化、虚拟列表、懒加载、WXS 使用 | 性能瓶颈分析手段、优化前后对比数据、工具链（Audits） |
| 工程化工具 | Webpack/Gulp、CI/CD、代码规范 ESLint、分包构建 | 构建流程搭建、自动化测试、版本管理与回滚 |
| 设计协同 | 设计规范落地、图标/字体管理、设计师协作流程 | 如何保证视觉还原度、组件库与设计稿同步机制 |
二、简历优化核心要点
关键词清单（匹配岗位要求）： 组件化、性能优化、工程化、自定义组件、分包加载、setData、WXS、骨架屏、虚拟列表、CI/CD、ESLint、自动化测试、视觉规范、组件库。
成果量化句式示例：
- “通过组件化重构，代码复用率提升 40%，新业务开发周期缩短 30%”
- “优化首屏加载时间从 3s 降至 1.2s，白屏率降低 65%”
- “搭建自动化构建流水线，发布耗时减少 80%，线上事故降低 90%”
- “建立组件库并推广至 3 个业务线，UI 还原度提升至 95%”
面试问题：请描述你最有代表性的一个小程序组件化实践。
考察点： 组件设计能力、工程化思维、落地效果与反思。
回答框架： 背景 → 方案 → 难点 → 结果 → 反思。
示例回答： 在电商小程序中，我设计了一套通用商品卡片组件，支持多模式切换和事件抛送。通过 behavior 抽象公用逻辑，团队新增业务只需一行配置。结果开发效率提升 50%，维护成本降低 30%。
可能追问： 如何处理组件间复杂通信？如何避免样式污染？组件库版本管理策略？
面试问题：在简历中如何体现你的工程化能力？
考察点： 简历表达的逻辑性、关键词匹配度、量化意识。
回答框架： 总结技术栈 → 列举工程化实践 → 用数字说明效果。
示例回答： 我熟悉 Webpack 定制打包、ESLint 规范、Git hooks 和 CI 流程。在项目中搭建了自动化构建和代码检查，发布耗时从 10 分钟降至 2 分钟，线上缺陷减少 70%。
可能追问： 你具体配置过哪些 Webpack 插件？如何解决构建体积问题？你们当前的 CI 流程是怎样的？
面试问题：你如何看待小程序性能优化中的“setData”瓶颈？
考察点： 对小程序渲染机制的理解、实际优化手段、数据对比能力。
回答框架： 问题描述 → 原因分析 → 优化方案 → 效果数据。
示例回答： setData 频繁会导致渲染延迟。我采用差分更新、合并多次修改为一次、使用 WXS 进行局部更新。优化后页面滑动帧率从 30fps 提升至 55fps，页面交互延迟减少 60%。
可能追问： 如何定位 setData 瓶颈？WXS 的使用边界？除了 setData 还有哪些优化方向？
本章小结： 岗位能力画像帮助你明确面试官最关注的能力维度；简历结构模板与成果量化句式能有效提升简历竞争力。接下来请根据自身经验，针对每个维度准备 2~3 个实际案例，用 STAR 结构组织回答语料。