前端路线

免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。

建议先观看视频导读：https://www.bilibili.com/video/BV1nh411e7oG/

可根据知识点前的符号按需选学，并获取知识点描述和学习资源。

⭐️ 必学（追求速成）
✅ 建议学（重要知识）
❗ 面试重点
❌ 一般没必要学习
💬 描述
📚 资源
🎯 目标

一、前端入门

💬 描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。
📚 资源
- freeCodecamp 在线编程：https://learn.freecodecamp.one/
- 阿里云前端实战学习：https://edu.aliyun.com/roadmap/frontend
- W3Cschool 编程入门实战：https://www.w3cschool.cn/codecamp/
- pink 老师前端入门教程：https://www.bilibili.com/video/BV14J4114768
🎯 目标：了解和实践各语言的基础语法，并能使用开发工具来独立开发一个留言板网站。

⭐️ 开发工具

💬 描述：工欲善其事，必先利其器。

浏览器

⭐️ Chrome
✅ Edge
✅ Firefox
❌ Opera
Safari

编辑器

⭐️ VSCode
✅ WebStorm
Atom
⭐️ Sublime Text
HBuilder X
记事本
在线 IDE

文档笔记

✅ Markdown 语法
✅ Typora
在线笔记
- 语雀
- 腾讯文档
- 石墨文档
- 印象笔记
Mdnice

⭐️ HTML

💬 描述：用于定义一个网页结构的基本技术。
📚 资源：https://developer.mozilla.org/zh-CN/docs/Learn/HTML
⭐️ 基本语法
⭐️ 标签
- 分区 div
- 标题 h1 ~ h6
- 段落 p
- 图像 img
- 列表 ul /ol
- 超链接 a
- 表单 form
- 表格 table
- 框架 iframe
⭐️ 属性
✅ HTML5 特性
- 语义化标签
- 浏览器支持
- 多媒体标签
- Canvas 画布
- ❌ 内联 SVG
- 本地存储
  - localStorage
  - sessionStorage
  - ❌ Web SQL
- Web Workers
- 应用缓存（Cache Manifest）
- 无障碍

⭐️ CSS

💬 描述：层叠样式表，用于设计风格和布局。
📚 资源：https://developer.mozilla.org/zh-CN/docs/Learn/CSS
⭐️ 基本语法
⭐️ 引入方式
- 行内样式
- 内部样式表
- 外部样式表
⭐️ 选择器
- 通用选择器
- 标签选择器
- 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

💬 描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。
📚 资源：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
⭐️ 基本语法
⭐️ 数据类型
- 值类型
  - 字符串 String
  - 数组 Number
  - 布尔 Boolean
  - 空值 Null
  - 未定义 Undefined
  - Symbol
- 引用类型
  - 对象 Object
  - 数组 Array
  - 函数 Function
✅ 数据类型转换
✅ 函数
- ⭐️ 概念
- ⭐️ 自定义函数
- 调用方式
  - ⭐️ 全局调用
  - 构造函数调用
  - ⭐️ 函数方法调用
  - apply
  - call
- ✅❗ 闭包
✅ 对象
- 概念
- this
- 原型链和继承
- 常用对象
  - 数字 Number
  - 字符串 String 对象
  - 日期 Date 对象
  - 数组 Array
  - 布尔 Boolean
  - 算数 Math
- 自定义对象
✅❗ 作用域（作用域链）
✅ BOM API
⭐️ DOM API
⭐️ JSON
⭐️ Ajax
✅ JavaScript 执行机制

✅ ES6+ 特性

💬 描述：新引入的 JavaScript 语法特性。
📚 资源：ES6 入门教程 https://es6.ruanyifeng.com/
let 和 const
变量解构赋值
对象扩展和新增方法
Symbol
Set 和 Map 数据结构
⭐️❗ Promise & async /await 异步编程
Generator 函数异步编程

二、巩固基础

💬 描述：学习前端、计算机、软件开发相关基础知识，并复习巩固上阶段学到的前端三件套。
📚 资源
- 《JavaScript 高级程序设计》：https://www.code-nav.cn/rd/?rid=28ee4e3e606b1e1a0e3cfd8952d172cf
- 《JavaScript 忍者秘籍》：https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2
🎯 目标：熟悉前端三件套语法，尤其是 JavaScript，并了解互联网、域名、浏览器、服务器等，扎实前端程序员的基本功，为下面进入实战开发做准备。

前端基础知识

✅ 互联网
⭐️ 域名
⭐️ DNS
⭐️ 服务器
✅ 浏览器
- 浏览器 DOM 事件流 / 事件委托
- ⭐️ 浏览器加载顺序
- ⭐️ 浏览器渲染过程
- 浏览器事件循环
- 浏览器同源策略
- ❗ 跨域解决方案
- 浏览器缓存
- 控制台调试技巧
✅ HTTP
- ❗ HTTP 请求过程
- 常见 HTTP 协议
  - HTTP 1.0
  - ⭐️ HTTP 1.1
  - HTTP 2
  - HTTP 3
