2022 年前端工程师学习路线图（完整版）

前端发展越来越快，每天都有数不胜数的技术发布。

想要入门前端却没有一条较为理想的路径？

在这个世界里兜兜转转了很久还是感觉在外围搬砖？

那么你可能需要这份技术学习路线图！

我们把学习前端分为三重境界：

• 单机写基础网页

• 联机高效写网页

• 让网页能够被更多人使用

接下来我们就通过介绍这三重境界来为你呈现详细的学习路线图。

单机写基础网页

何为单机呢？其实就是一个人 🌚

你一个人使用 Web 基础技术开发网站，没有将代码分享给别人（你可能不知道程序世界的代码分享规则），同时只是在本地环境运行你的网站，你甚至对网站如何能把其他人访问到毫无头绪。

这个阶段也是成为一名前端工程师最最基础的一环，大部分初学者还停留在这个阶段，那么我们来看一下这个阶段需要什么样的技能。

HTML + CSS + JavaScript

没错，其实就是我们耳熟能详的前端三剑客，虽然看起来是最最入门的内容，但是需要了解的内容也不少，就类似我们需要先学 26 个字母，学各种汉字基础，才能写作或者创作诗歌一样。了解这三门技术大致需要了解那些内容以及有哪些学习资源推荐呢？

HTML

HTML 代表超文本标记语言。 它用于前端，为网页提供结构，您可以使用 CSS 设置样式并使用 JavaScript 进行交互。

HTML 的学习大致需要 6 个阶段：

• 学习基础知识：https://www.w3schools.com/html/html_intro.asp

• 编写语义化的 HTML：https://www.w3schools.com/html/html5_semantic_elements.asp

• 了解表单与校验：https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

• 遵守一些约定与最佳实践：https://github.com/hail2u/html-best-practices

• 了解可访问性：https://www.w3schools.com/accessibility/index.php

• 了解 SEO 基础：https://developers.google.com/search/docs

CSS

CSS 或级联样式表是用于设置任何网站前端样式的语言。 CSS 是万维网的基础技术，与 HTML 和 JavaScript 并列。

学习基础的 CSS 大致需要 3 个阶段：

• 学习基础知识：https://www.w3schools.com/css/

• 学会如何布局，其中布局又包括以下知识：

  • Floats 浮动：https://css-tricks.com/all-about-floats/
  • Positioning 定位：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
  • Display 展示：https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/
  • 盒子模型：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
  • CSS 网格：https://cssgridgarden.com/
  • Flex 弹性盒布局：https://flexboxfroggy.com/

• 学习媒体查询知识与 Web 响应式设计：https://www.freecodecamp.org/learn/responsive-web-design/

JavaScript

JavaScript 允许您向页面添加交互性。 您可能在网站上看到的常见示例是滑块、点击交互、弹出窗口等。

学习基础的 JavaScript 大致需要 5 个阶段：

• 基础的语法：https://javascript.info/

• 学习 DOM 操作：https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/

• 学习 Fecth API 与 Ajax（XHR）：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

• 学习 ES6 与模块化 JavaScript：https://www.javascripttutorial.net/es6/

• 理解进阶知识

  • Hositing：https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

  • 事件模型：https://javascript.info/bubbling-and-capturing

  • 作用域：

    • https://developer.mozilla.org/en-US/docs/Glossary/Scope
    • https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

  • 原型：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

  • Shadow DOM：https://www.youtube.com/watch?v=7Tok22qxPzQ

  • 严格模式等：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

了解了上面的这些内容，你基本上算是一名基础的前端工程师了，你可以编写各种各样的基础界面，也应该在学习的过程中产出了很多个 DEMO 了。

联机高效写网页

请注意我们这一小节的关键词：联机、高效。

在这个阶段，你将学会如下知识：

• 如何以程序员的方式将代码与人分享并能够尝试参与别人代码的改进

• 高效的编写网站

