前端技术路线安排

入门阶段

描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。

资源

freeCodecamp 在线编程：learn.freecodecamp.one/

阿里云前端实战学习：edu.aliyun.com/roadmap/fro…

W3Cschool 编程入门实战：www.w3cschool.cn/codecamp/

pink老师前端入门教程：www.bilibili.com/video/BV14J…

开发工具

浏览器

Chrome（强烈推荐）

Edge

Firefox

Safari

编辑器

VSCode（强烈推荐）

WebStorm

Sublime Text

HBuilder X

文档笔记

Markdown 语法

Typora

语雀

腾讯文档

石墨文档

HTML

描述：用于定义一个网页结构的基本技术。

资源：developer.mozilla.org/zh-CN/docs/…

基本语法

标签

分区 div

标题 h1 ~ h6

段落 p

图像 img

列表 ul / ol

超链接 a

表单 form

表格 table

框架 iframe

属性

HTML5 特性

localStorage

sessionStorage

Web SQL

语义化标签

浏览器支持

多媒体标签

Canvas 画布

❌ 内联 SVG

本地存储

Web Workers

应用缓存（Cache Manifest）

无障碍

CSS

描述：层叠样式表，用于设计风格和布局。

资源：developer.mozilla.org/zh-CN/docs/…

基本语法

引入方式

行内样式

内部样式表

外部样式表

选择器

后代选择器

子元素选择器

相邻兄弟选择器

通用选择器

标签选择器

id 选择器

class 选择器

属性选择器

派生选择器

组合选择器

伪选择器

选择器优先级

属性

px

em

rem

vw

vh

单位

背景

文本

字体

列表

表格

文档流

标准流

浮动流

定位流

内联元素 / 块状元素

盒子模型

content

padding

border

margin

浮动

设置浮动 float

清除浮动 clear

定位

static

absolute

fixed

relative

sticky

层叠规则

❗ BFC 和 IFC 机制

CSS3

媒体查询

Flex 布局

Grid 布局

瀑布流

响应式布局

动画

过渡

渐变

背景

边框

圆角

字体

2D / 3D 转换

JavaScript

描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。

资源：developer.mozilla.org/zh-CN/docs/…

基本语法

数据类型

对象 Object

数组 Array

函数 Function

字符串 String

数组 Number

布尔 Boolean

空值 Null

未定义 Undefined

Symbol

值类型

引用类型

数据类型转换

函数

全局调用

构造函数调用

函数方法调用

apply

call

概念

自定义函数

调用方式

闭包

对象

数字 Number

字符串 String 对象

日期 Date 对象

数组 Array

布尔 Boolean

算数 Math

概念

this

原型链和继承

常用对象

自定义对象

作用域（作用域链）

BOM API

DOM API

JSON

Ajax

JavaScript 执行机制

ES6+ 特性

描述：新引入的 JavaScript 语法特性。

资源：ES6 入门教程 es6.ruanyifeng.com/

let 和 const

变量解构赋值

对象扩展和新增方法

Symbol

Set 和 Map 数据结构

Promise & async / await 异步编程

Generator 函数异步编程

巩固基础

描述：学习前端、计算机、软件开发相关基础知识，并复习巩固上阶段学到的前端三件套。

资源

《JavaScript 高级程序设计》：www.code-nav.cn/rd/?rid=28e…

《JavaScript 忍者秘籍》：www.code-nav.cn/rd/?rid=28e…

目标：

熟悉前端三件套语法，尤其是 JavaScript，并了解互联网、域名、浏览器、服务器等，扎实前端程序员的基本功，为下面进入实战开发做准备。

前端基础知识

互联网

域名

DNS

服务器

浏览器

浏览器 DOM 事件流 / 事件委托

浏览器加载顺序

浏览器渲染过程

浏览器事件循环

浏览器同源策略

跨域解决方案

浏览器缓存

控制台调试技巧

HTTP

1xx 信息

2xx 成功

3xx 重定向

4xx 客户端错误

