知识串联与应答路线

各章节是「单点知识」；本页把它们收成一条可跟的线：先说清怎么答场，再按追问链把知识点串起来，最后给复习顺序。

自己的答题卡（说法 + 题面对照）→ 我的归纳

公司场合可把本页当「前端知识总览」用；备面时按「一场技术面」走即可。

1. 一场技术面通常怎么走

多数前端一面 / 二面大致是这条线（时间会压缩，但顺序差不多）：

text

自我介绍（1 min）
  → 项目深挖（10–20 min）
  → 框架原理（Vue）
  → JS / 浏览器基础
  → 工程化 / 性能 / 网络安全（穿插）
  → 手写或布局小开（视岗位）
  → 行为面 / 反问

阶段	考官想听什么	你打开哪一章
开场	是谁、栈是什么、代表作	软技能 · 项目笔记
项目	职责边界、难点、取舍、结果	项目笔记 · UniApp
框架	响应式、生命周期、通信、状态	Vue3 · Vue2
语言	闭包、原型、异步、模块	JavaScript
浏览器	搜索引擎 / SEO、渲染、跨域、存储、缓存、安全	浏览器
样式	盒模型、BFC、定位、flex	HTML+CSS · 手写与布局
工程	Vite/Webpack、封装、性能	工程化 · 构建
手写	防抖、深拷贝、call、居中	手写与布局
收尾	协作、规划、反问	软技能

应答习惯（贯穿全场）： 是什么 → 为什么 → 怎么做 → 我项目里怎么用过 → 边界/坑。单点背答案不如「能接到下一问」。

2. 知识地图（谁依赖谁）

从下往上搭：语言与浏览器是底，框架建在上面，工程和项目是落地。

mermaid

flowchart TB
  subgraph base [底座]
    htmlcss[HTML_CSS]
    js[JavaScript]
    browser[浏览器与网络]
  end
  subgraph mid [应用层]
    vue[Vue2_Vue3]
    uni[UniApp]
    ts[TypeScript]
  end
  subgraph top [落地]
    eng[工程化与性能]
    proj[项目实战]
    hw[手写与布局]
  end
  htmlcss --> vue
  js --> vue
  browser --> vue
  js --> uni
  vue --> uni
  js --> ts
  vue --> eng
  browser --> eng
  vue --> proj
  uni --> proj
  eng --> proj
  htmlcss --> hw
  js --> hw

复习别跳着背：没搞清 EventLoop 就很难讲清 async/await 和 Vue nextTick；没搞清 同源 / 跨域 就很难讲清 登录 cookie / token 方案。

3. 高频追问链（把单点串成故事）

下面每条链是里常见的「一路追问」。链上每环点进对应章节补细节。

链 A：从打开页面讲到渲染

输入 URL → DNS/TCP/HTTP → 解析 HTML → CSSOM → 渲染树 → 布局/绘制 → 合成

常追问：强缓存/协商缓存插在哪？script 为什么阻塞？重排重绘差在哪？

链 B：跨域 → 登录态 → 请求封装

同源策略 → 跨域现象 → CORS / 代理 / Nginx → Cookie 何时带上 → token 存在哪 → Axios 拦截 → 401 刷新

常追问：localStorage 为啥不自动带请求？开发代理上线还管用吗？无感刷新怎么排队？

链 C：JS 异步一条线

同步阻塞 → 为什么要异步 → 宏任务/微任务 → EventLoop → Promise 状态 → async/await → 手写 Promise

常追问：setTimeout(0) 和 Promise.then 谁先？async 返回什么？

链 D：this / 闭包 / 原型（语言三件套）

作用域链 → 闭包保活变量 → this 谁调用谁 → call/apply/bind → 原型链查找 → new 做了什么 → class 是语法糖

常追问：箭头函数 this？手写 bind？instanceof 原理？

链 E：CSS 布局从原理到能写

盒模型 → BFC → position → flex/grid 概念 → 居中/多栏/小三角动手

常追问：假白和滚动模型（可接到项目列表）；两栏怎么写？

链 F：Vue 响应式到性能

数据变 → 为什么视图更新（Proxy / defineProperty）→ 依赖收集 → 虚拟 DOM / diff → key → nextTick → 懒加载 / 虚拟列表

常追问：ref 和 reactive？Vue2 数组陷阱？keep-alive？

链 G：工程化（开发快 → 上线稳）

