前端知识体系思维导图

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

思维导图

前端知识体系思维导图_第1张图片

大纲及重难点文章链接

1. JavaScript
  • 语言核心

    • 语法、类型、语句、关键字、保留字、操作符、全局对象
  • 与浏览器交互

    • DOM:文档对象模型

      • 事件
    • BOM:浏览器对象模型

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

    • 函数式编程
  • 面向对象风格编程

    • 对象、类、继承
  • 设计模式
  • 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

附送250套精选项目源码

源码截图

源码获取:关注公众号「码农园区」,回复 【源码】,即可获取全套源码下载链接

 

你可能感兴趣的:(前端,前端)