5xx 服务器错误

HTTP 1.0

HTTP 1.1

HTTP 2

HTTP 3

HTTP 请求过程

常见 HTTP 协议

HTTP 请求类别

常见状态码

WebSocket

Cookie

Session

HTTPS

计算机基础

算法和数据结构

时间 / 空间复杂度分析

数据结构

数组

字符串

队列

栈

链表

集合

哈希表

二叉树

算法

排序

双指针

查找

分治

动态规划

递归

回溯

贪心

位运算

DFS

BFS

图

计算机网络

HTTP 协议

网络模型

UDP / TCP 协议

操作系统

进程、线程

进程 / 线程间通讯方式

进程调度算法

进程 / 线程状态

死锁

内存管理

软件开发基础

设计模式

单例模式

代理模式

工厂模式

装饰者模式

观察者模式

策略模式

门面模式

Git 版本控制

常用命令

Linux 服务器

常用命令

正则表达式

前端工程化

描述：前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高开发过程中的开发效率，减少不必要的重复工作时间。

资源

什么是前端工程化？www.zhihu.com/question/43…

目标：至少学会一门主流的前端开发框架（Vue / React），并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站，可以试着仿一些知名站点。要求遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线，供他人访问。此外，建议抓住机会参与一些团队项目，感受团队开发模式和前端工程化的优势。

研发流程

技术选型

初始化

开发

本地测试

代码提交

编译、打包、构建

部署

集成测试

发布上线

监控运维

代码托管

描述：集中存储、备份你的代码，还能和团队成员协作开发。

GitHub

Gitee

GitLab

Node.JS

描述：一个开源与跨平台的 JavaScript 运行时环境。它是一个可用于几乎任何项目的流行工具！

资源

Node.js 官方教程：nodejs.cn/learn

Node.js 入门：cnodejs.org/getstart

包管理

描述：用于安装 Node.js 的扩展、工具等。

npm

yarn

❌ bower

✅ npx

开发框架

Express

Koa

Egg

开发框架

描述：解决特定的问题,提高开发效率、简化我们的代码复杂度。

CSS 框架

BootStrap

ailwind CSS

JavaScript 框架

Vue

Vue Router

Vuex

React

React DOM

React Router

Redux

MobX

React Hooks

❌ Angular

RxJS

NgRx

Svelte

UmiJS

封装库

组件库

LayUI

ElementUI（Vue）

VantUI（Vue）

Ant Design（React）

Material UI

数据可视化

AntV

Apache ECharts

HighCharts

D3.js

组件（插件）

富文本编辑器

弹窗

轮播图

工具库

jQuery

Lodash

Axios

时间处理 Moment.js

动效库

Animate.css

Ant Motion

字体图标库

IconFont

IconPark

Font Awesome

脚手架

描述：快速生成新项目的目录模板，提升开发效率和开发舒适性。

资源：www.jianshu.com/p/25ce8cf2e…

Vue CLI

create-react-app

Yeoman

前端架构设计

描述：一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流。

模块化

组件化

MVVM

设计原则

SPA 单页应用

多页应用

前端路由

PWA

有损服务

服务端渲染

描述：在服务端渲染 HTML 页面的模式。

资源：www.zhihu.com/question/37…

Next.js（React）

Nuxt.js（Vue）

❌ Universal（Angular）

BFF

描述：Backend For Frontend（服务于前端的后端），就是服务器设计 API 时会考虑前端的使用，并在服务端直接进行业务逻辑的处理。

资源：www.jianshu.com/p/eb1875c62…

GraphQL

微前端

描述：将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。

资源：zhuanlan.zhihu.com/p/96464401

qiankun

single-spa

CSS in JS

描述：用 JavaScript 来写 CSS。

资源：www.ruanyifeng.com/blog/2017/0…

内联样式

声明样式

引入样式

CSS 模块化

CSS Modules

styled-components

Styled JSX

Emotion

开发调试

描述：本地开发时热更新，提升开发效率。

webpack-dev-server

