Day 2:基础知识巩固(HTML、CSS、JavaScript)

发布于:2025-03-17 ⋅ 阅读:(11) ⋅ 点赞:(0)

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


  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() 提高灵活性


  1. 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

  1. 刷 LeetCode 简单题

两数之和 (twoSum)

有效的括号 (isValid)

  1. 手写以下代码

deepClone(深拷贝)

Promise.all

call/apply/bind

EventEmitter(发布-订阅模式)


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