前端知识图谱大全

前端知识图谱

• 前端知识图谱指的是前端开发领域中的相关技能、工具、最佳实践和概念的总结。它包括了从基础的HTML、CSS、JavaScript知识到复杂的框架和库，再到性能优化、安全性、工具链等多方面的内容。以下是前端知识图谱的一个概括：

基础技能

• HTML: 网页结构、语义化标签、表单、SEO 基础等。
• CSS: 布局（Flexbox、Grid）、动画、预处理器（Sass、Less）、响应式设计、框架（Bootstrap、Tailwind）等。
• JavaScript: ES6+ 语法、异步编程、事件处理、DOM 操作、数据结构、算法等。

CSS预处理器

• Sass/SCSS: 提供变量、嵌套、混入等高级功能
• LESS: 类似Sass的CSS扩展语言
• Stylus: 富有表现力的、动态的、健壮的CSS预处理器

框架与库

• React: 生命周期、Hooks、状态管理（Redux、MobX）、路由（React Router）、服务端渲染（Next.js）等。
• Vue: 指令、组件、Vuex、路由（Vue Router）、服务端渲染（Nuxt.js）等。
• Angular: 模块、依赖注入、服务、RxJS、表单等。
• Svelte: 一个新兴的编译时前端框架
• jQuery: 简化DOM操作的快速、小型和功能丰富的JavaScript库
• 小程序框架: 微信小程序、支付宝小程序、Uni-app等。

状态管理

• Redux: 适用于React的状态管理库
• Vuex: 专为Vue.js应用程序开发的状态管理模式
• MobX: 简单、可扩展的状态管理

跨端开发

• React Native: 用于构建原生应用的 React 变体。
• Flutter: 跨平台 UI 工具包，用于在 iOS 和 Android 上创建原生接口。
• Cordova/PhoneGap: 将网页应用包装为原生应用的平台。
• Electron: 用于构建跨平台桌面应用的框架。

服务器端渲染（SSR）

• 静态站点生成器
  • Next.js: React框架，支持SSR和静态站点生成
  • Nuxt.js: 基于Vue.js的SSR框架
  • Gatsby: React的静态站点生成器

响应式设计和交叉设备兼容性

• 媒体查询
• 移动优先设计
• 桌面和移动端布局适配

微前端

• 模块联邦、系统间通信、微前端架构（single-spa等）。

低代码/无代码发展：

• 平台如 Wix、Webflow、Bubble 等的使用和限制。

AI 和前端结合：

• TensorFlow.js、ML5.js 等库的使用，将机器学习集成到前端应用。

音视频与直播技术

• WebRTC、MediaStream API、HLS、Dash 等。
  • 视频会议解决方案：
    • Zoom API、Jitsi Meet、Agora 等。

前端工程化

• 模块化：CommonJS、AMD、ES Modules。
• 包管理器：npm、yarn。
• 构建打包工具：Webpack、Rollup、Parcel、Gulp。
• 代码质量：ESLint、Prettier、代码格式化、静态类型检查（TypeScript、Flow）。
• 单元测试：Jest、Mocha、Chai、Enzyme、Cypress 等。
• 持续集成/持续部署（CI/CD）：Jenkins、GitHub Actions、Travis CI等。

版本控制

• Git: 基本命令、分支策略、协作流程（Git Flow、GitHub Flow）。

性能优化

• 代码分割、延迟加载和懒加载、预加载、网络性能优化（如 HTTP/2）、图片和视频优化、CDN使用、缓存策略等。

计算机网络基础

• 协议（HTTP/HTTPS、TCP/IP）、RESTful API、GraphQL、WebSockets、服务端推送（SSE）等。

浏览器工作原理

• 渲染引擎、事件循环、浏览器存储（LocalStorage、SessionStorage、IndexedDB）、安全性（CORS、内容安全策略）。

前端安全

• XSS（跨站脚本攻击）
• CSRF（跨站请求伪造）
• HTTPS和内容安全策略（CSP）

现代API

• Fetch API/Ajax: 异步请求数据
• WebSocket: 实现实时双向通信
• Service Workers: 离线体验和网络性能优化
• Web Storage: 本地存储API，如localStorage和sessionStorage

数据结构和算法

• 数组、链表、树、图、排序算法、搜索算法等。

团队协作与项目管理

• 版本控制系统、敏捷开发、Scrum、Kanban、代码审查、对话式开发（ChatOps）。

前端监控和分析

• Google Analytics
• Sentry: 错误跟踪系统
• LogRocket: 前端监控和产品分析

前端趋势和最佳实践

• Progressive Web Apps (PWA)
• Web Components
• Atomic Design

DevOps：

• 自动化测试、自动化部署、监控、日志管理、容器化（Docker、Kubernetes）。

测试

• 单元测试（如Jest, Mocha）
• 端到端测试（如Cypress, Selenium）
• 集成测试

Node.js 和后端开发

• 事件驱动、Express、Koa、数据库交互、认证