前端知识体系思维导图

dandanq
1,394 阅读6分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 1 天，点击查看活动详情

前言

学习前端有近三年时间啦！零零碎碎学了很多知识，虽然也看过像 Frontend Developer Roadmap: Learn to become a modern frontend developer 这种归纳得很好的前端知识大纲，但终究不如自己整理一下，既是对已掌握知识的回顾和归纳，也是对自身知识库审视和升级。

so，我画给自己的 12 月份的大饼是：梳理、归纳前端知识点，做到条理清晰、内容全面、重点突出~ 具体的目标如下：

  • 完善知识体系的大纲，收纳更全面的前端知识领域。斟酌每个知识点所属的专题，梳理专题间的关联关系。
  • 对知识点进行分类，梳理每个专题下的：① 基础知识 ② 重点难点 ③面试高频考点。希望覆盖更多的知识点，让前端开发者能对前端知识有一个整体的印象，然后重点会放在 ②③ 部分，抓住要义！
  • 深入理解重点难点，并沉淀为系列文章，链接将持续更新至本文中~ 重点难点部分是我本次关注的重点，比方说：深入事件循环，探索异步机制，探索函数式编程和面向对象编程的异同，研究 diff 算法的实现，研究 vue 的响应式原理...我会整理成相应的文章来发表我对这些重难点知识的理解。在这些文章中，我也会代入面试角度，分析面试中考察的重点，帮助读者们更快掌握面试技巧。

前端知识体系思维导图还在持续更新中，有什么想法或者建议的掘金小伙伴们，欢迎在评论区里留言讨论~

PS: 绝大部分分类方法、专业术语，出自专业书籍，如《JavaScript 高级程序设计（第 4 版）》、《JavaScript 权威指南（第 7 版）》《CSS 权威指南（第四版）》、《HTML5 权威指南》、《计算机网络（第 5 版）》、《数据结构与算法分析 —— C语言描述》等，欢迎爱读书的小伙伴一起探讨！

思维导图

前端知识体系（2）.png

大纲及重难点文章链接

1. JavaScript

  • 语言核心

    • 语法、类型、语句、关键字、保留字、操作符、全局对象

  • 与浏览器交互

    • DOM：文档对象模型

      • 事件

    • BOM：浏览器对象模型

  • 探索 JS 最强大的特性：函数表达式

    • 函数式编程

  • 面向对象风格编程

    • 对象、类、继承
  • 设计模式
  • 垃圾回收与内存管理

  • 语言标准：ECMAScript

    • 了解 JS 发展的历程
    • 熟悉 ES6、ES7 新的语言标准

  • node.js

    • 模块机制

    • 异步 I/O

    • 异步编程

      • 基于事件的非阻塞 I/O 模型

    • 内存控制

    • 网络编程

  • 类型系统：Typescript

2. HTML

  • HTML 元素

    • 把网页比作一个房子的话，HTML 是砖瓦，CSS 则是装潢。

    • 分类

      • 文档和元数据元素、文本元素、组织内容元素、文档分节元素、制表元素、表单元素、嵌入内容

  • SEO 原理和优化

    • 什么样的 HTML 文档更容易被搜索引擎识别？

  • HTML5

    • 可编程内容

      • canvas

    • 原生多媒体支持

      • video audio...

    • 语义化

  • 元素坐标的获取

    • Element.getBoundingClientRect()

    • 鼠标点击位置

      • const { screenX, screenY, clientX, clientY, offsetX, offsetY } = e

    • 元素自身属性

  • 页面生命周期

    • DOMContentLoaded、load、beforeunload、unload

  • 虚拟列表

    • 原理：减少页面同时呈现的 DOM 节点数量，来减少内存消耗，提高页面性能。

3. CSS

  • 从浏览器渲染进程理解 CSS

    • 回流（reflow）和重绘（repaint）

  • 特指度和层叠

    • 对于 CSS 来说，“层叠” 算是最基本的概念。在这个过程中，有冲突的声明按一定顺序排列，由此确定文档的最终表现。这个过程中还涉及选择符和与其关联的声明的特指度，以及继承机制。

  • 盒模型与布局

    • 布局发展历程：从浮动（float），到弹性盒模型（flex，适用一维)，再到栅格布局（grid，适用二维）
    • 定位：相对定位（relative）、绝对定位（absolute）、固定定位（fixed）、粘滞定位（sticky）
    • 盒模型：内边距、边框、轮廓、外边距
  • 视觉格式化
  • 响应式设计

4. 前端框架

  • 框架对比，概要

    • MVC、MVP、MVVM

  • react

    • 学习中..

  • vue

    • 基本使用

      • vue2、vue3、vue-router、vuex、pinia

    • 深入原理

      • 响应式原理
      • 模板编译原理
      • 虚拟 DOM
      • diff 算法

  • Angular

    • 暂无

  • Svelte

    • 一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

5. 计算机网络

  • 五层模型

    • 应用层

      • DNS 解析
      • HTTP / HTTPS

    • 传输层

      • TCP 连接

    • 网络层

      • IP 协议
      • 路由协议

    • 数据链路层

    • 物理层

  • 从输入 URL 到页面呈现过程中，网络是如何工作的？（理解五层模型）

  • web 开发中需要了解的 HTTP

    • 强缓存与协商缓存

    • CORS 跨域资源共享（一种基于 HTTP 头的机制）

    • HTTP 各个版本主要的差异：HTTP1.0 HTTP1.1 HTTP2 HTTP3

    • 常见 HTTP 状态码

    • HTTPS 协议

    • 范围请求

      • 用于传输大文件或者断点续传

6. 数据结构与算法

  • 数据结构

    • 表、栈、队列

    • 链表

    • 二叉树

      • 深度优先搜索
      • 广度优先搜索

    • 散列表（哈希表）

    • 优先队列（堆）

    • 不相交集（并查集）

    • 图

7. 前端工程化

  • 系统化、规范化、模块化
  • 前端模块化

  • 编译和构建工具

    • vite、gulp、webpack、turbopack
    • 万变不离其宗：深入编译原理

  • 代码质量和规范

    • 代码规范：eslint、prettier
    • git 分支管理规范和 git commit 规范
    • 项目规范：文件的组织方式和命名方式

  • 测试

    • 单元测试
    • 端到端测试
  • CI/CD

  • 监控

    • 性能监控、错误监控、用户信息收集

  • 性能优化

    • 网络

    • 内存优化

      • 解决内存泄露问题

    • 运行速度

8. 前端架构

  • 前后端分离

    • 多页面应用

    • 单页面应用

      • 前端路由

  • 微前端

    • 沙箱隔离

9. web 安全

  • CSRF 攻击
  • XSS 攻击

  • 同源策略

    • 跨域资源共享 CORS
    • 普通请求与预检请求具体过程

10. 其他专题

  • WebGL
  • canvas

  • 这么好用的 web API！

    • Observer API：Intersection Observer、Mutation Observer、Resize Observer、Performance Observer
  • WebSocket

  • ...

参考资料

Frontend Developer Roadmap: Learn to become a modern frontend developer

avatar
文章
阅读
粉丝