serve

内网穿透

描述：将内网外网通过 nat 隧道打通，让内网的网站、数据让外网可以访问。

Ngrok

NATAPP

CSS 预编译

描述：使用新的扩展语言以增强 CSS 的能力，并通过预编译的方式将其转换为浏览器认识的 CSS 代码。

SASS

PostCSS

Stylus

❌ LESS

测试

测试分类

UT 单元测试

SIT 系统集成测试

E2E 端到端测试

UAT 用户验收测试

Mock

描述：通过随机数据，模拟各种场景，增加单元测试的真实性。

Mock.js

测试框架

Jest

Enzyme

Puppeteer（Headless Browser）

Mocha

Jasmine

代码质量

开发规范

描述：依照规范写出的代码会更加合理。

资源：Airbnb 代码规范 github.com/BingKui/jav…

CSS Style Guide

JavaScript Style Guide

类型校验

TypeScript

代码检查

ESLint

StyleLint

代码风格

描述：根据配置自动格式化代码，统一格式。

Prettier

提交规范

约定式提交

提交检查

描述：在提交代码时触发一些操作，比如检查代码的风格等。

pre-commit

husky

构建工具

自动化构建

描述：按照配置好的流程自动打包构建项目，提高团队的开发效率，降低项目的维护难度。

Gulp

npm script

Grunt

打包工具

描述：将各种零散的资源文件打包为可在浏览器等环境运行的代码。

Webpack

Rollup

Vite

Parcel

Snowpack

CI / CD

描述：通过在应用开发阶段引入自动化来频繁向客户交付应用。

GitLab CI

Jenkins

部署

Web 服务器

Nginx

描述：高性能的 HTTP 和反向代理 web 服务器。

资源：腾讯云动手实验室 cloud.tencent.com/developer/l…

反向代理

解决跨域

改写请求

Apache

容器

Docker

描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。

资源：Docker 从入门到实践 vuepress.mirror.docker-practice.com/

Dockerfile

Kubernetes

部署策略

全量发布

蓝绿部署

滚动发布

灰度发布

监控告警

前端埋点

错误监控

性能监控

行为监控

前端优化

描述：通过分析和优化手段，提高网站的性能和用户体验。

目标：实践前端优化方法，从多个方面优化自己做过的项目，最好能将优化后的网站与原网站进行对比，得到一些数据和体验上的明显提升。

性能优化

性能指标

描述：用于衡量一个 Web 页面的性能。

资源：juejin.cn/post/684490…

FP（First Paint）

描述：从开始加载到浏览器首次绘制像素到屏幕上的时间，也就是页面在屏幕上首次发生视觉变化的时间。

FCP（First Contentful Paint）

描述：浏览器首次绘制来自 DOM 的内容的时间。

FMP（First Meaningful Paint）

描述：页面的主要内容绘制到屏幕上的时间。

FSP（First Screen Paint）

描述：页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容。

TTI（Time to Interactive）

描述：表示网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。

优化手段

性能监控

Performance API

样式优化

JavaScript 优化

防抖

节流

代码分割

资源压缩

打包优化

服务器优化

缓存优化

Service Worker

动画性能

dns-prefetch

Lazy loading

优化启动性能

异步化

渲染优化

网络优化

移动端性能优化

CDN

描述：内容分发网络，是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

资源：BootCDN www.bootcdn.cn/

用户体验

设计系统

骨架屏

兼容性

浏览器兼容性

normalize.css

html5shiv.js

respond.js

Babel

Polyfill

屏幕分辨率兼容性

跨平台兼容性

SEO

描述：搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

资源：百度搜索资源平台 ziyuan.baidu.com/cooperatere…

robots.txt

description

keywords

SiteMap

HTML 标签优化

站内链接建设

友情链接

安全

XSS

CSRF

反爬虫

SQL 注入

DDoS

前端生态

描述：如今，前端领域的范围越来越广，出现了更多前端工程师需要了解和关注的技术。

