104 lines
8.9 KiB
Plaintext
104 lines
8.9 KiB
Plaintext
---
|
||
title: 前端工程师简历终极指南
|
||
description: 获取写作技巧、范例和最佳实践，帮助您入围下一份前端工作
|
||
seo_title: 前端工程师简历指南 | 技巧、示例、策略
|
||
seo_description: 使用我们的终极指南制作完美的前端工程师简历。获取前端特定技巧、真实示例和策略，帮助您获得前端职位。
|
||
social_title: 前端工程师简历指南 | 前端面试手册
|
||
---
|
||
|
||
为了获得前端工程师的职位面试机会，我们必须提交一份通过公司简历筛选流程的简历。 现有的资源很多，可以帮助您制作一份优秀的软件工程师简历，但很少有专门针对前端工程师的。 有关一般的软件工程师简历技巧，请参阅 [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](https://www.faangtechleads.com/) 购买简历模板。
|
||
|
||
## 工作经验部分
|
||
|
||
简历的工作经验部分是最重要的，应该占据简历的大部分空间。 在本节中突出您对过去或当前雇主业务目标的贡献非常重要，
|
||
|
||
为了提高简历的 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/招聘人员/招聘经理阅读本节时，它充当快速清单/摘要。 至少，您应该为“语言”和“技术”类别提供两个列表项：
|
||
|
||
由于构建前端应用程序需要大量不同的技术，您可能会发现您需要在简历的技能部分添加许多技术。但是，不要添加每一种技术！这将稀释真正重要的技能的权重。优先考虑以下语言/技术：
|
||
|
||
### 1. 出现在职位列表中
|
||
|
||
如果技能出现在职位列表中，并且您有相关经验，那么您绝对应该添加它。
|
||
|
||
### 2. 仅列出影响架构的关键技术
|
||
|
||
像 React 这样的库极大地影响了其他伴随的技术选择，而像 Underscore/Lodash 这样的库是与架构无关的，可以轻松替换。优先考虑前者，并省略易于替换的小型/实用程序库。
|
||
|
||
### 3. 广为人知或迅速普及
|
||
|
||
这表明您紧跟现代前端生态系统。该公司可能也在考虑转向该技术，如果您在这方面有经验，那将是一个加分项。
|
||
|
||
### 4. 展示您的广度
|
||
|
||
即使您确实熟悉 React、Angular 和 Vue（所有前端视图框架），列出所有这些也是多余的。很少有职位列表会列出多个用于相同目的的技术（如果这样做，则是一个危险信号）。添加太多技术（尤其是同一类别中的技术）会使读者更难了解您的技能。
|
||
|
||
尝试列出**至少一个且最多两个**属于以下类别的技术。并非所有类别都适用于您，因此仅包括相关的类别。下面显示了流行的示例。
|
||
|
||
* **JavaScript 库**：[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
|
||
* **元框架**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/)
|
||
* **状态管理**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/)
|
||
* **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)
|
||
* **CSS 框架**：[Bootstrap](https://getbootstrap.com/)、[MUI](https://mui.com/)、[Chakra UI](https://chakra-ui.com/)、[Bulma](https://bulma.io/)
|
||
* **单元测试**：[Jest](https://jestjs.io/)、[Vitest](https://vitest.dev/)、[Storybook](https://storybook.js.org/)、[Mocha](https://mochajs.org/)、[Jasmine](https://jasmine.github.io/)、[Karma](https://karma-runner.github.io/latest/index.html)
|
||
* **数据获取**：[GraphQL](https://graphql.org/)、[tRPC](https://trpc.io/)、[TanStack Query](https://tanstack.com/query/v3/)、[swr](https://swr.vercel.app/)
|
||
* **集成测试**：[Cypress](https://www.cypress.io/)、[Selenium](https://www.selenium.dev/)、[Puppeteer](https://pptr.dev/)、[WebdriverIO](https://webdriver.io/)、[Playwright](https://playwright.dev/)
|
||
* **语言工具**：[Babel](https://babeljs.io/)、[TypeScript](https://www.typescriptlang.org/)、[Flow](https://flow.org/)、[ESLint](https://eslint.org/)
|
||
* **构建工具（可选）**：[webpack](https://webpack.js.org/)、[Vite](https://vitejs.dev/)、[Parcel](https://parceljs.org/)、[Gulp](https://gulpjs.com/)、[Rollup](https://rollupjs.org/)、[Browserify](https://browserify.org/)
|
||
* **包管理（可选）**：[npm](https://www.npmjs.com/)、[Yarn](https://yarnpkg.com/)、[pnpm](https://pnpm.io/)
|
||
|
||
### 示例
|
||
|
||
这应该就是我们简历上的“技能”部分的样子：
|
||
|
||
* **语言**：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 的一般软件工程师简历提示](https://www.techinterviewhandbook.org/resume/) 对于前端工程师来说已经足够了，但上述提示将帮助您提升前端工程师的简历，并使其更上一层楼。
|