Day 2：基础知识巩固（HTML、CSS、JavaScript）

目标：强化前端基础知识，确保基础无短板，避免基础问题翻车。

1. HTML & CSS

1.1 HTML

HTML 语义化（

HTML5 新特性（canvas、video、audio、localStorage、sessionStorage）

行内元素 vs 块级元素 vs 行内块级元素

meta 标签的作用（viewport、charset、SEO 相关）

HTML5 离线存储（manifest）、Web Worker

1.2 CSS

1.2.1 盒模型

标准盒模型（box-sizing: content-box）

IE 盒模型（box-sizing: border-box）

box-sizing 的实际应用（如何避免 width 计算问题）

1.2.2 BFC（块级格式化上下文）

BFC 触发条件

float 非 none

overflow 非 visible

display: flex/grid

position: absolute/fixed

BFC 作用

清除浮动

避免外边距折叠（Margin Collapse）

解决子元素超出父元素问题

1.2.3 CSS 布局

Flex 布局

主轴/交叉轴

justify-content vs align-items

flex-grow, flex-shrink, flex-basis

Grid 布局

grid-template-rows & grid-template-columns

grid-gap、grid-area

fr 单位的使用

1.2.4 选择器优先级

优先级计算规则

!important > 行内样式 > ID 选择器 > 类/伪类/属性选择器 > 标签选择器 > 通配符 > 继承

选择器优化

避免过度嵌套

:nth-child(n) vs :nth-of-type(n)

1.2.5 重绘（Repaint）与回流（Reflow）

重绘（Repaint）：不影响布局（color、background、visibility）

回流（Reflow）：影响布局（width、height、position）

优化策略

transform: translate3d(0,0,0) 代替 top/left

visibility: hidden 代替 display: none

使用 requestAnimationFrame 进行动画优化

1.2.6 CSS 性能优化

减少 repaint & reflow

合并 CSS 文件，减少 HTTP 请求

使用 will-change 提前优化动画性能

避免使用 table 影响回流

CSS 变量（–var）和 calc() 提高灵活性

2. JavaScript & ES6+

2.1 作用域 & 闭包

作用域链（函数作用域 vs 块级作用域）

闭包原理

闭包的本质是函数嵌套，并引用外部变量

应用场景：私有变量、缓存、事件绑定

常见闭包面试题

function createCounter() {
let count = 0;
return function () {
return ++count;
};
}
let counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

2.2 原型链与继承

原型链

proto vs prototype

Object.create() 实现继承

继承方式

原型继承

构造函数继承

组合继承（call + prototype）

ES6 class 继承

2.3 事件循环（Event Loop）

执行顺序

先执行 同步任务

然后执行 微任务（Promise.then、MutationObserver）

再执行 宏任务（setTimeout、setInterval、requestAnimationFrame）

示例题

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

输出顺序：1 → 4 → 3 → 2

2.4 Promise & async/await

Promise 三种状态：pending、fulfilled、rejected

手写 Promise.all

function promiseAll(promises) {
return new Promise((resolve, reject) => {
let results = [];
let count = 0;
promises.forEach((promise, index) => {
promise.then(res => {
results[index] = res;
count++;
if (count === promises.length) {
resolve(results);
}
}).catch(reject);
});
});
}

2.5 深拷贝与浅拷贝

浅拷贝：Object.assign()、…spread

深拷贝

JSON.parse(JSON.stringify(obj))（无法处理 function、Date、undefined）

递归深拷贝

function deepClone(obj) {
if (obj === null || typeof obj !== ‘object’) return obj;
let copy = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
copy[key] = deepClone(obj[key]);
}
}
return copy;
}

2.6 ES6+ 语法

解构赋值（const {name} = obj）

扩展运算符（const arr2 = […arr1]）

箭头函数（this 绑定）

Symbol、Proxy、Reflect

可选链 ?.、空值合并 ??

Day 2 行动计划

1. 速刷前端基础八股文

推荐阅读 前端面试手册

刷 fe-interview

2. 刷 LeetCode 简单题

两数之和 (twoSum)

有效的括号 (isValid)

3. 手写以下代码

deepClone（深拷贝）

Promise.all

call/apply/bind

EventEmitter（发布-订阅模式）

总结：第一天重点是夯实基础知识，尤其是 作用域、闭包、事件循环、Promise、CSS 性能优化 等，确保不会被低级问题绊倒。