前端基础知识

前端基础知识完整梳理（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/拖拽等）

2. CSS

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

3. 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……）
告诉我，我可以给你更针对性的总结或经典面试题～