ESM → Vite vs Webpack → 性能四块 → 懒加载 / 虚拟列表 → Axios → 打包拆包 / 线上排查

链 H：搜索引擎怎么抓页、前端怎么做 SEO

爬虫抓 HTML → 建索引 / 排名 → SPA（单页应用）空壳 → SSR（服务端渲染）/ SSG（静态站点生成）→ 语义化 / title / sitemap（站点地图）→ 页面体验

常追问：Vue SPA 为啥不利于 SEO？robots.txt（爬虫协议）和 sitemap 各干什么？语义化和 SEO 什么关系？

链 I：项目主线（用你的飞啾串八股）

官问项目时，主动把难点映射到知识点，显得体系而不是背题：

你讲的项目点	背后知识点
uni-app 非自选 + 高德：合规 → SDK → bundle vs Vite ESM	合规意识、构建形态、第三方包适配
登录回跳 / pendingUrl / redirectTo / Composable	小程序路由栈、鉴权门控、逻辑复用
token 本地存 + 用户信息广播分发	请求封装、状态分发、存储选型
列表假白 / scroll-view	滚动模型（不是虚拟列表）
分包 / 体积	小程序约束、工程优化

完整口述见题面卡 · 项目实战 · 项目笔记文末 1 分钟介绍。

4. 建议复习顺序（由浅入深）

按下面顺序过一轮，每块先看概念页，再动手写手写页里对应题。

第一优先级（几乎必问）

JavaScript：变量声明 → 类型 → ES6 → 闭包/this → 原型 → 异步 → 事件 / GC
浏览器里搜索引擎 / SEO、URL 全流程、缓存、跨域、安全
Vue3（主栈）+ 对照 Vue2 差异题
项目 · 实战三块难点口述（百科项目笔记）
手写与布局：防抖节流、深拷贝、居中、call（按岗位加 Promise）

第二优先级（加分 / 深挖）

HTML+CSS 原理段（盒模型、BFC、flex）+ 预处理器
架构：选型、Vite vs Webpack、虚拟 DOM
工程 · 实践：性能、Axios（百科 engineering）
构建 · 追问：Loader、Tree-shaking（百科 build）
UniApp（有小程序岗必看）
TypeScript
软技能自我介绍与反问

第三优先级（了解 / 追问）

架构 B 段：微前端、设计模式（了解级）

5. 怎么用本仓库答题（实操建议）

以本页为目录：先选一条追问链，顺着链接把「下一问」也看完，不要只刷单题。
概念 + 手写拆开：概念在各章；代码落在手写与布局，前专门开一手写专场默写。
每道题练「接下一句」：答完自问「他可能追问什么」，对照上面的链。
项目优先：任何八股尽量落到飞啾三块里的一句真实经历。
模拟一场：计时 45 分钟，按「介绍 → 项目 → Vue → JS → 手写一题 → 反问」过一遍，卡壳处回链补洞。

6. 章节速查

章节	定位
JavaScript	语言底座
手写与布局	动手题专场
HTML+CSS	结构与样式原理；末节 Less / SCSS
浏览器	运行环境、SEO、网络与安全；重排重绘
Vue2 / Vue3	框架怎么用（用法）
UniApp	多端 / 小程序差异
TypeScript	类型入门
工程化	Vite/Webpack 细讲、项目性能清单、Axios（实践）
构建	Webpack / Babel / 模块化原理（追问用）
架构	按场景选型；Vue2 vs 3、Pinia、虚拟 DOM、Vite vs Webpack；微前端了解级
项目笔记	实战深挖
软技能	表达与 HR

知识串联与应答路线 ​

1. 一场技术面通常怎么走 ​

2. 知识地图（谁依赖谁） ​

3. 高频追问链（把单点串成故事） ​

链 A：从打开页面讲到渲染 ​

链 B：跨域 → 登录态 → 请求封装 ​

链 C：JS 异步一条线 ​

链 D：this / 闭包 / 原型（语言三件套） ​

链 E：CSS 布局从原理到能写 ​

链 F：Vue 响应式到性能 ​

链 G：工程化（开发快 → 上线稳） ​

链 H：搜索引擎怎么抓页、前端怎么做 SEO ​

链 I：项目主线（用你的飞啾串八股） ​

4. 建议复习顺序（由浅入深） ​

第一优先级（几乎必问） ​

第二优先级（加分 / 深挖） ​

第三优先级（了解 / 追问） ​

5. 怎么用本仓库答题（实操建议） ​

6. 章节速查 ​