前端学习指南：干了20年，聊聊真正值得学的东西

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- 差的写法：满屏div -->
<div class="header">
  <div class="nav">
    <div class="item"><a href="/">首页</a></div>
  </div>
</div>

<!-- 好的写法：语义化标签 -->
<header>
  <nav>
    <a href="/">首页</a>
  </nav>
</header>

1
2
3
4
5
6

文档结构：header / nav / main / article / section / aside / footer
文本内容：h1-h6 / p / ul / ol / li / blockquote / code / pre
表单组件：form / input / textarea / select / button / label
多媒体：img / video / audio / canvas / svg
链接关系：a / link
元数据：meta / title / link / script

1
2
3
4

DOCTYPE 的作用是什么
浏览器如何解析HTML（构建DOM树的过程）
HTML解析与JavaScript执行的关系（async / defer）
浏览器如何处理解析错误（容错机制）

1
2
3
4
5
6
7

标准盒模型：width = content（内容区），border + padding + content = 元素总宽度
IE盒模型：width = border + padding + content，border-sizing控制模型切换

.box {
  box-sizing: border-box; /* 推荐：让width直接等于元素总宽度 */
  /* 不用border-box的话，padding和border会让元素变大，容易出现滚动条 */
}

1
2
3
4

display: flex;        → 一维布局（row或column）
display: grid;         → 二维布局（行和列同时控制）
display: block;       → 块级布局（占满整行）
display: inline-block; → 行内块（不占满整行，但可以设宽高）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* Flex典型场景：导航栏 */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Grid典型场景：页面整体布局 */
.page {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
  min-height: 100vh;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 优先级计算：内联 > ID > 类/属性/伪类 > 标签 > 通配符 */

/* specificity: 0,1,1 */
.header .logo {
  color: red;
}

/* specificity: 0,0,2 */
.logo {
  color: blue;
}

/* 最终显示红色，第二个规则优先级不够 */

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* 移动优先写法 */
.container {
  padding: 16px;
}

@media (min-width: 768px) {
  .container {
    padding: 32px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

1
2
3
4

.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* 最小1.5rem，随视口宽度增长，最大3rem */
}

1
2
3
4
5
6

变量声明（var/let/const，推荐const优先）
数据类型（7种原始类型 + 对象）
函数（普通函数 / 箭头函数 / 构造函数 / 闭包）
作用域（全局 / 函数 / 块级）
异步（回调 / Promise / async-await）
DOM操作（querySelector / createElement / 事件绑定）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// 箭头函数 this 指向问题（常考）
const obj = {
  name: "John",
  // ❌ 错误：setTimeout里用普通函数，this指向window
  badFn: function () {
    setTimeout(function () {
      console.log(this.name); // undefined，this是window
    }, 1000);
  },
  // ✅ 正确：用箭头函数，this继承外层
  goodFn: function () {
    setTimeout(() => {
      console.log(this.name); // 'John'，this是obj
    }, 1000);
  },
};

1
2
3
4
5

执行上下文 / 调用栈
闭包（Closure）与内存泄漏
原型链（Prototype Chain）与继承
Event Loop（事件循环）：宏任务与微任务
this 的四种绑定规则

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// 经典闭包问题
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// var是函数作用域，1秒后输出：3, 3, 3（不是0,1,2）

// 解决方式1：使用let（块级作用域）
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// 输出：0, 1, 2 ✅

// 解决方式2：使用闭包
for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(() => console.log(j), 1000);
  })(i);
}
// 输出：0, 1, 2 ✅

1
2
3
4
5

BOM（Browser Object Model）：window / location / navigator / document
浏览器事件机制（捕获 / 冒泡 / 委托）
浏览器存储（localStorage / sessionStorage / cookie / IndexedDB）
浏览器网络（fetch / XMLHttpRequest / CORS / 缓存机制）
浏览器的安全机制（同源策略 / CSP）

1
2
3
4
5
6

组件设计能力（组件怎么拆分，props怎么设计，状态放哪）
响应式原理（数据变化怎么驱动视图更新）
虚拟DOM（为什么需要，性能如何）
路由管理（Vue-Router / React-Router）
状态管理（Pinia / Redux / Zustand）
生命周期（理解组件从创建到销毁的全过程）

1
2
3

不要同时学两个框架
不要刚学完基础语法就急着上框架
不要只会用框架，不理解底层原理

1
2

1. 类型检查：在编译期发现问题，而不是线上用户发现
2. 代码提示：IDE知道你的数据结构，提供准确的自动补全

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 没有TS：运行之后才发现bug
function fetchUser(id) {
  return fetch(`/api/user/${id}`).then((res) => res.json());
}
const user = fetchUser(1);
// user.name // 不知道有没有这个属性，靠猜

