绝大部分分类方法、专业术语，出自专业书籍，如《JavaScript 高级程序设计（第 4 版）》、《JavaScript 权威指南（第 7 版）》《CSS 权威指南（第四版）》、《HTML5 权威指南》、《计算机网络（第 5 版）》、《数据结构与算法分析 —— C语言描述》等，欢迎爱读书的小伙伴一起探讨！
思维导图
大纲及重难点文章链接
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套精选项目源码
源码截图
源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接