前端工程师简历指南 | 技巧、示例、策略

为了获得前端工程师的职位面试机会，我们必须提交一份通过公司简历筛选流程的简历。现有的资源很多，可以帮助您制作一份优秀的软件工程师简历，但很少有专门针对前端工程师的。有关一般的软件工程师简历技巧，请参阅 [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/）。

在本页中，我们提供了一些前端特定的技巧，以帮助前端工程师改进他们的简历并进入面试阶段。

基本要求

如果您的经验少于 5 年，最好保持在一页以内，不超过两页
使用 Microsoft Word、Google Docs、Pages 或 LaTeX 构建，以便申请人跟踪系统 (ATS) 可以解析简历。避免使用设计软件
以 PDF 格式提交

格式和美学

前端工程师经常处理用户界面，并且应该对设计有敏锐的意识。如果您的简历在美学上不令人满意，那么这对您作为前端工程师来说会产生非常糟糕的影响。

使用单列格式
使用大多数操作系统上可用的常见字体，如 Arial、Calibri 或 Garamond。避免使用花哨的字体
坚持使用一种或最多两种字体（一种用于标题，另一种用于正文）
最小字号为 11px

您的简历不需要超级漂亮和花哨，它只需要看起来整洁且赏心悦目。如果您有闲钱，创建美观且对 ATS 友好的简历的最快方法是从 FAANG Tech Leads 购买简历模板。

工作经验部分

简历的工作经验部分是最重要的，应该占据简历的大部分空间。在本节中突出您对过去或当前雇主业务目标的贡献非常重要，

为了提高简历的 ATS 排名，请在简历中尽可能多地散布“前端”。如果您的官方头衔是“软件工程师”，但您在工作中做了大量的前端开发，请考虑将您的头衔改为“前端工程师”/“前端软件工程师”/“软件工程师（前端）”，以提高相关性。

人们常犯的错误是没有提供足够多的关于他们的经验和成就的细节。为了脱颖而出，提供关于您的经验和成就的规模、复杂性和影响的足够信息非常重要。

错误 👎：“使用 HTML、CSS 和 JavaScript 构建了一个网站”
更好 👍：“构建了一个高性能的电子商务网站，允许用户浏览数百个商品，添加到他们的购物车并通过 PayPal 结账。该网站有 20k MAU，加载时间不到 2 秒，Lighthouse 评分为 98。使用的技术：Next.js、React、GraphQL、CSS 模块”

以下是一个适合提及的与前端相关的技术成就的非详尽列表：

产品工作：详细说明在产品中构建的功能
性能：进行的性能改进以及由此带来的百分比增益。例如，页面加载大小、页面加载时间、Lighthouse 分数改进等。
测试：编写的测试数量、它们涵盖了多少关键流程、测试覆盖率的 % 增加
SEO：SEO 错误/警告的 % 或数值减少。如果公司使用 SEO 工具（如 Ahrefs 和 Semrush），则此指标很容易获得
可访问性 (a11y)：修复的 a11y 错误数量、改进以满足 WCAG AA/AAA 级一致性的流程数量、a11y 改进的组件数量
工具：代码库中使用的技术现代化，例如将 jQuery 代码库迁移到 React，通过引入 TypeScript 提高类型安全性。描述产品或提及代码行数/工程师的大概数量，以更好地了解规模和复杂性

技能部分

"技能"部分是您拥有的语言和技术的列表，当 ATS/招聘人员/招聘经理阅读本节时，它充当快速清单/摘要。至少，您应该为“语言”和“技术”类别提供两个列表项：

由于构建前端应用程序需要大量不同的技术，您可能会发现您需要在简历的技能部分添加许多技术。但是，不要添加每一种技术！这将稀释真正重要的技能的权重。优先考虑以下语言/技术：

2. 仅列出影响架构的关键技术

像 React 这样的库极大地影响了其他伴随的技术选择，而像 Underscore/Lodash 这样的库是与架构无关的，可以轻松替换。优先考虑前者，并省略易于替换的小型/实用程序库。

3. 广为人知或迅速普及

这表明您紧跟现代前端生态系统。该公司可能也在考虑转向该技术，如果您在这方面有经验，那将是一个加分项。

4. 展示您的广度

即使您确实熟悉 React、Angular 和 Vue（所有前端视图框架），列出所有这些也是多余的。很少有职位列表会列出多个用于相同目的的技术（如果这样做，则是一个危险信号）。添加太多技术（尤其是同一类别中的技术）会使读者更难了解您的技能。

尝试列出至少一个且最多两个属于以下类别的技术。并非所有类别都适用于您，因此仅包括相关的类别。下面显示了流行的示例。

JavaScript 库：React、Angular、Vue、Svelte
元框架：Next.js、Gatsby、Nuxt、SvelteKit
状态管理：Redux、Flux、Jotai、Zustand、Relay
CSS：CSS Modules、Styled Components、Tailwind CSS、Sass、Less
CSS 框架：Bootstrap、MUI、Chakra UI、Bulma
单元测试：Jest、Vitest、Storybook、Mocha、Jasmine、Karma
数据获取：GraphQL、tRPC、TanStack Query、swr
集成测试：Cypress、Selenium、Puppeteer、WebdriverIO、Playwright
语言工具：Babel、TypeScript、Flow、ESLint
构建工具（可选）：webpack、Vite、Parcel、Gulp、Rollup、Browserify
包管理（可选）：npm、Yarn、pnpm

示例

这应该就是我们简历上的“技能”部分的样子：

语言：HTML、CSS、JavaScript、TypeScript
技术：React、Next.js、Tailwind CSS、Jest、Storybook、Cypress、React Query、Yarn、webpack

这正是用于构建 GreatFrontEnd 的技术栈。您绝对应该在“语言”项下列出 HTML、CSS、JavaScript，否则就会出现严重问题。

前端领域发展迅速，每年都会出现新的 JavaScript 框架和 CSS 方法。在您的简历上拥有项目表明您对该领域充满热情，并付出了额外的努力来跟上最新的前端技术，尤其是在您的工作中没有使用这些技术的情况下，这是一个巨大的积极信号。列出每个项目使用的技术，尤其是如果它们是公司使用的现代技术。它有助于 ATS 排名，并在读者心中留下更深刻的印象。如果可能，将代码放在 GitHub 上，并使用产品的屏幕截图完善 README。将项目的代码和实时网站的链接添加到您的简历中。

开源贡献，尤其是对复杂代码库的非平凡更改，被视为技术能力的标志。如果您创建了开源项目或维护了开源项目，那就更好了。

摘要

虽然 Tech Interview Handbook 的一般软件工程师简历提示对于前端工程师来说已经足够了，但上述提示将帮助您提升前端工程师的简历，并使其更上一层楼。

前端工程师简历终极指南