知
前端公共基础按模块推进的系统课267 分钟14 节5 个模块

前端基础:从语言到渲染

从 HTML/DOM 与第一个可交互页面讲起,串起类型与作用域、事件循环、Promise、包管理与构建、网络缓存、浏览器渲染、CSS、TypeScript、Git 与调试。每节包含机制、代码与自测。

读完之后你能

  • 用原生 JS 写出可交互页面并解释事件模型
  • 讲清事件循环与从输入 URL 到首屏的完整链路
  • 用 npm、Vite、TypeScript 搭建并调试项目
  • 用渲染流水线与错误监控定位线上问题
  • 用环境约束审出 AI 代码的兼容性与安全洞

适合谁

  • 刚入门前端、需要补齐语言与工程底座的学习者
  • 面试前想系统梳理浏览器、网络与 CSS 的开发者

读前准备

  • 基本计算机操作与命令行使用
  • 无需框架经验,了解 HTML 标签的基本概念即可
已读 0 / 140%

目录

建议按顺序阅读,每节末尾可跳转到对应题目自测

模块一 · 语言与 DOM

0 / 4
  1. 01

    起点:HTML、DOM 与第一个可交互页面

    框架之前先有页面。这一节讲清 HTML 的语义结构、表单与可访问性、DOM 树与事件模型,并用原生 JS 写出一个可用的待办列表。

    19 分钟
  2. 02

    类型、作用域与模块:JS 的三块地基

    类型决定值怎么比较,作用域决定变量在哪可见,模块决定代码怎么组织。这一节把三块地基讲透,并给出高频追问的答法。

    21 分钟
  3. 03

    事件循环:为什么 Promise 先于 setTimeout

    事件循环不是"队列转圈",而是调用栈、宏任务、微任务与渲染时机的协作。这一节用可复现的例子讲清执行顺序。

    18 分钟
  4. 04

    异步的本质:从回调到 Promise 到 async/await

    Promise 不是"更优雅的回调",而是可组合的异步值。这一节讲清状态机、链式错误冒泡、并发控制与取消,以及 async/await 的等价转换。

    18 分钟

模块二 · 工程化与网络

0 / 4
  1. 05

    包管理与构建:npm、语义化版本与 Vite

    现代前端的第一道门槛不是语法,而是依赖与构建。这一节讲清 package.json、锁文件与语义化版本,以及 Vite 为什么快、配置项各自管什么。

    19 分钟
  2. 06

    从输入 URL 到页面渲染:完整链路

    一道题串起 DNS、TCP、TLS、HTTP 与浏览器渲染。这一节按时间顺序拆解每一跳,并指出每一跳能优化什么。

    19 分钟
  3. 07

    网络与缓存:一个请求要付出多少成本

    一次请求的成本由 DNS、连接、TLS、传输与解析共同决定。这一节讲清 HTTP 版本差异、缓存策略、CDN、跨域与安全,以及可落地的优化手段。

    21 分钟
  4. 08

    浏览器渲染与性能:卡顿到底发生在哪一步

    卡顿不是"代码慢",而是主线程被长任务占住、布局被反复触发或合成层过多。这一节按流水线定位,并给出可验证的优化手段。

    21 分钟

模块三 · 样式与类型

0 / 2
  1. 09

    CSS 布局与层叠:把页面摆对

    布局问题大多不是"属性没记住",而是盒模型、包含块、BFC 与层叠上下文没理清。这一节按这四条主线把 CSS 讲成可推理的规则。

    19 分钟
  2. 10

    TypeScript:给 JavaScript 加一层可执行的契约

    类型不是注释,而是能在编译期拦下错误的设计工具。这一节讲清类型收窄、泛型、工具类型与 interface/type 的取舍,并给出迁移老代码的顺序。

    19 分钟

模块四 · 协作与表达

0 / 2
  1. 11

    Git 与协作:分支模型、撤销与代码评审

    Git 的难点不是命令,而是"每个操作影响哪一层"。这一节讲清四个区、四种撤销、两种分支模型,以及一次合格的 PR 应该包含什么。

    18 分钟
  2. 12

    测试与调试:把问题缩小到一行

    调试能力决定了修复速度。这一节讲清断点与网络面板的正确用法、错误监控的三层捕获、最小单测的写法,以及"先复现再二分"的排查顺序。

    18 分钟

模块五 · AI 协作与表达

0 / 2
  1. 13

    AI 协作与代码评审:语言与浏览器层怎么审

    语言、网络、浏览器这些"地基"是 AI 最容易糊弄的地方:能跑、有类型、看起来没问题,但兼容性、竞态和安全处处是洞。这一节给出地基层的评审清单。

    19 分钟
  2. 14

    面试表达:把前端基础讲成一条链路

    前端基础题看似零散,其实可以用"输入 URL 到交互"一条主线串起来。这一节给出主线讲法、五个高频题的答法与项目案例模板。

    18 分钟