// 有TS：写代码时就告诉你错误
async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`/api/user/${id}`);
  if (!res.ok) throw new Error("请求失败");
  return res.json();
}
const user = await fetchUser(1);
user.name; // IDE直接提示：string类型，精准补全

1
2
3
4
5

基本类型注解、接口、类型别名
泛型（<T>）的使用场景
keyof / typeof / infer（高级类型）
条件类型与映射类型
与React/Vue的结合使用（defineProps / FC<>）

1
2
3
4
5
6
7
8
9

Vite的基本原理（比Webpack轻量很多）：
  → 开发时：基于ESM原生模块，按需编译，秒级启动
  → 生产时：用Rollup打包，做tree-shaking（去除无用代码）

Webpack的基本原理（更老但更全面）：
  → 从入口文件开始，递归分析所有import/require
  → 通过loader处理各种文件类型（ts/less/img）
  → 通过plugin做各种优化（代码分割/压缩/注入）
  → 输出bundles

1
2
3
4
5
6

git branch / git checkout -b  创建分支和切换分支
git merge / git rebase        合并分支的区别（什么时候用哪个）
git stash                      临时保存修改
git reset --soft / --hard     撤销提交的区别
git cherry-pick                挑拣提交
git log --graph               可视化分支历史

1
2
3
4

