大前端学习路线，完整知识体系 

大家好，我是ITCJF ~~
最近家里的事情太多了，很久没更新技术文了。期间，也收到了很多小伙伴的鼓励，谢谢大家的帮助和支持，我想感谢大家最好的方式就是持续分享好的技术文章了吧，让自己和他人持续有所收获。

 

好了，我们开始今天的正文。

前言
一直以来都有很多想学习Web的朋友们问我，学Web怎么学？web开发的学习路线能教教我吗？
我先告诉大家一个点，不管你是报了什么培训班，还是自己在通过各种渠道自学，你一定要注重一个东西：完整的知识体系。
感觉很迷茫？学了一段时间还是不入流？很大一部分原因是因为你没有一个完整的知识体系，你不知道自己现在的进度、未来的方向。

前言 - 学编程需要的特质

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

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

一、前端入门

开发工具

  • 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
  • Vuex
  • SSR
  • vue-loader
React
  • React DOM
  • React Router
  • Redux
  • MobX
  • React Hooks
Angular
  • RxJS
  • NgRx
Svelte

CSS 框架

  • BootStrap
  • Tailwind CSS

封装库

组件库

  • Ant Design
  • ElementUI
  • VantUI

数据可视化

  • AntV
  • HighChart
  • D3.js
  • Echart

工具库

  • 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

  • CSS Houdini

WebComponents

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

尾声 - 持续学习

 

大前端学习路线，完整知识体系（持续更新，欢迎关注点赞）_web