- ⭐️ HTTP 请求类别
- ⭐️ 常见状态码
  - 1xx 信息
  - 2xx 成功
  - 3xx 重定向
  - 4xx 客户端错误
  - 5xx 服务器错误
- WebSocket
- ⭐️ Cookie
- Session
- ⭐️ HTTPS

计算机基础

✅ 算法和数据结构

⭐️ 时间 / 空间复杂度分析
数据结构
- 数组
- 字符串
- 队列
- 栈
- 链表
- 集合
- 哈希表
- 二叉树
算法
- 排序
- 双指针
- 查找
- 分治
- 动态规划
- 递归
- 回溯
- 贪心
- 位运算
- DFS
- BFS
- 图

✅ 计算机网络

HTTP 协议
网络模型
UDP / TCP 协议

✅ 操作系统

进程、线程
进程 / 线程间通讯方式
进程调度算法
进程 / 线程状态
死锁
内存管理

软件开发基础

✅ 设计模式

单例模式
代理模式
工厂模式
装饰者模式
观察者模式
策略模式
门面模式

⭐️ Git 版本控制

常用命令

✅ Linux 服务器

常用命令

✅ 正则表达式

三、前端工程化

💬 描述：前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高开发过程中的开发效率，减少不必要的重复工作时间。
📚 资源
- 什么是前端工程化？https://www.zhihu.com/question/433854153/answer/1713597311
🎯 目标：至少学会一门主流的前端开发框架（Vue / React），并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站，可以试着仿一些知名站点。要求遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线，供他人访问。此外，建议抓住机会参与一些团队项目，感受团队开发模式和前端工程化的优势。

⭐️ 研发流程

技术选型
初始化
开发
本地测试
代码提交
编译、打包、构建
部署
集成测试
发布上线
监控运维

⭐️ 代码托管

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

✅ Node.JS

💬 描述：一个开源与跨平台的 JavaScript 运行时环境。它是一个可用于几乎任何项目的流行工具！
📚 资源
- Node.js 官方教程：http://nodejs.cn/learn
- Node.js 入门：https://cnodejs.org/getstart

⭐️ 包管理

💬 描述：用于安装 Node.js 的扩展、工具等。
⭐️ npm
⭐️ yarn
❌ bower
✅ npx

开发框架

Express
Koa
Egg

开发框架

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

⭐️ CSS 框架

✅ BootStrap
⭐️ Tailwind 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

⭐️ 脚手架

💬 描述：快速生成新项目的目录模板，提升开发效率和开发舒适性。
📚 资源：https://www.jianshu.com/p/25ce8cf2e6a7
Vue CLI
create-react-app
✅ Yeoman

⭐️ 前端架构设计

💬 描述：一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流。
模块化
组件化
✅ MVVM
设计原则
⭐️ SPA 单页应用
⭐️ 多页应用
✅ 前端路由
PWA
有损服务

✅ 服务端渲染

💬 描述：在服务端渲染 HTML 页面的模式。
📚 资源：https://www.zhihu.com/question/379563505
Next.js（React）
Nuxt.js（Vue）
❌ Universal（Angular）

BFF

💬 描述：Backend For Frontend（服务于前端的后端），就是服务器设计 API 时会考虑前端的使用，并在服务端直接进行业务逻辑的处理。
📚 资源：https://www.jianshu.com/p/eb1875c62ad3
GraphQL

✅ 微前端

💬 描述：将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。
📚 资源：https://zhuanlan.zhihu.com/p/96464401
qiankun
single-spa

CSS in JS

💬 描述：用 JavaScript 来写 CSS。
📚 资源：http://www.ruanyifeng.com/blog/2017/04/css_in_js.html
内联样式
声明样式
引入样式

⭐️ 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 代码规范 https://github.com/BingKui/javascript-zh
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 服务器。
📚 资源：腾讯云动手实验室 https://cloud.tencent.com/developer/labs/gallery
反向代理
解决跨域
改写请求

✅ Apache

容器

✅ Docker

💬 描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker 容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。
📚 资源：Docker 从入门到实践 https://vuepress.mirror.docker-practice.com/
Dockerfile

Kubernetes

部署策略

全量发布
蓝绿部署
滚动发布
灰度发布

监控告警

前端埋点
错误监控
性能监控
行为监控

四、前端优化

💬 描述：通过分析和优化手段，提高网站的性能和用户体验。
🎯 目标：实践前端优化方法，从多个方面优化自己做过的项目，最好能将优化后的网站与原网站进行对比，得到一些数据和体验上的明显提升。

✅ 性能优化

性能指标

💬 描述：用于衡量一个 Web 页面的性能。
📚 资源：https://juejin.cn/post/6844904153869713416
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 https://www.bootcdn.cn/

用户体验

设计系统
骨架屏

✅ 兼容性

浏览器兼容性

normalize.css
html5shiv.js
respond.js
Babel
Polyfill

屏幕分辨率兼容性

跨平台兼容性

SEO

💬 描述：搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
📚 资源：百度搜索📚 资源平台 https://ziyuan.baidu.com/cooperateresource/index
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 等应用。
✅ 腾讯云云开发
阿里云云开发