前端应注重的基础知识

前言

很多人在框架上侃侃而谈，却栽在最基础的 JavaScript、浏览器和网络知识上。基础不牢，框架学得再多也只是”空中楼阁”。本文把前端最应打牢的基础知识展开讲透，并附上自查清单。

一、JavaScript 核心（重中之重）

1. 作用域与闭包

• 作用域：全局作用域、函数作用域、块级作用域（let/const 引入）
• 作用域链：变量查找沿”内层 → 外层”逐级向上，直到全局
• 闭包：函数能记住并访问其定义时所在词法作用域，即使函数在其作用域外执行
• 典型应用：封装私有变量、防抖节流、函数柯里化、模块化
• 常见坑：循环中 var 变量捕获、闭包导致内存泄漏

// 经典闭包题
for (var i = 1; i <= 5; i++) {
  setTimeout(() => console.log(i), 0); // 输出 6 6 6 6 6
}
// 解法一：改用 let
for (let i = 1; i <= 5; i++) {
  setTimeout(() => console.log(i), 0); // 1 2 3 4 5
}
// 解法二：闭包 + 立即执行函数
for (var i = 1; i <= 5; i++) {
  (function (j) { setTimeout(() => console.log(j), 0); })(i);
}

2. this 指向

this 的指向在调用时确定，而非定义时：

调用方式	this 指向
普通函数调用	undefined（严格模式）/ window（非严格）
对象方法调用	该对象
new 构造调用	新创建的实例
call / apply / bind	显式指定的对象
箭头函数	定义时外层作用域的 this（无自己的 this）

3. 原型与原型链

• 每个函数都有 prototype，每个对象都有 __proto__（指向构造函数的 prototype）
• 原型链：访问属性时沿 __proto__ 逐级向上查找，直到 Object.prototype → null
• 继承方式：原型链继承、构造函数继承、组合继承、class 语法糖（本质仍是原型）
• 高频题：instanceof 原理、new 的过程、手写 Object.create

4. 事件循环（Event Loop）

• 同步任务 → 微任务 → 宏任务的执行顺序是必考点
• 微任务：Promise.then/catch/finally、async/await、queueMicrotask、MutationObserver
• 宏任务：setTimeout、setInterval、setImmediate（Node）、I/O、MessageChannel
• 每次宏任务执行完，会清空所有微任务，再进入下一个宏任务

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 输出顺序：1 4 3 2

5. 异步编程与 Promise

• Promise 状态：pending → fulfilled / rejected，不可逆
• 手写 Promise、Promise.all / allSettled / race / any 的区别
• async/await：是 Generator + Promise 的语法糖，需理解其错误处理与并发控制
• 高频手写：Promise 链式调用、并发限制、超时控制

6. 深浅拷贝

• 浅拷贝：Object.assign、展开运算符 ...、Array.slice/concat
• 深拷贝：JSON.parse(JSON.stringify())（有局限，无法处理函数/undefined/循环引用/Date/RegExp）
• 手写深拷贝需处理：循环引用（WeakMap）、特殊对象类型

二、浏览器基础

1. 渲染流程

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

• 重排（Reflow）：改变几何属性（宽高、位置）会触发重排，代价高
• 重绘（Repaint）：仅样式外观变化，如颜色，代价较低
• 优化：批量改样式、用 transform/opacity（走合成线程）、读写分离

2. 本地存储

存储	容量	生命周期	特点
Cookie	约 4KB	可设置过期时间	随请求自动携带，常用于鉴权
localStorage	约 5MB	永久	同源共享，不自动过期
sessionStorage	约 5MB	会话结束清除	仅当前标签页
IndexedDB	较大	永久	异步、支持事务，适合大量结构化数据

3. 跨域与安全

• 同源策略：协议、域名、端口三者一致才算同源
• 跨域方案：CORS、JSONP（仅 GET）、postMessage、WebSocket、代理（开发环境）
• 安全：XSS（注入脚本）、CSRF（跨站请求伪造）的原理与防御

三、网络基础

1. HTTP 协议

• 常见方法：GET / POST / PUT / DELETE / PATCH / OPTIONS 语义与区别
• 状态码：2xx 成功、3xx 重定向、4xx 客户端错误、5xx 服务端错误（重点记 301/302/304/401/403/404/500）
• HTTP/1.1 vs HTTP/2：多路复用、头部压缩、服务器推送
• HTTPS：TLS 握手、对称/非对称加密、证书机制

2. 浏览器缓存

• 强缓存：Cache-Control（max-age、no-cache、no-store）、Expires
• 协商缓存：ETag / If-None-Match、Last-Modified / If-Modified-Since
• 完整流程：强缓存命中直接用，未命中走协商，再未命中重新请求

3. 从输入 URL 到页面展示

这条”经典串讲”能串联起 DNS 解析、TCP 三次握手、TLS 握手、HTTP 请求、缓存、渲染全流程，务必能完整讲清。

四、CSS 基础

• 盒模型：content-box vs border-box 区别与使用场景
• 选择器优先级：内联 > id > class/属性/伪类 > 元素/伪元素，!important 的例外
• 定位：relative / absolute / fixed / sticky 的参照物与差异
• BFC：块级格式化上下文，解决外边距塌陷、浮动塌陷等问题
• Flex / Grid：现代布局核心，flex: 1 的含义（flex-grow/shrink/basis）
• 居中方案：水平垂直居中的多种实现（flex、grid、绝对定位 + transform）

五、算法与数据结构（中高级加分）

• 高频：数组去重、扁平化、排序（快排/归并）、二分查找、两数之和
• 数据结构：栈、队列、链表、树（二叉树遍历）、哈希表
• 技巧：双指针、滑动窗口、递归回溯
• 不必刷到竞赛级别，但手写中等难度要熟练

六、自查清单

按下面逐条自测，答不上来的就是你的薄弱点：

• 能讲清闭包的形成、应用与陷阱
• 能准确说出任意场景下 this 的指向
• 能手写 new、instanceof、深拷贝、防抖节流
• 能准确说出 Promise 与 async/await 的执行顺序
• 能讲清事件循环的宏任务与微任务
• 能说清浏览器从输入 URL 到渲染的完整流程
• 能区分强缓存与协商缓存，并说明如何配置
• 能讲清 CORS、XSS、CSRF 的原理与防御
• 能讲清 Flex 布局的常用属性与 flex: 1 含义
• 能手写一道中等难度的算法题

总结

前端基础知识就那么多，JavaScript 核心（作用域/this/原型/事件循环/异步）+ 浏览器渲染 + 网络与缓存是最关键的三大块。把这几块吃透，再叠加框架和工程化，面试时才能从容应对、以不变应万变。

---

内容由 AI 生成，仅供参考。本文发布于 码上学习，转载请注明出处。