• 理解网站是如何互通的，你是如何访问的网页的

基于上述的目标，这一阶段的关键技术如下：

• Git、Github

• Internet、Network 原理

• 开发框架：

  • JS/HTML：Reatc/Redux、Vue/Vuex 等
  • CSS：Sass、Styled Components、TailwindCSS 等
  • 构建：Webpack、Babel、Npm Scripts 等
  • 包管理：Yarn、Npm 等

• 开发规范

  • CSS：BEM 等
  • JavaScript：Airbnb JavaScript Style Guide 等

Git

Git 是一种版本控制系统。

版本控制系统允许您跟踪代码库/文件随时间的变化。 它们允许您毫无问题地返回到代码库的某个先前版本。 此外，它们还有助于与处理相同代码的人协作——如果您曾经与其他人合作过一个项目，您可能已经知道将其他人的更改复制和合并到您的代码库中的挫败感； 版本控制系统可以让你摆脱这个问题。

你可以通过下面的链接学习它：

• https://www.youtube.com/watch?v=zbKdDsNNOhg

• https://www.youtube.com/watch?v=SWYqp7iY_Tc

• https://youtu.be/Y9XZQO1n_7c?t=21

Github

GitHub 是使用 Git 进行软件开发和版本控制的互联网托管提供商。 它提供了 Git 的分布式版本控制和源代码管理功能，以及它自己的特性。

你可以通过下面的链接学习它：

• https://github.com/

• https://docs.github.com/en/get-started/quickstart/hello-world

Internet

互联网是一个全球性的计算机网络，它们相互连接，通过一组标准化的协议进行通信。

• 了解互联网是如何工作的？

  • https://www.vox.com/2014/6/16/18076282/the-internet
  • http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm

• 什么是 HTTP？

  • https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
  • https://kamranahmed.info/blog/2016/08/13/http-in-depth/

HTTP 是基于 TCP/IP 的应用层通信协议，它标准化了客户端和服务器之间的通信方式。 它定义了如何通过 Internet 请求和传输内容。

• 什么是浏览器？它们是如何工作的？

  • https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
  • https://www.browserstack.com/guide/browser-rendering-engine
  • https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

Web 浏览器是一种软件应用程序，它使用户能够通过其图形用户界面访问和显示网页或其他在线内容。

• 什么是 DNS？它们是如何工作的？

  • https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/

域名系统 (DNS) 是 Internet 的电话簿。 人类通过域名（如 nytimes.com 或 espn.com）在线访问信息。 Web 浏览器通过 Internet 协议 (IP) 地址进行交互。 DNS 将域名转换为 IP 地址，因此浏览器可以加载 Internet 资源

• 什么是域名？

  • https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name

名是用于访问网站的唯一且易于记忆的地址，例如“google.com”和“facebook.com”。 借助 DNS 系统，用户可以使用域名连接到网站。

• 什么是主机？

  • https://www.youtube.com/watch?v=htbY9-yggB0

虚拟主机是一种在线服务，可让您将网站文件发布到互联网上。 因此，任何可以访问互联网的人都可以访问您的网站。

JavaScript 框架

React

• https://reactjs.org/

• https://reactjs.org/tutorial/tutorial.html

React 是最流行的用于构建用户界面的前端 JavaScript 库。 React 还可以使用 Node 在服务器上渲染，并使用 React Native 为移动应用程序提供动力。

Redux

• https://redux.js.org/

• https://redux.js.org/introduction/getting-started

Redux 是 JavaScript 应用程序的可预测状态容器。 它可以帮助您编写行为一致、在不同环境（客户端、服务器和本机）中运行并且易于测试的应用程序。 最重要的是，它提供了出色的开发人员体验，例如实时代码编辑与时间旅行调试器相结合。

当然状态管理方面目前也有 Mobx 与 Recoil 等有力的竞争者。

