目标:强化前端基础知识,确保基础无短板,避免基础问题翻车。
- 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() 提高灵活性
- 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 行动计划
- 速刷前端基础八股文
推荐阅读 前端面试手册
刷 fe-interview
- 刷 LeetCode 简单题
两数之和 (twoSum)
有效的括号 (isValid)
- 手写以下代码
deepClone(深拷贝)
Promise.all
call/apply/bind
EventEmitter(发布-订阅模式)
总结:第一天重点是夯实基础知识,尤其是 作用域、闭包、事件循环、Promise、CSS 性能优化 等,确保不会被低级问题绊倒。