前端基础知识

前端基础知识完整梳理（2026年实用版）
适合0-2年前端从业者快速查漏补缺 / 面试复习 / 自学路线规划

一、前端知识体系层级图（2026主流认知）

┌──────────────────────────────┐
│         浏览器与网络         │  ★★★★★  理解底层原理最重要
├──────────────────────────────┤
│         HTML + CSS           │  ★★★★☆  基础但决定上限
│         (语义化+布局+响应式) │
├──────────────────────────────┤
│         JavaScript 核心      │  ★★★★★  真正拉开差距的地方
│   (执行机制+原型+闭包+异步)  │
├──────────────────────────────┤
│     现代开发必备技能         │
│   · TypeScript               │
│   · 模块化(ESM/CommonJS)     │
│   · 包管理(pnpm/npm/yarn)    │
│   · Git 工作流               │
├──────────────────────────────┤
│         框架/库（选其一深耕）│
│   React → Next.js 15+        │
│   Vue 3 → Nuxt 4             │
│   Svelte/SvelteKit           │
├──────────────────────────────┤
│         工程化与工具链       │
│   Vite / esbuild / turbopack │
│   ESLint + Prettier + Stylelint│
│   husky + lint-staged        │
│   Vitest / Jest / Playwright │
└──────────────────────────────┘
         ↓ 越往上越卷，但越往下越吃香

二、2026年最常考/最该掌握的前端基础知识清单（分层）

层级1：必须滚瓜烂熟（天天用，面试必问）

1. HTML

• 语义化标签（article/nav/aside/section/header/footer/main/figure等）
• meta 标签常见写法（viewport/charset/X-UA-Compatible/SEO相关）
• HTML5 新增API（Canvas/Web Storage/Geolocation/拖拽等）

1. CSS

• 盒模型（box-sizing 两种区别）
• 常见布局方式对比（2026主流）
  • flex（最常用）
  • grid（二维布局神器）
  • 圣杯/双飞翼（已较少考，但理解原理仍有价值）
• BFC/IFC/FFC/GFC 触发条件及应用
• 层叠上下文（z-index 层级管理）
• 常见单位区别（px/rem/em/vw/vh/vmin/vmax/lh）
• 选择器权重计算
• 伪类与伪元素区别（:hover ::before）

1. JavaScript 核心（最重要！）

• 作用域 & 闭包（经典闭包题：for循环+setTimeout）
• this 指向（箭头函数 vs 普通函数）
• 原型 & 原型链（Object.create / instanceof / proto）
• 继承的几种实现方式（2026最推荐：组合寄生 + class）
• 事件循环 & 宏任务微任务（Promise.then / setTimeout / requestAnimationFrame）
• 深浅拷贝（结构化克隆 vs JSON.parse/stringify 局限）
• 垃圾回收机制（标记清除 + 引用计数）

层级2：中高级常考 & 工作中高频（拉开差距）

• 事件模型（捕获-目标-冒泡）
• 事件委托 & 事件冒泡阻止（stopPropagation vs stopImmediatePropagation）
• Promise 所有静态方法（all / allSettled / any / race）
• async/await 底层原理（Generator + Promise）
• ES6+ 重要特性（解构、展开运算符、可选链、??、BigInt、Symbol）
• 模块化发展史（IIFE → AMD → CMD → CommonJS → ESM）
• 浏览器渲染原理（关键渲染路径 CRP）
• 重排（reflow）与重绘（repaint）
• 浏览器缓存机制（强缓存 vs 协商缓存 / Cache-Control vs ETag）

层级3：2026年新趋势 & 加分项（建议了解）

• Container Queries（容器查询）
• :has() 选择器
• 新的 viewport 单位（lvh/svh/dvh）
• 声明式 Shadow DOM
• Web Components（自定义元素 + Shadow DOM + HTML模板）
• 新的图片格式（AVIF / WebP 2.0）
• CSS 嵌套原生支持（& 符号）
• 子网格（subgrid）
• 逻辑属性（inset-block-start 等）
• 新的颜色函数（oklch / color-mix）

三、2026年前端学习最推荐路线（效率最高）

0~3个月：打地基（最重要阶段！）
  HTML语义化 → CSS盒模型+常见布局 → JS基础语法 → 作用域+闭包+this+原型链

3~6个月：进阶核心（决定你天花板）
  事件循环 + Promise + async/await全家桶
  手写常见工具函数（深拷贝、防抖节流、call/apply/bind、new、instanceof）

6~12个月：框架+工程化
  选定一个框架深耕（React 或 Vue 3）
  掌握现代工具链（Vite + TypeScript + pnpm + ESLint）

12个月以后：向高阶进军
  性能优化（首屏、渲染性能、包体积）
  微前端/低代码/设计系统/组件库开发
  服务端渲染/SSG/ISR/Streaming

四、最后送你一句2026年最真实的前端生存建议

“基础越扎实，后期框架换代你越不慌”
框架会变（React 19 → React 20 → React Fiber Forever？）
但浏览器、DOM、CSSOM、事件循环、原型链这些东西十年内都不会有本质变化。

你现在处于哪个阶段？
想重点补哪个模块？（比如事件循环、CSS布局、原型链、手写Promise……）
告诉我，我可以给你更针对性的总结或经典面试题～