上述的是 React 生态，此外 JavaScript 社区还有 Vue 与 Angular 等其他非常有竞争力的框架。

CSS 框架

Styled Components

• https://github.com/styled-components/styled-components

利用标记的模板文字（最近添加到 JavaScript）和 CSS 的强大功能，styled-components 允许您编写实际的 CSS 代码来设置组件的样式。 它还删除了组件和样式之间的映射——将组件用作低级样式构造！

CSS Modules

• http://www.ruanyifeng.com/blog/2016/06/css_modules.html

给 CSS 加入了局部作用域与模块依赖

Sass

• http://www.ruanyifeng.com/blog/2012/06/sass.html

为 CSS 加入编程元素，被称为 CSS 预处理器

TailwindCSS

• https://tailwindcss.com/

供一系列辅助类，直接为 HTML 标记添加这些预设的辅助类就可以快速完成一组专业的网站。

构建相关

Webpack

• https://webpack.js.org/

Webpack 是一个模块打包器。 它的主要目的是捆绑 JavaScript 文件以在浏览器中使用，但它也能够转换、捆绑或打包几乎任何资源或资产。

除了 Webpack，目前前端圈比较火的还有：

• 为库打包的更佳选择：Rollup

• 基于浏览器 ESM 的 Bundless 解决方案：Vite

Npm scripts

• http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

组合 Yarn、Npm、Pnpm 等包管理一起使用，来便捷的执行一系列脚本

Babel

• http://www.ruanyifeng.com/blog/2016/01/babel.html

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行

开发规范

BEM

• https://en.bem.info/

• https://juejin.cn/post/6844903672162304013

块、元素、修饰符方法（通常称为 BEM）是 HTML 和 CSS 中类的流行命名约定。 由 Yandex 团队开发，其目标是帮助开发人员更好地理解给定项目中 HTML 和 CSS 之间的关系。

JavaScript Style Guide

• https://github.com/airbnb/javascript

编写 JavaScript 最合理的方法之一

经历上面的一阵狂风乱炸的洗礼之后，你现在已经能够理解如下知识了：

• 网页是如何运行的

• 如何使用框架（JS、CSS 框架）、现代的前端工程化集合工具辅助你高效的编写界面

• 在编写代码的时候，遵守相关的规范，写出更容易让其他人读懂的代码

• 将你的代码使用版本控制系统 Git 来追踪，并通过 Github 将你的代码分析给其他程序员学习

让网页被更多人使用

如果你想让你的网站被更多人使用，甚至是你要开发一款产品，完成你的创业目标，那么你可能还需要一些额外的知识辅助你。

在这个阶段你需要了解的知识点如下：

• 确保你的网站安全：HTTPS、Cors、内容安全策略等

• 确保的应用尽可能少 BUG：TypeScript、Jest、Cypress、Enzyme、React Testing Library

• 让用户在没有网的情况下也能使用：PWA、Storage、Web Socket、Service Workers 等

• 让你的网站被更快的访问：Lighthouse、Devtools、Performance Metrics、RAIL Model、PRPL Pattern

• 让你的网站能更好的被索引：SSR

• 让你的应用分散在各个平台：React Native、Flutter、Electron

• 让你的网站也能够处理更复杂的动效：WebAssembly 等

Web 安全

HTTPS

• https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/

• https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https

• https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https

HTTPS 是一种在 Web 服务器和浏览器之间发送数据的安全方式。

CORS

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

跨域资源共享 (CORS) 是一种基于 HTTP 标头的机制，它允许服务器指示除其自身之外的任何来源（域、方案或端口），浏览器应允许从中加载资源。

CSP（内容安全策略）

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

• https://developers.google.com/web/fundamentals/security/csp

内容安全策略是一种计算机安全标准，用于防止在受信任的网页上下文中执行恶意内容而导致的跨站点脚本、点击劫持和其他代码注入攻击。

测试工具

Jest

