Knowledge_Repository

主题

Teeker2026-04-06
2885
11m

大厂前端面试查漏补缺清单：基础 CSS、网络与工程化 ​

下面给你一份**「大厂前端面试查漏补缺清单」**，覆盖：基础盲区、高频陷阱、工程化细节、框架易混点、安全、网络、手写、项目表达、面试话术，全部是“你以为会了但一开口就漏”的点，帮你把所有题集串成一张完整的安全网。

我会按「最容易翻车 → 最容易加分」排序，你可以直接对照自检。

一、JS 基础盲区（最容易翻车） ​

1. 类型与隐式转换（必补） ​

  • == 与 === 底层区别：== 会先做 ToPrimitive/ToNumber，=== 直接比较类型+值。

  • 常见坑：

    • [] == ![] → true（[] 转 0，![] 转 false 转 0）

    • [] == 0 → true

    • null == undefined → true，null === undefined → false

  • typeof 与 instanceof 区别：

    • typeof 判基本类型，对 null/数组/对象都返回 object，不准。

    • instanceof 基于原型链，只能判对象。

  • 正确判类型：Object.prototype.toString.call(val) === '[object Array]'。

2. 闭包与作用域链（必补） ​

  • 闭包本质：函数 + 其词法环境的引用，即使外层执行完，内部仍能访问外层变量。

  • 闭包用途：模块化、私有变量、柯里化、保存状态。

  • 闭包坑：内存泄漏（定时器/事件/全局引用）、循环中异步取值（用 let/立即执行/传参）。

3. 原型与继承（必补） ​

  • __proto__ vs prototype：

    • __proto__ 是实例指向原型的链。

    • prototype 是函数的“原型对象”，只有函数有。

  • new 做了什么：

    1. 创建空对象

    2. 空对象 __proto__ 指向构造函数 prototype

    3. 构造函数 this 指向该对象

    4. 执行函数

    5. 若返回对象则返回对象，否则返回 this

  • 继承方式：

    • 组合继承（最常用）：原型链继承 + 借用构造函数

    • 寄生组合继承（最优）：避免重复调用父构造函数

    • ES6 extends 本质就是寄生组合继承的语法糖

4. 异步体系（Promise/async/微任务）（必补） ​

  • Promise 三种状态：pending → fulfilled/rejected，状态一旦改变不可再变。

  • then/catch/finally 都返回新 Promise，支持链式。

  • 宏任务/微任务执行顺序（必考）：

    1. 执行同步代码

    2. 清空当前微任务队列

    3. 执行一个宏任务

    4. 再清空微任务

    5. 循环……

  • 常见坑：

    • Promise.resolve().then() 是微任务，比 setTimeout 早。

    • await 后面如果不是 Promise，会被包装成 Promise.resolve。

    • async 函数默认返回 Promise。

5. 函数式/柯里化/防抖节流（必补） ​

  • 柯里化：把多参函数转为单参链式调用，用于参数复用、延迟执行。

  • 防抖：最后一次触发后延迟执行（搜索、输入）。

  • 节流：固定时间内只执行一次（滚动、resize）。

  • 手写必须会：防抖（立即执行版）、节流（时间戳/定时器版）。

二、CSS 盲区（容易被问细节） ​

6. BFC 是什么？触发条件？作用？ ​

答：

  • BFC：块级格式化上下文，独立渲染区域，内部布局不影响外部。

  • 触发：

    • float 不为 none

    • position 为 absolute/fixed

    • display 为 inline-block/flex/grid/table-cell

    • overflow 不为 visible

  • 作用：

    • 清除浮动

    • 阻止 margin 重叠

    • 阻止父元素高度塌陷

7. 层叠上下文（z-index 失效必问） ​

  • z-index 只对定位元素（relative/absolute/fixed/sticky）生效。

  • 层叠上下文形成后，子元素 z-index 只在父上下文内比较。

  • z-index 失效常见原因：

    • 父元素形成了层叠上下文

    • 元素未定位

    • 层级被 transform/opacity 等影响

8. flex 布局细节（必补） ​

  • flex: 1 等价于 flex: 1 1 0%（放大1、缩小1、基础尺寸0）。

  • flex-basis 优先级高于 width。

  • justify-content/align-items/align-self/flex-wrap/gap 必须熟练。

  • 常见坑：

    • 子元素 width: 100% 在 flex 下会被压缩，需 flex-shrink: 0。

9. CSS 性能与渲染（必补） ​

  • 昂贵属性：box-shadow/filter/gradients/opacity 频繁变化会重绘。

  • 动画优先用 transform/opacity（合成线程，不重排）。

  • will-change 提示浏览器，但不要滥用，会占用内存。

三、网络与安全（大厂必问，很多人只懂一半） ​

