2022 年前端工程师学习路线图(完整版)

article/2025/11/11 6:31:28

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

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

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

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

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

  • 单机写基础网页

  • 联机高效写网页

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

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

单机写基础网页

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

你一个人使用 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 年作为一名前端工程师需要学习的内容,以及给出了详细的学习路线图和对应的学习资源,当然有些资源都是国外的,需要自备科学上网工具,后续会基于这条学习路线图进行完善,并且补充详细的中文学习资源,敬请期待。

/ 感谢支持 /

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

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

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

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦


http://chatgpt.dhexx.cn/article/QK081dIS.shtml

相关文章

前端学习路线(2023版)超详细

一:前端开发基本功 俗话说的好“不积跬步,无以至千里”,学习也是一样的从简单的基础的知识点开始慢慢积累,首先就是掌握前端语言的基础知识3大部分(HTML、CSS、页面制作工具)其中包含了元素和属性、表单和图…

2023版完整版web前端学习路线图(超详细自学路线)

跟着路线图认真坚持学习从前端小白到大神不是梦,0基础看这一篇足矣! 学们记得加关注点赞收藏,自学路上不迷糊! 零基础小白自学前端路线图速览: 阶段一:核心基础入门 前端计算机常识 ➾ htmlcss基础 ➾ h…

ionic4的ion-searchbar的setFocus()方法使用

使用场景: app的某个页面需要一个搜索功能:1. 点击搜索图标打开一个新的搜索页2. 加载页面的同时给搜索框设置焦点、触发键盘。(提升用户的体验,类似于微信的搜索功能操作)具体方法: 在对应的ts文件中引入…

setFocus不能生效的问题

focusInEvent只有在对象显示出来的情况下设定setFocus才可以触发。这一点help手册里有说明: 转一篇文章如下:http://blog.csdn.net/alex201030273437/article/details/8193757 focus问题曾经困扰了我一些时间。过程中也朋到了很多麻烦。现在总结一下&…

html 表单控件光标获取,4.4、表单插件,设置焦点,this.View.GetControl().SetFocus()

续 业务场景: 1、设置焦点,例如设置了必录项,没填,自动跳转到必录项上面,判断哪些值没有录入; 2、条码扫描,固定在一个焦点; 1、注释,上一节代码 2、//获取焦点,备注this…

主窗口给按钮控件发送消息 BN_CLICKED和BN_SETFOCUS和BN_KILLFOUCS

先说明一下,按钮控件的消息有很多种,下面的列表是按钮发送的消息,其中用的比较多是BN_CLICKED和BN_SETFOCUS和BN_KILLFOUCS /** User Button Notification Codes*/ #define BN_CLICKED 0 #define BN_PAINT 1 #define BN…

vba 判断文本框内容是否为空_VBA代码用SetFocus精确控制焦点事件

VBA++ 题记: 静下心,多学习有用的知识,多提高自己的水平和能力,这才是正道。时间就像一张网,你撒在哪里,你的收获就在哪里。谨记自己的方向,这是路之所在。适当节制自我的各种欲望,谁都逃不过时间的历练,谁都是命运的行者,谁都是在人生的道路上一步一趋。你要做的,是…

Qt setFocus无法生效问题

setFocus 无法生效的问题 官方文档说的很明白当前部件或者其父部件必须是active window. 所以 mywidget.activateWindow() mywidget.setFocus()但是有些时候这样也不会获得焦点,比如当自己内部需要setFocus的时候。可以通过focusOutEvent() or focusInEvent(&#x…

QLineEdit setFocus失效问题

QLineEdit setFocus失效问题 目标效果: 弹窗弹出后,弹窗上的输入框获得焦点,以便不必再点击输入框就可以直接输入。 但在我通过一些方式为这个弹窗添加了背景遮罩后,发现输入框没有自动获得焦点了。 最终解决方法 激活弹窗。添…

【Python】【setFocus】焦点

以此文为例子展示setFocus()的用法 1.无焦点 self.setFocus()#设置焦点,下文演示有无焦点的区别 2.焦点默认在文本框 #self.setFocus()#设置焦点,下文演示有无焦点的区别 3.设置输入焦点 在某一时刻,只有一个控件(或根本没有)可以获得输入…

解决Eclipse的Validating速度太慢的方法

以下操作对项目不会有影响,请放心操作。 第一步: 第二步:

在Eclipse里Validating非常缓慢

解决: 1.打开eclipse,点击【window】菜单,选择【preferences】选项 2.在左侧搜索【validation】,在右侧可以看到eclipse进行的自动检查都有哪些内容 3.将Manual(手动)保持不动,将build里面全部去…

亲测解决INFO Validating config

INFO Validating configFATAL YAMLException: duplicated mapping key at line 859, column -321: model: 把model项合并即可,注意你的报错可能块是不一样的。

MyEclipse的Validating速度太慢优化

最近在做项目的时候经常因为各种原因重启myeclipse,当重新打开后会发现一直在执行Validating,简直是龟速啊,后来在百度上看到这样的设置,虽然不知道这个是干什么的,但是修改了之后在此重启时确实变快了,也还…

HV000030: 使用@Size validating type ‘java.lang.Integer‘. Check configuration for ‘*‘ 及 Validated注解使用示例

javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint javax.validation.constraints.Size validating type java.lang.Integer. Check configuration for channel Size不支持数值类型校验,仅支持字符、集合、数组的长…

Eclipse Validating缓慢的优化

使用Eclipse的人基本都有这种情况,如图: 各种等待有木有,各种崩溃啊有木有,反正我是觉得挺烦的,但是也不知道是干嘛的,如果取消了,造成程序出问题,就是给自己找麻烦,我知…

Kubernetes ImagePolicyWebhook与ValidatingAdmissionWebhook【3】validating_admission.go源码解析

文章目录 1. 代码依赖2. handler的validating_admission.go2.1 metav1.status是什么?2.2 admissionReview.Response.Result是什么? 3. 总结 相关阅读: Kubernetes ImagePolicyWebhook与ValidatingAdmissionWebhook【1】动手实践感受区别所在…

Eclipse Validating的作用及优化

今天接手一个小项目,一切导入正常。可是右下角一直出现 28% Validating 项目名 ,如下所示 各种等待有木有,各种崩溃啊有木有,反正我是觉得挺烦的,但是也不知道是干嘛的,如果取消了,造成程序出问…

validating project时间过长,解决办法

validating project时间过长,解决办法 另外,可能有时项目怎么clean也还是原来的样子,可以在浏览器利用快捷键ctrlshiftdelete,清除缓存之后再试试。

解决No validator could be found for constraint ‘javax.validation.constraints.NotBlank‘ validating type

文章目录 1. 复现问题2. 分析问题3. 解决问题4. 重要补充5. 其他说明 1. 复现问题 今天在使用Knife4j调用后端接口,报出如下错误: javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint javax.validation.…