main/master：稳定版本，只接受合并
develop：开发分支，集成各功能
feature/*：功能分支
hotfix/*：紧急修复分支

1
2
3
4

ESLint：JavaScript/TypeScript语法检查
Prettier：代码格式化（统一风格，不用争论"缩进用tab还是空格"）
Husky：Git Hooks，在commit前自动检查代码质量
lint-staged：只检查本次提交的修改文件

1
2
3

单元测试（Jest / Vitest）：测试单个函数、组件
集成测试（Testing Library）：测试组件之间的交互
端到端测试（Playwright / Cypress）：模拟用户真实操作

1
2
3
4
5
6

减少HTTP请求数（合并CSS/JS、雪碧图、懒加载图片）
开启Gzip压缩（服务器配置，收益巨大）
使用CDN（静态资源放CDN，减轻服务器压力）
合理设置缓存（Cache-Control / ETag / 强缓存/协商缓存）
HTTP/2多路复用（减少TCP连接数）
DNS预解析（<link rel="dns-prefetch">）

1
2
3
4

HTML解析 → DOM树
CSS解析 → CSSOM树
DOM + CSSOM → Render Tree（渲染树）
Layout（布局）→ Paint（绘制）→ Composite（合成）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// ❌ 触发Layout的写法（每次循环都重新计算布局）
for (let i = 0; i < 1000; i++) {
  element.style.left = i + "px"; // 每次都触发回流
}

// ✅ 只触发Composite的写法（用transform，不触发Layout）
for (let i = 0; i < 1000; i++) {
  element.style.transform = `translateX(${i}px)`;
}
// transform使用GPU加速，只触发合成，不触发Layout和Paint

1
2
3
4
5

减少主线程阻塞（把大计算放到Web Worker或用requestIdleCallback）
避免长任务（把大任务拆分成小任务，分帧执行）
防抖和节流（高频事件用debounce/throttle）
懒加载（图片懒加载、路由懒加载、组件懒加载）
虚拟滚动（长列表用虚拟列表，只渲染可视区域）

1
2
3
4
5

路由懒加载（React.lazy / defineAsyncComponent）
组件按需加载（Ant Design的按需引入）
图片优化（WebP格式、响应式图片srcset、渐进式JPEG）
骨架屏（Loading状态用骨架屏比spinner体验好）
预加载关键资源（<link rel="preload">）

1
2
3
4
5
6

Chrome DevTools Performance面板：分析帧率、耗时
Lighthouse：Google的自动化性能评分工具
Web Vitals（Core Web Vitals）：
  LCP（最大内容绘制）：< 2.5s 优秀
  FID（首次输入延迟）：< 100ms 优秀
  CLS（累积布局偏移）：< 0.1 优秀

1
2
3

Blink（Chrome/Edge/Opera）：2013年后从Webkit分支
WebKit（Safari）：苹果的引擎
Gecko（Firefox）：Mozilla的引擎

1
2
3
4
5
6

HTML解析器 → 构建DOM树
CSS解析器 → 构建CSSOM树
JavaScript引擎 → V8/SpiderMonkey/JavaScriptCore → 执行JS
布局引擎 → 计算每个元素的位置（Layout）
绘制引擎 → 把元素画出来（Paint）
合成器 → 把各层合在一起（Composite）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

1. URL解析 → 协议（http/https）、域名、路径
2. DNS查询 → 域名 → IP地址
3. TCP连接 → 三次握手（HTTPS还要TLS握手）
4. 发送HTTP请求 → 浏览器发送GET请求
5. 服务器处理 → 返回HTML
6. 浏览器接收HTML → 开始解析
7. 构建DOM树（边解析边生成DOM节点）
8. 遇到<link> → 发起CSS请求
9. 遇到<script> → 同步加载并执行JS（阻塞DOM解析）
10. CSS解析 → 构建CSSOM树
11. DOM + CSSOM → Render Tree
12. Layout → 计算每个节点的位置和大小
13. Paint → 把每个节点画成像素
14. Composite → 合成层，输出到屏幕

1
2
3
4
5
6
7
8
9

事件循环的执行顺序：

while (true) {
  1. 执行同步任务（调用栈里的代码）
  2. 执行所有微任务（Promise.then / MutationObserver / queueMicrotask）
  3. 执行一个宏任务（setTimeout / setInterval / I/O / UI渲染）
  4. 检查是否需要渲染
  5. 回到步骤1
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

console.log("1"); // 同步

setTimeout(() => console.log("2"), 0); // 宏任务

Promise.resolve().then(() => console.log("3")); // 微任务

console.log("4"); // 同步

// 输出顺序：1, 4, 3, 2
// 解释：同步代码先执行 → 微任务在同步后立即执行 → 最后执行下一个宏任务

1
2
3
4
5
6
7
8

Chinese (Simplified)：中文语言包（新手友好）
ESLint：代码检查（保存自动修复）
Prettier：代码格式化
Auto Rename Tag：改标签时自动配对修改
GitLens：增强Git功能（查看每行代码的提交历史）
Error Lens：错误直接在行内显示，不用看底部面板
Live Server：本地开发服务器（右键直接开页面）
ES7+ Snippets / Vuter等：代码片段，补全提速

1
2
3
4
5
6
7
8

Elements面板：查看DOM结构、修改CSS样式、实时调试布局
Console面板：执行JS代码、查看日志、查看网络响应
Sources面板：断点调试（普通断点 / 条件断点 / DOM断点）
Network面板：查看所有网络请求、请求头、响应体、耗时分析
Performance面板：性能分析、火焰图、帧率监控
Memory面板：内存泄漏分析、堆快照对比
Application面板：localStorage / sessionStorage / IndexedDB / Service Worker
Lighthouse面板：自动性能评分和改进建议

1
2
3

React DevTools：查看React组件树、props、状态
Vue DevTools：查看Vue组件树、Vuex/Pinia状态
Redux DevTools / Vuex DevTools：查看状态管理数据流

1
2
3
4
5

数组操作：map / filter / reduce / sort / splice（必须熟练）
树的操作：遍历（先序/中序/后序）、查找
哈希表：理解hash原理，会用Object/Map/Set
递归：理解递归栈，能写出递归函数
常见排序：快排/归并的复杂度分析（手写不重要，理解思想重要）

1
2
3
4
5

单例模式：全局状态管理（如Vuex/Pinia的store）
工厂模式：组件库创建不同类型的UI组件
观察者模式：Vue的响应式原理、EventEmitter
策略模式：表单验证（不同规则用不同验证器）
装饰器模式：高阶组件（HOC）、装饰器语法

1
2
3
4
5
6

HTTP请求方法：GET/POST/PUT/DELETE/PATCH的区别
HTTP状态码：2xx/3xx/4xx/5xx各自的含义
跨域：JSONP/CORS/代理，清楚为什么会有跨域限制
缓存：强缓存（Cache-Control/Expires）和协商缓存（ETag/Last-Modified）
CDN原理：就近访问、缓存静态资源
WebSocket：全双工通信，用于聊天、实时协作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

阶段1（第1-2个月）：HTML + CSS + JavaScript基础
→ 学完能写静态页面
→ 目标：CSS布局（Flex+Grid）没问题，JS基础扎实
→ 标志：能照着设计稿完整还原页面，JS不靠百度

阶段2（第3-4个月）：一个主流框架（Vue或React）
→ 学完能用框架开发SPA
→ 目标：组件化思维建立，路由和状态管理会用
→ 标志：能独立用框架做一个单页应用

阶段3（第5个月）：工程化 + TypeScript
→ 学完能把项目工程化
→ 目标：会用构建工具、理解Git协作、写TS代码
→ 标志：能搭一个完整的项目脚手架

阶段4（第6个月）：性能优化 + 浏览器原理
→ 学完能定位和解决性能问题
→ 目标：清楚浏览器渲染过程，能用DevTools分析问题
→ 标志：能把一个慢页面优化到合格水平

阶段5（持续）：进阶与深耕
→ 选一个方向深入：架构/性能/安全/图形
→ 读源码（Vue/React源码值得读一遍）
→ 做完整项目（从0到上线）