10. HTTP 缓存完整流程（强缓存/协商缓存）（必补） ​

  • 强缓存：Cache-Control: max-age=xxx（优先）、Expires。

  • 协商缓存：

    • 响应：Last-Modified / ETag

    • 请求：If-Modified-Since / If-None-Match

    • 304 用缓存，200 用新内容

  • 优先级：Cache-Control > Expires；ETag > Last-Modified。

11. HTTPS 流程（必补） ​

  1. 客户端发起 HTTPS 请求（443）

  2. 服务端返回证书（公钥+签名）

  3. 客户端验证证书合法性

  4. 客户端生成随机对称密钥，用服务端公钥加密发送

  5. 服务端用私钥解密得到对称密钥

  6. 后续通信用对称密钥加密（AES）

  • 作用：防窃听、防篡改、防冒充。

12. 跨域与 CORS（必补） ​

  • 跨域：协议/域名/端口任一不同。

  • CORS 简单请求：

    • 方法：GET/HEAD/POST

    • 头：Accept/Accept-Language/Content-Language/Content-Type(application/x-www-form-urlencoded/multipart/form-data/text/plain)

  • 预检请求 OPTIONS：

    • 非简单请求会先发 OPTIONS，服务端返回允许的方法/头/源。

    • 优化：Access-Control-Max-Age 缓存预检结果。

13. 常见安全攻击与防御（必补） ​

  • XSS：注入脚本 → 防御：转义、CSP、HttpOnly、输入校验。

  • CSRF：跨站请求伪造 → 防御：Token、SameSite、Referer 校验。

  • 点击劫持：iframe 覆盖 → 防御：X-Frame-Options、CSP frame-ancestors。

  • 注入攻击：SQL/命令 → 防御：参数化查询、白名单、权限最小化。

四、工程化与构建（容易被问“细节”） ​

14. Webpack 核心概念（必补） ​

  • entry/output/loader/plugin/mode/chunk/bundle。

  • loader：转换非 JS 文件（css-loader、babel-loader）。

  • plugin：扩展功能（HtmlWebpackPlugin、MiniCssExtractPlugin）。

  • 优化：splitChunks、tree shaking、缓存、多进程、DLL。

15. Vite 为什么快（必补） ​

  • 开发：

    • 基于 ES Modules，浏览器按需请求，不打包。

    • esbuild 预构建依赖（比 webpack 快 10-100 倍）。

    • HMR 只更新修改模块，秒级热更。

  • 生产：Rollup 打包，体积更小。

16. Tree Shaking 前提（必补） ​

  • ES Module（import/export）静态分析。

  • 生产模式，开启优化。

  • 无副作用（sideEffects 配置）。

17. 产物分析（必补） ​

  • 工具：webpack-bundle-analyzer、source-map-explorer。

  • 常见问题：

    • 多版本依赖（lodash 多版本）

    • 全量引入 UI 库

    • devDependencies 打入生产包

    • 未 Tree Shaking

五、React 易混点（查漏补缺） ​

18. React 合成事件与原生事件区别（必补） ​

  • 合成事件：委托到 document，减少监听器，跨平台一致。

  • 原生事件：addEventListener，直接绑定到元素。

  • 坑：合成事件是复用对象，异步中需 event.persist()。

19. React.memo / useCallback / useMemet 正确用法（必补） ​

  • memo：缓存组件，浅对比 props。

  • useCallback：缓存函数，避免子组件重渲染。

  • useMemo：缓存计算结果，避免重复计算。

  • 误区：不要无脑包，只有 props 频繁变化、组件重渲染昂贵时才用。

20. Context 性能陷阱（必补） ​

  • value 是对象/函数 → 每次渲染新引用 → 所有消费组件重渲染。

  • 优化：拆分 Context、useMemo 缓存 value、只订阅需要字段。

21. React 18 并发特性（必补） ​

  • 自动批处理：所有场景 setState 合并。

  • useTransition：标记低优先级更新，不阻塞交互。

  • useDeferredValue：延迟非紧急值。

  • Suspense：数据获取 + 加载状态。

六、Vue 易混点（查漏补缺） ​

22. Vue2 vs Vue3 响应式区别（必补） ​

  • Vue2：Object.defineProperty 劫持属性，递归，无法监听新增/删除/数组下标。

  • Vue3：Proxy 代理对象，懒代理，支持新增/删除/Map/Set。

23. ref / reactive / toRefs / toRef（必补） ​

  • ref：包装基本类型/对象，需 .value。

  • reactive：代理对象/数组，直接访问。

  • toRefs：把 reactive 转为 ref 集合，解构不丢失响应式。

  • toRef：为 reactive 某个属性创建 ref。

24. Vue3 编译优化（必补） ​

  • PatchFlag：只 diff 动态节点。

  • 静态提升：静态节点提升到渲染函数外。

  • 事件缓存：内联事件缓存。

25. Vue 组件通信（必补） ​

  • props/ $emit、v-model、provide/inject、eventBus、Vuex/Pinia、$ attrs。