• https://jestjs.io/

Jest 是一个令人愉快的 JavaScript 测试框架，专注于简单性。 它适用于使用以下项目的项目：Babel、TypeScript、Node、React、Angular、Vue 等等！

React Testing Library

• https://github.com/testing-library/react-testing-library

完备的 React DOM 的测试辅助库

Cypress

• https://www.cypress.io/

对应用进行端到端测试

Enzyme

• https://github.com/enzymejs/enzyme

测试 React 的辅助库

类型检查工具

TypeScript

• https://www.typescriptlang.org/

• https://www.typescriptlang.org/docs/

• https://www.typescriptlang.org/docs/handbook/intro.html

TypeScript 是一种基于 JavaScript 的强类型编程语言，可为您提供任何规模的更好的工具。

离线使用

Web 最新的 Progressive Web Apps （PWA）技术，使得 Web 网站可以像 App 一样，拥有离线使用、推送通知等功能。

PWA 主要包含下面几个部分：

• Storage

• WebSockets

• Service Workers

• Location

• Notifications

• Device Orientation

• Payments

• Credentials

主要的参考学习资源如下：

• https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

• https://github.com/GoogleChrome/workbox

性能相关

Web 性能是加载时间和运行时的客观测量和感知用户体验。 Web 性能是指网站加载、变得交互和响应所需的时间，以及在用户交互期间内容的流畅程度。

性能涉及到计算、衡量与改进性能，主要涉及下面这些知识点：

• PRPL Pattern

• RAIL Model

• Performance Metrics

• Lighthouse

• Devtools

主要的参考学习资源如下：

• https://developer.mozilla.org/zh-CN/docs/Web/Performance

• https://web.dev/

SEO 相关

SEO（Search Engine Optimization）—— 搜索引擎优化，目的是帮助我们的网站在Google或者Baidu搜索的时候排名会提升靠前。

Next.js

• https://nextjs.org/

• https://nextjs.org/docs/getting-started

• https://www.freecodecamp.org/news/the-next-js-handbook/

Next.js 是一个构建在 Node.js 之上的开源开发框架，支持基于 React 的 Web 应用程序功能，例如服务器端渲染和生成静态网站。

多平台

React Native

• https://reactnative.cn/

• https://github.com/facebook/react-native

使用 React 来开发移动端应用，如 Android 或 iOS。

Flutter

• https://flutter.cn/

• https://flutter-io.cn/

Flutter 为应用开发带来了革新： 只要一套代码库（Dart），即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用

Electron

• https://www.electronjs.org/

• https://wizardforcel.gitbooks.io/electron-doc/content/tutorial/tutorial.html

Electron（原名为Atom Shell）是GitHub开发的一个开源框架。它通过使用Node.js（作为后端）和Chromium的渲染引擎（作为前端）完成跨平台的桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发，著名项目包括GitHub的Atom和微软的Visual Studio Code。

高性能应用

WebAssembly

• https://developer.mozilla.org/zh-CN/docs/WebAssembly

• https://juejin.cn/post/7035991254257106958

WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。

当你学完了这个部分的内容，基本上已经是算是一位高阶的前端工程师了，能够在任何大厂胜任各种研发工作，当然能够坚持到这里不容易，需要持续的努力，加油💪

写在最后

本文从三个维度切入了在 2022 年作为一名前端工程师需要学习的内容，以及给出了详细的学习路线图和对应的学习资源，当然有些资源都是国外的，需要自备***工具，后续会基于这条学习路线图进行完善，并且补充详细的中文学习资源，敬请期待。

❤️/ 感谢支持 /

以上便是本次分享的全部内容，希望对你有所帮助^_^

喜欢的话别忘了 分享、点赞、收藏 三连哦~

欢迎关注公众号 程序员巴士，来自字节、虾皮、招银的三端兄弟，分享编程经验、技术干货与职业规划，助你少走弯路进大厂。