前端学习路线

这份学习路线并不完美，也不会有最终形态，正如前端不可预见、永无止境的未来。

转自鱼皮

💂 + 💻 = 👴🏽

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

大纲

1. 前言 - 学编程需要的特质
2. 前端学习七阶段
   1. 前端入门
   2. 巩固基础
   3. 前端工程化
   4. 前端优化
   5. 前端生态
   6. 前端求职
   7. 前端未来
3. 尾声 - 持续学习
4. 我的前端学习路线

前言 - 学编程需要的特质

相信自己有能力，那么你就真的会有！

• 兴趣
• 坚持
• 付出
• 心态

一、前端入门

开发工具

• VSCode

• WebStorm

• Atom

• Sublime Text

• HBuilder X

• 记事本

• 在线 IDE

HTML

• 基本语法

CSS

• 盒子模型
• 内联元素/块状元素
• 文档流
• 浮动 float
• 元素堆叠
• 块格式化上下文(BFC)
• 响应式布局
• Flex 布局
• Grid 布局
• CSS 动画
• 瀑布流

JavaScript

• 基本语法
• 基本类型
• Javascript 对象
• 原型和继承
• 作用域
• 闭包
• this
• ES6+
• 单线程与异步 Javascript
• DOM/BOM API

二、巩固基础

前端基础知识

• 互联网

• 域名

• DNS

• 服务器

• 浏览器

  • 浏览器 DOM 事件流/事件委托
  • 浏览器加载顺序
  • 浏览器渲染过程
  • 浏览器 EventLoop
  • 浏览器同源策略
  • 跨域方案/CORS
  • 浏览器缓存
  • 常见调试技巧

• HTTP

  • HTTP 请求过程
  • 常见 HTTP 协议
  • HTTP 1.0/HTTP 1.1/HTTP2/HTTP3
  • Ajax
  • WebSocket

计算机基础

算法和数据结构

计算机网络

操作系统

软件开发基础

设计模式

Git 版本控制

Linux 服务器

三、前端工程化

研发流程

1. 技术选型
2. 初始化
3. 开发
4. 本地测试
5. 代码提交
6. 编译、打包、构建
7. 部署
8. 集成测试
9. 发布上线

代码托管

• GitHub
• Gitee
• GitLab

Node.JS

包管理

• npm
• yarn
• bower
• npx

开发框架

JavaScript 框架

Vue

• Vue Router

React

• React DOM
• React Router
• Redux
• MobX
• React Hooks

Angular

• RxJS
• NgRx

Svelte

CSS 框架

• BootStrap
• Tailwind CSS

封装库

组件库

• LayUI
• ElementUI
• VantUI
• Ant Design

数据可视化

• EChart
• HighChart
• D3.js
• AntV

工具库

• jQuery
• moment
• lodash
• axios

字体图标库

• IconFont
• IconPark
• Font Awesome

脚手架

• vue-cli

• create-react-app

• Yeoman

前端架构

• 前端模块化
• SPA
• 多页应用
• 前端路由
• PWA

服务端渲染

• Next.js（React）
• Nuxt.js（Vue）
• Universal（Angular）

BFF

• GraphQL

前端微服务

• qiankun

CSS in JS

• 内联样式
• 声明样式
• 引入样式

CSS 模块化

• CSS Modules
• styled-components
• Styled JSX
• Emotion

开发调试

• webpack-dev-server
• serve

内网穿透

• Ngrok
• NATAPP

CSS 预编译

• SASS
• PostCSS
• Stylus
• LESS

测试

测试分类

• 单元测试
• 集成测试
• E2E 测试

Mock

测试框架

• Jest

• Enzyme

• Puppeteer

• Mocha

• Chai

• Jasmine

• Headless Browser

代码质量

开发规范

• Style Guide

类型校验

• TypeScript

代码检查

• ESLint
• StyleLint

代码风格

• Prettier

提交规范

• pre-commit

提交检查

• hosky

构建工具

自动化构建

• Gulp
• npm script
• grant

打包工具

• Webpack
• Rollup
• Vite
• Parcel
• Snowpack

CI / CD

• GitLab CI
• Jenkins

部署

Web 服务器

• Nginx
• Apache

容器

• Docker
• K8s

部署策略

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

监控告警

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

四、前端优化

性能优化

性能指标

• FP
• FCP
• FMP
• TTI

优化手段

• 性能监控

  • Performance API

• 样式优化

• JavaScript 优化

• 代码分割

• 资源压缩

• 打包优化

• 服务器优化

• 缓存优化

  • Service Worker

• 动画性能

• dns-prefetch

• Lazy loading

• 优化启动性能

  • 异步化

• 渲染优化

• 网络优化

• 移动端性能优化

用户体验

• 骨架屏

兼容性

浏览器兼容性

• normalize.css
• html5shiv.js
• respond.js
• Babel
• Polyfill

屏幕分辨率兼容性

跨平台兼容性

SEO

安全

• XSS
• CSRF
• 反爬虫
• SQL 注入
• DDoS

五、前端生态

静态站点构建

开发

• react-static

博客

• Gatsby.js
• Docusaurus
• Hugo
• Hexo

文档

• JekyII
• Docsify
• VuePress
• Dumi

大前端

移动应用

• Hybrid
• WebView
• React Native
• Flutter

移动应用打包

• Week
• Cordova
• Phonegap
• Ionic

桌面应用

• Electron
• NW.js
• Proton Native

小程序

• 原生
• WebView

跨端开发框架

• uni-app
• Taro
• Flutter
• Chameleon
• Wepy
• Rax

移动端调试

• Chrome Dev Tools
• Android Simulator
• IOS Simulator

Serverless

云开发

• 腾讯云云开发
• 阿里云云开发

低代码

零代码

• 腾讯云低码
• 阿里宜搭

六、前端求职

流程

简历

面试题库

面经

面试实战

（模拟面试）

七、前端未来

• WebAssembly

• 智能 UI

• React Server Component

• CSS Houdini

WebComponents

• HTML templates（HTML模板）
• Custom elements（自定义元素）
• Shadow DOM（影子DOM）

尾声 - 持续学习

优秀前端人的特质

学习资源

前端资讯

技术博客

我的前端学习路线

找项目：searchCode

todo

优化 html、css、js 内容

补充尾声内容

描述和链接

写一条线