七、Electron 易混点（查漏补缺） ​

26. 主进程 vs 渲染进程（必补） ​

  • 主进程：Node.js，窗口管理、原生 API、IPC。

  • 渲染进程：Chromium，UI 渲染，默认沙箱。

  • preload：安全桥梁，contextBridge 暴露 API。

27. IPC 通信（必补） ​

  • ipcRenderer.send / ipcMain.on（单向）

  • ipcRenderer.invoke / ipcMain.handle（双向 Promise）

  • 避免 sendSync（阻塞渲染）。

28. 安全配置（必补） ​

  • nodeIntegration: false

  • contextIsolation: true

  • 校验参数，防路径遍历/命令注入。

八、性能优化“体系化表达”（面试最加分） ​

29. 性能优化完整方法论（你必须会说） ​

  1. 度量：确定指标（LCP/CLS/FID/包体积）

  2. 分析：Lighthouse/Performance/Network/产物分析

  3. 优化：按优先级（网络 > 渲染 > JS > 内存）

  4. 验证：复测指标

  5. 监控：RUM + 性能预算 + 回归测试

30. 首屏优化万能方案（你必须会说） ​

  • 图片：WebP、懒加载、响应式、骨架屏

  • 资源：关键 CSS 内联、非关键异步、代码分割、Tree Shaking

  • 网络：HTTP 缓存、CDN、预连接、接口合并

  • JS：防抖节流、长任务拆分、Web Worker、懒执行

  • 框架：memo/useCallback/useMemo、虚拟列表、keep-alive

九、手写题“保底清单”（必须全会） ​

下面 10 个是大厂必考手写，你必须能 1 分钟写出来：

  1. 防抖（含立即执行）

  2. 节流（时间戳版）

  3. Promise 手写（简易版）

  4. Promise.all / Promise.race

  5. 深拷贝（简易版/循环引用版）

  6. 柯里化

  7. 数组去重

  8. 数组扁平化

  9. 图片懒加载（Intersection Observer）

  10. 虚拟列表（简易版）

十、项目表达“万能模板”（避免无话可说） ​

面试官问：“介绍一个你最有亮点的项目/做过的优化”

你按这个结构说，稳得一批：

1. 背景（10 秒） ​

  • 项目：XX 平台（后台/电商/工具/桌面端）

  • 技术栈：React/Vue + TS + Webpack/Vite + Electron（如有）

  • 问题：首屏慢、卡顿、体积大、用户体验差

2. 目标（5 秒） ​

  • LCP < 2.5s

  • 包体积减少 30%+

  • 卡顿率下降 50%+

3. 分析（20 秒） ​

  • Lighthouse：LCP 4.2s，CLS 0.25，长任务多

  • Network：图片大、资源多、接口慢

  • Performance：重排重绘频繁、JS 执行长

  • 产物分析：依赖冗余、未 Tree Shaking

4. 方案（40 秒） ​

  • 图片：WebP、懒加载、响应式、骨架屏

  • 资源：关键 CSS 内联、代码分割、懒加载、Tree Shaking

  • 网络：HTTP 缓存、CDN、接口合并、预连接

  • JS：防抖节流、长任务拆分、Web Worker

  • 框架：memo/useCallback/useMemo、虚拟列表、keep-alive

  • 构建：压缩、Gzip、产物分析、依赖裁剪

5. 结果（10 秒） ​

  • LCP 4.2s → 1.6s

  • 包体积减少 40%

  • 卡顿率下降 70%

  • 用户留存/体验提升

十一、最后 10 条“面试保命话术” ​

  1. 不会的题：“这个我不太熟，但我可以按思路推导一下……”（不要直接说不会）

  2. 问原理：“核心是……，解决了……问题，具体流程是……”

  3. 问优化：“先度量，再分析，再优化，再验证，再监控”

  4. 问项目：“背景→问题→分析→方案→结果→数据”

  5. 问框架：“理念→原理→用法→优缺点→适用场景”

  6. 问安全：“风险→原理→防御措施→落地”

  7. 问网络：“流程→状态码→缓存→跨域→优化”

  8. 问手写：“先讲思路，再写代码，再讲边界/优化”

  9. 问未来：“学习计划+技术趋势+结合业务”

  10. 反问环节：“团队技术栈？项目阶段？性能/质量要求？培养机制？”

最终结论 ​

你现在手里的题集 + 上面这份查漏补缺 = 大厂前端面试全覆盖。

只要你把这些内容过一遍 + 手写题练熟 + 项目表达练顺，面试基本稳了。

如果你愿意，我可以最后给你做一份：

「前端面试 20 题终极押题（含标准答案+话术）」

或者

「3 天突击计划（每天 1 小时，直接背）」

你想要哪个？

（注：文档部分内容可能由 AI 生成）

最近更新