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

??/ 感谢支持 /

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

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

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

TML常用标签

1. web标准

1.1 web标准的构成

主要包括结构、表现和行为三个方面。

标准说明结构用于对 网页元素 进行整理和分类（HTML）表现用于设置网页元素的 外观样式 （CSS）行为网页模型的定义及交互的编写（JavaScript）

如果将web标准比喻为一只鸟，则

结构=身体
表现=羽毛
行为=动作（飞行、站立等）

1.2 标签关系

双标签关系分为：

包含关系（父子）
并列关系（兄弟）

(1)包含关系

<!--head标签包含title标签-->
<head>
    <title></title>
</head>

(2)并列关系

<!--head标签与body标签并列-->
<head></head>
<body></body>

2. HTML基本结构

标签名定义<html></html>html标签<head></head>文档的头部<title></title>文档的标题<body></body>文档的主体

<!DOCTYPE html>   <!--文档类型声明标签-->  
<html lang="en">    <!--en:英语，zh-CN:中文-->
    
    <head>
        <!--字符集，UTF-8为万国码，统一使用-->
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        
    </body>
    
</html>

3. HTML常用标签

3.1 标题标签

一个标题独占一行。（块级元素）

<h1>
    一级标题（字号最大）
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
    六级标题（字号最小）
</h6>

3.2 段落标签

用于将HTML文档分割为若干段落。

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行
段落之间有空隙

<p>
    这是一个段落
</p>

3.3 换行标签

用于强制换行。

特点：

单标签
换行没有像段落那样的空隙

<br>这是换行标签

3.4 文本格式化标签

语义标签加粗<strong></strong>倾斜<em></em>删除线<del></del>下划线<ins></ins>

3.5 盒子标签

用于界面布局。

特点：

div一行只能放一个（块级元素）
span一行可以放多个（行级元素）

<div>
    这是大盒子
</div>
<span>这是小盒子</span>

3.6 图像标签和路径

(1)图像标签

用于定义页面中的图像。

<!--属性与属性之间用空格分开-->
<img src="图像的url" alt="" title="">

属性说明src图片路径（ 必须属性 ）alt图像不能显示时的替换文本title鼠标放到图像上显示的提示文本width设置图像的宽度height设置图像的高度border设置图像的边框粗细（在CSS中修改）

注：图像的宽和高一般只修改其中一个，另一个会随之调整。

(2)路径

相对路径：文件相对于HTML页面的位置

相对路径分类符号说明同一级src="文件名"下一级/src="同一级文件夹名称/文件名"上一级../src="../文件名"

绝对路径：完整的路径名称（一般很少用）。eg. C:\xxx\xxxx.jpg

注意：绝对路径用“\”分隔，相对路径用“/”分隔。

3.7 超链接标签和链接分类

(1)超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性作用href链接目标的url（ 必须属性 ）target链接页面的打方式。_self：在当前窗口打开（默认值），_blank：在新窗口打开

(2)链接分类

外部链接：例如http://www.bilibili.com
内部链接：网站内部页面之间的相互链接，例如index.html
空链接：#
下载链接：地址里是一个文件或压缩包
网页元素链接：在网页中的各种网页元素都可以添加超链接
锚点链接：可以快速定位到页面中的某个位置链接：<a href="#名字"></a>找到目标位置标签，里面添加一个id属性，<h2 id="名字"></h2>返回顶部：<a href="#"></a>

3.8 注释和特殊字符

(1)注释

<!--这是一行注释-->

(2)特殊字符

注：重点记住前三个。

大家平时学习web前端的时候肯定会遇到很多问题，小编我为大家准备了web前端学习资料，将这些免费分享给大家！如果想要的可以找我领取

领取方式：

如果想获取这些学习资料，先关注我然后私信小编“01”即可免费领取！（私信方法：点击我头像进我主页右上面有个私信按钮）

如果这篇文章对你有帮助，请记得给我来个评论+转发噢

SS盒子模型

提到盒子大家应该可以想到很多生活中的例子，例如纸盒、收纳盒、垃圾桶等等立体的盒子。这些盒子和CSS中的盒子有很多的相似点，都有高度宽度都可以装东西。那么我们来一起探究一下什么是盒子模型？
概念：使用盒子模型来盛放网页中的各种元素，在网页设计中，内容指文字、图片等元素，也可以是盒子之间的嵌套。填充只有宽度高度属性，可以理解为填充物（padding），而盒子的材料厚度就是边框（大小、线性、颜色），盒子与盒子之间的距离（margin）就是间距。
Box Model CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型的组成由width、height、border、padding、margin来描述。

margin是什么？

例如生活中的箱子，两个箱子并排放在一起，他们两个之间的间距（margin）被称为外边距。分为上右下左四个方向。

padding是什么？

当我们往盒子里边放了一些贵重的物品时（小心易碎！），需要在物品和盒子之间放置一些填充物，这些填充物（padding）被称为内边距。同样内边距分为上右下左四个方向。

在盒子模型中，width,height指的是内容区域的的尺寸。增加内外边距不会影响内容区域的尺寸，但是会影响元素的总尺寸。所以当我们去计算一个元素应该在页面呈现多大我们需要去合理的设置相关的属性达到我们需要的效果。

探究一下padding与margin不同的值所体现的效果。

example

在线咨询

上一篇：pywebview：python更好用的web框架学
下一篇：JavaScript 表格搜索

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商