目标：能用学到的前端技术去做更多的事情，比如开发个人博客、文档网站、小程序、APP 等。

静态站点构建

开发

React Static

博客

Gatsby.js

Docusaurus

Hugo

Hexo

文档

JekyII

Docsify

VuePress

Dumi

大前端

描述：前端技术的融合更加紧密，应用的领域也更加广泛，前端领域的内容呈现多样化，除了网站外，还可以用前端技术跨平台开发 Android、iOS、小程序、虚拟现实、增强现实等。

移动应用

Hybrid

WebView

React Native

Flutter

移动应用打包

Weex

Cordova

Phonegap

Ionic

桌面应用

Electron

NW.js

Proton Native

小程序

原生

WebView

跨端开发框架

uni-app

Taro

Flutter

Chameleon

Wepy

Rax

移动端调试

Chrome Dev Tools

Android Simulator

IOS Simulator

Serverless

描述：一种构建和管理基于微服务架构的完整流程，允许你在服务部署级别而不是服务器部署级别来管理你的应用部署，你甚至可以管理某个具体功能或端口的部署，这就能让开发者快速迭代，更快速地开发软件。

云开发

描述：云端一体化的后端云服务 ，采用 Serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

腾讯云云开发

阿里云云开发

低代码

描述：无需编码（零代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。

腾讯云低码

阿里宜搭

前端求职

💬 描述：求职是一个漫长的过程，建议拉长战线，尽早准备。

🎯 目标：找到理想的工作。

流程

2020 秋招面经汇总：www.nowcoder.com/discuss/205…

简历

超级简历

面试题库

牛客前端工程师面试宝典：www.nowcoder.com/tutorial/96…

前端面试每日 3+1：github.com/haizlin/fe-…

React 面试题目 & 题解：github.com/sudheerj/re…

面经

前端面经汇总：www.nowcoder.com/discuss/exp…

面试实战

AI 模拟面试：www.nowcoder.com/interview/a…

前端未来

描述：前端未来可能的发展趋势和热门技术。

目标：关注前沿，持续进步。

WebAssembly

智能 UI

React Server Component

CSS Houdini

WebComponents

HTML templates（HTML模板）

Custom elements（自定义元素）

Shadow DOM（影子DOM）

学习资源

编程导航（包含以下所有📚 资源，强烈推荐 👍）：www.code-nav.cn

freeCodecamp 在线编程：learn.freecodecamp.one/

阿里云前端实战学习：edu.aliyun.com/roadmap/fro…

W3Cschool 编程入门实战：www.w3cschool.cn/codecamp/

腾讯云动手实验室：cloud.tencent.com/developer/l…

pink老师前端入门教程：www.bilibili.com/video/BV14J…

MDN 前端文档：developer.mozilla.org/zh-CN

Node.js 入门：cnodejs.org/getstart

前端清单：cheatsheets.devtool.tech/

前端小课：lefex.github.io/

被删的前端游乐场：www.godbasin.com/

《ES6 入门教程》：es6.ruanyifeng.com/

谷歌 Web 开发者：developers.google.com/web

JavaScript 明星项目：risingstars.js.org/2020/zh

Best of JS：bestofjs.org/

Codewars：www.codewars.com/?language=j…

Vue.js examples：vuejsexamples.com/

前端资讯

掘金资讯：juejin.cn/news

InfoQ：www.infoq.cn/topic/Front…

daily.dev：daily.dev/

技术博客

掘金：juejin.cn/frontend

腾讯前端 IMWEB：imweb.io

腾讯 Web 前端团队 Alloy Team：www.alloyteam.com

淘宝前端团队：taobaofed.org

百度 Web 前端研发部：fex.baidu.com

京东凹凸实验室：aotu.io

360 奇舞团：75team.com

七牛团队技术博客：blog.qiniu.com

有赞技术团队：tech.youzan.com/tag/front-e…

百度 EFE Tech：efe.baidu.com/

css-tricks：css-tricks.com/archives

web.dev：web.dev/blog/