2026 年大厂前端岗位面试高频题库与解析

前言：前所未有的挑战与机遇

2026 年的前端面试，早已不再是刷几套'八股文'就能轻松过关的年代。如果你正准备冲击'金三银四'的大厂 Offer，首先需要清醒地认识到：市场对前端工程师的定义正在被 AI 和行业寒冬彻底重塑。

当前，AI 工具已能完成前端 60% 以上的基础页面构建工作，企业对初级岗位的需求急剧萎缩，而留下的岗位则对候选人提出了近乎严苛的要求。大厂前端岗的面试难度，已经从考察'你会不会写代码'，彻底转向了考察'你能否解决 AI 解决不了的复杂问题'以及'你是否具备从 0 到 1 搭建和维护系统的能力'。这份《26 年金三大厂前端岗面试 1000 道高频面试原题（含答案）》，正是基于这一背景，为你揭示高难度面试背后的真实逻辑。

一、难度升级：面试考察的三个维度转型

1. '八股文'消亡，场景题与架构设计成为主流

如果你还停留在背诵 var 和 let 区别的阶段，大概率会在初面就折戟沉沙。根据近期面试复盘，几乎没有大厂再单纯问语法细节，取而代之的是清一色的项目场景题。例如：

• 性能优化： '当 QPS 达到峰值时，前端该如何处理？' '如何统计长任务时间并保证页面不卡顿？'
• 复杂场景实现： '如何一次性渲染十万条数据还能保证页面不卡顿？' '如何实现大文件上传的断点续传？'
• 工程化能力： '如何从 0 到 1 搭建前端基建？' '如何设计一套全站请求耗时统计工具？'

2. 从'框架用户'到'原理架构师'

大厂面试官不再满足于你读过 React 或 Vue 的源码解读，而是希望你理解设计哲学。

• React： 你必须能说清 Fiber 架构到底解决了什么问题，而不是简单提及虚拟 DOM。
• Vue： 你需要深入理解响应式系统的 Proxy 陷阱和依赖追踪机制。
• 工程化： 你需要对比 Vite 和 Webpack 在热更新上的本质区别，并能手写 Plugin 或 Loader。

3. TypeScript 与 AI 流利度成为'入场券'

2026 年，TypeScript 早已不是加分项，而是必考项。面试中不仅考察基础类型，更会深入到'类型体操'层面，例如要求你手写 DeepReadonly、Get<T, K> 等多级路径类型，或是分布式条件类型的推导。同时，面试官会高度关注你如何利用 AI 提效：你如何审查 AI 生成的代码？如何建立提示词模板把经验产品化？这被称之为'AI 流利度'。

二、大厂面试的'死亡'细节：综合性极强

本套题库汇编了 1000 道高频原题，覆盖了当前大厂面试中让大多数人感到棘手的核心痛点。具体难度体现在以下几个'地狱级'专题中：

1. JavaScript 核心与进阶（约 300+ 题）
   • 难点： 不仅是宏任务/微任务的输出顺序，更是让你手写符合 A+ 规范的 Promise、实现并发限制的调度器、甚至用 Generator 模拟 async/await。
   • 典型题： 为什么要有事件循环？请手写一个 LRU 缓存 函数。
2. 框架源码与原理（React/Vue 约 300+ 题）
   • 难点： 深挖底层原理。Vue 中为何不建议把 v-if 和 v-for 同时用在同一个元素上？React 的合成事件对象池是为了解决什么历史问题？
   • 趋势： 横向对比题增多，如 Vue3 的响应式更新与 React 的状态更新有何本质区别？
3. TypeScript 类型体操（100+ 题）
   • 难点： 让无数经验丰富的开发者'翻车'。需要你精通 infer、条件类型、映射类型和模板字面量类型。
   • 典型题： 实现一个 IsEqual<T, U> 判断两个类型是否完全相等；如何把联合类型转成交叉类型？
4. 性能优化与安全（100+ 题）
   • 难点： 不仅要说出方案，还要能量化成果（如 LCP 从 3.2s 降至 1.1s）并手写核心代码。
   • 典型题： 前端如何防止爬虫？如何防止别人调试自己的前端页面代码？如何防范 XSS 和 CSRF？
5. 全栈与工程化（Node/Webpack/网络 约 200+ 题）
   • 难点： 要求你具备跨越前端的'系统思维'。你需要理解 BFF 层、DevOps 流程、Docker 部署等。
   • 典型题： Node 如何充分利用多核 CPU？如何设计一个前端的埋点 SDK？HTTP/2 对比 HTTP/1.1 有哪些真正的优势？

三、总结：为什么你需要这份题库？

在 2026 年，'只会写页面'的前端会越来越便宜，甚至被 AI 替代，但能驾驭 AI、设计系统、解决深层次性能问题的前端会极其抢手。这份《26 年金三大厂前端岗面试 1000 道高频面试原题（含答案）》不仅是一本题集，更是一份大厂面试难度的诊断书。它旨在帮助你：

• 拒绝无效刷题： 直击当前大厂最关注的'场景题'与'架构设计'。
• 构建知识体系： 从 JS 基础到浏览器原理，从框架源码到工程实践，帮你串联起碎片化的知识。
• 提升思维层级： 让你从一名普通的'代码执行者'转变为能够独立解决复杂问题的'技术方案提供者'。

如果你准备好了迎接这场高难度的挑战，那么请翻开下一页。记住，现在的每一次深度思考，都是为了在面试场上证明：你比 AI 更懂业务，比工具更懂架构。

面试高频手写题

建议优先掌握：

• instanceof - 考察对原型链的理解
• new - 对创建对象实例过程的理解
• call/apply/bind - 对 this 指向的理解
• 手写 promise - 对异步的理解
• 手写原生 ajax - 对 ajax 原理和 http 请求方式的理解，重点是 get 和 post 请求的实现

1. 实现防抖函数（debounce）

防抖函数原理： 把触发非常频繁的事件合并成一次去执行 在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算

防抖动和节流本质是不一样的。防抖动是将多次执行变为 最后一次执行，节流是将多次执行变成 每隔一段时间执行

eg. 像百度搜索，就应该用防抖，当我连续不断输入时，不会发送请求；当我一段时间内不输入了，才会发送一次请求；如果小于这段时间继续输入的话，时间会重新计算，也不会发送请求。

手写简化版:

// func 是用户传入需要防抖的函数
// wait 是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器 id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function (...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

适用场景：

• 文本输入的验证，连续输入文字后发送 AJAX 请求进行验证，验证一次就好
• 按钮提交场景：防止多次提交按钮，只执行最后提交的一次
• 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似

2. 实现节流函数（throttle）

节流函数原理：指频繁触发事件时，只会在指定的时间段内执行事件回调，即触发事件间隔大于等于指定的时间才会执行回调函数。总结起来就是： 事件，按照一段时间的间隔来进行触发。

像 dom 的拖拽，如果用消抖的话，就会出现卡顿的感觉，因为只在停止的时候执行了一次，这个时候就应该用节流，在一定时间内多次执行，会流畅很多

手写简版

使用时间戳的节流函数会在第一次触发事件时立即执行，以后每过 wait 秒之后才执行一次，并且最后一次触发事件不会被执行

时间戳方式：

// func 是用户传入需要防抖的函数
// wait 是等待时间
const throttle = (func, wait = 50) => {
  // 上一次执行该函数的时间
  let lastTime = 0
  return function (...args) {
    // 当前时间
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}
setInterval(throttle(() => {
  console.log(1)
}, 500), 1)

定时器方式：

使用定时器的节流函数在第一次触发时不会执行，而是在 delay 秒之后才执行，当最后一次停止触发后，还会再执行一次函数

function throttle(func, delay) {
  var timer = 0
  return function () {
    var context = this
    var args = arguments
    if (timer) return // 当前有任务了，直接返回
    timer = setTimeout(function () {
      func.apply(context, args)
      timer = 0
    }, delay)
  }
}

适用场景：

• 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动。DOM 元素的拖拽功能实现（mousemove）
• 缩放场景：监控浏览器 resize
• 滚动场景：监听滚动 scroll 事件判断是否到页面底部自动加载更多
• 动画场景：避免短时间内多次触发动画引起性能问题

总结

• 函数防抖： 限制执行次数，多次密集的触发只执行一次
  • 将几次操作合并为一次操作进行。原理是维护一个计时器，规定在 delay 时间后触发函数，但是在 delay 时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
• 函数节流： 限制执行的频率，按照一定的时间间隔有节奏的执行
  • 使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

1. JavaScript (323 题)

1. 不会冒泡的事件有哪些？
2. mouseEnter 和 mouseOver 有什么区别？
3. MessageChannel 是什么，有什么使用场景？
4. async、await 实现原理
5. Proxy 能够监听到对象中的对象的引用吗？
6. 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？
7. 下面代码会输出什么？
8. 描述下列代码的执行结果
9. 什么是作用域链？
10. bind、call、apply 有什么区别？如何实现一个 bind？
11. CommonJS 和 ES6 中模块引入的区别？
12. 说说 Vue3 中的响应式设计原理
13. script 标签放在 header 里和放在 body 底部里有什么区别？
14. 下面代码中，点击'+3'按钮后，age 的值是什么？
15. Vue 中，created 和 mounted 两个钩子之间调用时间差值受什么影响？
16. Vue 中，推荐在哪个生命周期发起请求？
17. 为什么 Node 在使用 ES Module 时必须加上文件扩展名？
18. package.json 文件中的 devDependencies 和 dependencies 对象有什么区别？
19. React Portals 有什么用？
20. React 和 React-DOM 是什么关系？
21. MessageChannel 是什么，有什么使用场景？
22. React 中为什么不直接使用 requestIdleCallback？
23. 为什么 React 需要 Fiber 架构，而 Vue 却不需要？
24. 子组件是一个 Portal，发生点击事件能冒泡到父组件吗？
25. async、await 实现原理
26. 前端性能优化指标有哪些？怎么进行性能检测？
27. Proxy 能够监听到对象中的对象的引用吗？
28. CSS 中的 animation、transition、transform 有什么区别？
29. 使用 Promise 实现红绿灯交替重复亮
30. 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？
31. React 为什么要废弃 componentWillMount, componentWillReceiveProps, componentWillUpdate 这三个生命周期？
32. 说说 React render 方法的原理？在什么时候会被触发？
33. 下面代码会输出什么？

2. CSS (61 题)

1. CSS 中的 animation, transition, transform 有什么区别？
2. 怎么做移动端的样式适配？
3. 相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？
4. grid 网格布局是什么？
5. CSS3 新增了哪些特性？
6. 怎么使用 CSS3 实现动画？
7. 怎么理解回流跟重绘？什么场景下会触发？
8. 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？
9. 如果使用 CSS 提高页面性能？
10. 如何实现单行/多行文本溢出的省略样式？
11. 如何使用 CSS 完成视差滚动效果？
12. 怎么使用 CSS 如何画一个三角形
13. 说说对 CSS 工程化的理解
14. 怎么触发 BFC，BFC 有什么应用场景？
15. 单行文本怎么实现两端对齐？
16. 说说你对 CSS 模块化的理解
17. CSS 模块化的实现方式
18. 怎么让 Chrome 支持小于 12px 的文字？
19. 怎么让 Chrome 支持小于 12px 的文字？
20. flexbox（弹性盒布局模型）是什么，适用什么场景？
21. 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
22. 设备像素、CSS 像素、设备独立像素、dpr、ppi 之间有什么区别？
23. 说说你对盒子模型的理解
24. 怎么实现样式隔离？
25. flex 布局下，怎么改变元素的顺序？
26. "flex:auto;" 是什么意思？
27. object-fit 用法
28. 行内元素和块级元素有什么区别
29. em/px/rem/vh/vw 这些单位有什么区别？
30. HTML 和 CSS 中的图片加载与渲染规则是什么样的？
31. CSS 中，有哪些方式可以隐藏页面元素？有什么区别？
32. CSS3 中 transition 和 animation 的属性分别有哪些？
33. 说说对 CSS 预编译语言的理解，以及它们之间的区别

3. HTML (57 题)

1. 什么是 DOM 和 BOM？
2. 简单描述从输入网址到页面显示的过程
3. 一台设备的 dpr，是否是可变的？
4. 前端该如何选择图片的格式？
5. 前端跨页面通信，你知道哪些方法？
6. 说说你对 DOM 树的理解
7. 行内元素有哪些？块级元素有哪些？空 (void) 元素有那些？
8. HTML 和 CSS 中的图片加载与渲染规则是什么样的？
9. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
10. script 标签为什么建议放在 body 标签的底部 (defer、async)
11. 说说你对 SSG 的理解
12. 什么是 HTML5，以及和 HTML 的区别是什么？
13. 什么是渐进增强和优雅降级？
14. Node 和 Element 是什么关系？
15. 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
16. 如何控制 input 输入框的输入字数？
17. 渐进式 jpg 有了解过吗？
18. 假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？
19. 怎么实现'点击回到顶部'的功能？
20. SPA 应用怎么进行 SEO？
21. 如何实现 SEO 优化
22. SEO 是什么？
23. SEO 的原理是什么？
24. DNS 预解析是什么？怎么实现？
25. HTML5 有哪些 drag 相关的 API？
26. 浏览器乱码的原因是什么？如何解决？
27. Canvas 和 SVG 有什么区别？
28. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？
29. HTML5 的离线储存怎么使用，它的工作原理是什么
30. img 的 srcset 属性的作用？
31. label 标签有什么用？
32. JS 和 CSS 是如何影响 DOM 树构建的？
33. CSSOM 树和 DOM 树是同时解析的吗？
34. 如何实现浏览器内多个标签页之间的通信？

4. React (83 题)

1. 下面代码中，点击'+3'按钮后，age 的值是什么？
2. React Portals 有什么用？
3. React 和 React-DOM 是什么关系？
4. React 中为什么不直接使用 requestIdleCallback？
5. 为什么 React 需要 Fiber 架构，而 Vue 却不需要？
6. 子组件是一个 Portal，发生点击事件能冒泡到父组件吗？
7. React 为什么要废弃 componentWillMount, componentWillReceiveProps, componentWillUpdate 这三个生命周期？
8. 说说 React render 方法的原理？在什么时候会被触发？
9. 说说 React 事件和原生事件的执行顺序
10. 说说对受控组件和非受控组件的理解，以及应用场景？
11. 你在 React 项目中是如何使用 Redux 的？项目结构是如何划分的？
12. 说说对 Redux 中间件的理解？常用的中间件有哪些？实现原理？
13. 说说你对 Redux 的理解？其工作原理？
14. 说说你对 immutable 的理解？如何应用在 React 项目中？
15. 说说 React JSX 转换成真实 DOM 过程？
16. 说说你在 React 项目是如何捕获错误的？
17. 说说 React 服务端渲染怎么做？原理是什么？
18. React Fiber 是如何实现更新过程可控？
19. Fiber 为什么是 React 性能的一个飞跃？
20. setState 是同步，还是异步的？
21. 简述下 React 的事件代理机制？
22. 简述下 React 的生命周期？每个生命周期都做了什么？
23. 为什么不能在循环、条件或嵌套函数中调用 Hooks？
24. 说说你对 useContext 的理解
25. 说说你对 useMemo 的理解
26. 说说你对自定义 hook 的理解
27. 如何让 useEffect 支持 async/await？
28. 我们应该在什么场景下使用 useMemo 和 useCallback？
29. 说说你对 React Hook 的闭包陷阱的理解，有哪些解决方案？
30. React18 新特性
31. React 中，怎么实现父组件调用子组件中的方法？
32. 你常用的 React Hooks 有哪些？
33. 说说你对 useReducer 的理解

5. Vue (80 题)

1. Vue 有了数据响应式，为何还要 diff？
2. Vue3 为什么不需要时间分片？
3. Vue3 为什么要引入 Composition API？
4. 谈谈 Vue 事件机制，并手写 $on、$off、$emit、$once
5. computed 计算值为什么还可以依赖另外一个 computed 计算值？
6. 说一下 vm.$set 原理
7. 怎么在 Vue 中定义全局方法？
8. Vue 中父组件怎么监听到子组件的生命周期？
9. Vue 组件里写的原生 addEventListener 监听事件，要手动去销毁吗？为什么？
10. 说说 Vue3 中的响应式设计原理
11. Vue 中，created 和 mounted 两个钩子之间调用时间差值受什么影响？
12. Vue 中，推荐在哪个生命周期发起请求？
13. 为什么 React 需要 Fiber 架构，而 Vue 却不需要？
14. SPA（单页应用）首屏加载速度慢怎么解决？
15. 说下 Vite 的原理
16. Vue2.0 为什么不能检查数组的变化，该怎么解决？
17. 说说 Vue 页面渲染流程
18. Vue 中 computed 和 watch 区别
19. Vuex 中的辅助函数怎么使用？
20. 如果使用 Vue3.0 实现一个 Modal，你会怎么进行设计？
21. Vue 3.0 中 Treeshaking 特性是什么，并举例进行说明？
22. Vue3.0 所采用的 Composition API 与 Vue2.x 使用的 Options API 有什么不同？
23. Vue3.0 性能提升主要是通过哪几方面体现的？
24. Vue3.0 的设计目标是什么？做了哪些优化？
25. 你是怎么处理 Vue 项目中的错误的？
26. Vue 项目如何进行部署？是否有遇到部署服务器后刷新 404 问题？
27. Vue 项目中如何解决跨域问题？
28. Vue 怎么实现权限管理？控制到按钮级别的权限怎么做？
29. 大型项目中，Vue 项目怎么划分结构和划分组件比较合理呢？
30. Vue 项目中有封装过 axios 吗？怎么封装的？
31. 说说 Vue 中的 diff 算法
32. 什么是虚拟 DOM？如何实现一个虚拟 DOM？说说你的思路
33. 说说你对 Vue 中 keep-alive 的理解

6. 算法 (19 题)

1. 最大的钻石
2. 举例说明你对尾递归的理解，以及有哪些应用场景
3. 去除字符串中出现次数最少的字符，不改变原字符串的顺序。
4. 请手写'快速排序'
5. 洗牌算法
6. 什么是尾调用优化和尾递归？
7. 合并 K 个升序链表
8. 什么是时间复杂度？
9. 请手写'基数排序'
10. 请手写'桶排序'
11. 请手写'计数排序'
12. 请手写'堆排序'
13. 请手写'归并排序'
14. 请手写'希尔排序'
15. 请手写'插入排序'
16. 请手写'选择排序'
17. 请手写'冒泡排序'
18. 写一个 LRU 缓存函数
19. 实现一个函数，判断输入是不是回文字符串。

7. Node.js (27 题)

1. CommonJS 和 ES6 中模块引入的区别？
2. 为什么 Node 在使用 ES Module 时必须加上文件扩展名？
3. 浏览器和 Node 中的事件循环有什么区别？
4. Node 性能如何进行监控以及优化？
5. 如果让你来设计一个分页功能，你会怎么设计？前后端如何交互？
6. 如何实现文件上传？说说你的思路
7. 如何实现 JWT 鉴权机制？说说你的思路
8. 说说对中间件概念的理解，如何封装 Node 中间件？
9. 说说 Node 文件查找的优先级以及 Require 方法的文件查找策略？
10. 说说对 Nodejs 中的事件循环机制理解？
11. 说说 Node 中的 EventEmitter？如何实现一个 EventEmitter？
12. 说说对 Node 中的 Stream 的理解？应用场景？
13. 说说对 Node 中的 Buffer 的理解？应用场景？
14. 说说对 Node 中的 fs 模块的理解？有哪些常用方法
15. 说说对 Node 中的 process 的理解？有哪些常用方法？
16. Node.js 有哪些全局对象？
17. 说说你对 Node.js 的理解？优缺点？应用场景？
18. body-parser 这个中间件是做什么用的？
19. Koa 中，如果一个中间件没有调用 await next()，后续的中间件还会执行吗？
20. 在没有 async await 的时候，koa 是怎么实现的洋葱模型？
21. Koa 框架中，该怎么处理中间件的异常？
22. Node.js 如何调试？
23. 说说你对 Koa 洋葱模型的理解
24. pm2 守护进程的原理是什么？
25. Koa 和 Express 有哪些不同？
26. 两个 Node.js 进程如何通信？
27. npm 是什么？

9. TypeScript (46 题)

1. 说说对 TypeScript 中命名空间与模块的理解？区别？
2. 说说你对 TypeScript 的理解？与 JavaScript 的区别？
3. TypeScript 中泛型是什么？
4. TypeScript 中有哪些声明变量的方式？
5. 什么是 TypeScript 的方法重载？
6. 请实现下面的 sleep 方法
7. TypeScript 中的 is 关键字有什么用？
8. TypeScript 支持的访问修饰符有哪些？
9. 请实现下面的 myMap 方法
10. 请实现下面的 treePath 方法
11. 请实现下面的 product 方法
12. 请实现下面的 myAll 方法
13. 请实现下面的 sum 方法
14. 请实现下面的 mergeArray 方法
15. 实现下面的 firstSingleChar 方法
16. 实现下面的 reverseWord 方法
17. 如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型？
18. 请补充 objToArray 函数
19. 使用 TS 实现一个判断传入参数是否是数组类型的方法
20. TypeScript 的内置数据类型有哪些？
21. ts 中 any 和 unknown 有什么区别？
22. 如何将 unknown 类型指定为一个更具体的类型？
23. 使用 ts 实现一个判断入参是否是数组类型的方法？
24. tsconfig.json 文件有什么用？
25. TypeScript 中的 Declare 关键字有什么用？
26. 解释一下 TypeScript 中的枚举。
27. TypeScript 的主要特点是什么？
28. TypeScript 中的方法重写是什么？
29. 什么是 TypeScript 映射文件？
30. TypeScript 中的类型有哪些？
31. 如何检查 TypeScript 中的 null 和 undefined？
32. 如何在 TypeScript 中实现继承？
33. 什么是 TypeScript Declare 关键字？

10. 性能优化 (25 题）

1. script 标签放在 header 里和放在 body 底部里有什么区别？
2. 前端性能优化指标有哪些？怎么进行性能检测？
3. SPA（单页应用）首屏加载速度慢怎么解决？
4. 如果使用 CSS 提高页面性能？
5. 怎么进行站点内的图片性能优化？
6. 虚拟 DOM 一定更快吗？
7. 有些框架不用虚拟 dom，但是他们的性能也不错是为什么？
8. 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？
9. 讲一下 png8、png16、png32 的区别，并简单讲讲 png 的压缩原理
10. 页面加载的过程中，JS 文件是不是一定会阻塞 DOM 和 CSSOM 的构建？
11. React.memo 和 useMemo 的用法是什么，有哪些区别？
12. 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
13. 如果一个列表有 100000 个数据，这个该怎么进行展示？
14. DNS 预解析是什么？怎么实现？
15. 在 React 中可以做哪些性能优化？
16. 浏览器为什么要请求并发数限制？
17. 如何确定页面的可用性时间，什么是 Performance API？
18. 谈谈对 window.requestAnimationFrame 的理解
19. CSS 加载会造成阻塞吗？
20. 什么是内存泄漏？什么原因会导致呢？
21. 如何用 webpack 来优化前端性能
22. 说说常规的前端性能优化手段
23. 什么是 CSS Sprites？
24. CSS 优化、提高性能的方法有哪些？
25. script 标签中，async 和 defer 两个属性有什么用途和区别？

11. 编程题 (50 题)

1. 使用 Promise 实现红绿灯交替重复亮
2. bind、call、apply 有什么区别？如何实现一个 bind？
3. 利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符串 aabcccccaaa 会变为..
4. 说说 new 操作符具体干了什么？
5. 如何实现上拉加载，下拉刷新？
6. 大文件怎么实现断点续传？
7. 什么是防抖和节流，以及如何编码实现？
8. 说说 ajax 的原理，以及如何实现？
9. 深拷贝浅拷贝有什么区别？怎么实现深拷贝？
10. 用 js 实现二叉树的定义和基本操作
11. 如何实现一个轮播图组件？
12. 写出一个函数 trans，将数字转换成汉语的输出，输入为不超过 10000 亿的数字。
13. 将下面的数组转成树状结构
14. 编写一个 Vue 组件，组件内部使用插槽接收外部内容，v-model 双向绑定，实现折叠展开的功能
15. 实现 lodash 的 set 和 get 方法
16. 去除字符串中出现次数最少的字符，不改变原字符串的顺序。
17. 实现一个批量请求函数，要求能够限制并发量
18. 树转数组
19. 数组转树
20. 删除链表的一个节点
21. 请实现一个函数，要求能在页面请求很多时，尽可能快地按照顺序输出返回的结果。
22. 实现一个请求函数：fetchWithRetry，要求会最多自动重试 3 次，任意一次成功就直接返回
23. 链表中，环的入口节点
24. 多叉树指定层节点的个数
25. 请手写'快速排序'
26. 使用 js 实现有序数组原地去重
27. 计算出下面数组中的平均时间
28. 实现 compose 函数，类似于 Koa 的中间件洋葱模型
29. 请按以下要求实现方法 fn：遇到退格字符就删除前面的字符，遇到两个退格就删除两个字符
30. Promise 的 finally 怎么实现的？
31. 实现一个函数，可以间隔输出
32. 不定长二维数组的全排列
33. 两个字符串对比，得出结论都做了什么操作，比如插入或者删除

15. 工程化 (34 题)

1. package.json 文件中的 devDependencies 和 dependencies 对象有什么区别？
2. webpack5 的主要升级点有哪些？
3. 说下 Vite 的原理
4. 与 webpack 类似的工具还有哪些？区别？
5. 说说如何借助 webpack 来优化前端性能？
6. 说说 webpack proxy 工作原理？为什么能解决跨域？
7. 说说 webpack 的热更新是如何做到的？原理是什么？
8. 面试官：说说 Loader 和 Plugin 的区别？编写 Loader，Plugin 的思路？
9. 说说 webpack 中常见的 Plugin？解决了什么问题？
10. 说说 webpack 中常见的 Loader？解决了什么问题？
11. 说说 webpack 的构建流程？
12. 说说你对 webpack 的理解？解决了什么问题？
13. webpack loader 和 plugin 实现原理
14. 如何提高 webpack 的构建速度？
15. 说说 webpack-dev-server 的原理
16. 你对 babel 了解吗，能不能说说几个 stage 代表什么意思？
17. webpack 的 module、bundle、chunk 分别指的是什么？
18. 什么是 CI/CD？
19. 说说你对前端工程化的理解
20. 说说你对 SSG 的理解
21. 聊聊 vite 和 webpack 的区别
22. webpack treeShaking 机制的原理是什么？
23. 介绍一下 tree shaking 及其工作原理
24. 前后端分离是什么？
25. Babel 的原理是什么
26. webpack 的热更新是如何做到的？说明其原理
27. 如何提高 webpack 的打包速度
28. 如何用 webpack 来优化前端性能
29. webpack 的构建流程是什么
30. webpack 的 Loader 和 Plugin 的不同
31. webpack 有哪些常见的 Plugin
32. webpack, rollup、parcel 优缺点
33. Webpack 中 loader 的作用是什么，以及常用 loader 有哪些

场景题

1. 如何判断用户设备
2. 将多次提交压缩成一次提交
3. 介绍下 navigator.sendBeacon 方法
4. 混动跟随导航（电梯导航）该如何实现
5. 退出浏览器之前，发送积压的埋点数据请求，该如何做？
6. 如何统计页面的 long task（长任务）
7. PerformanceObserver 如何测量页面性能
8. 移动端如何实现下拉滚动加载（顶部加载）
9. 判断页签是否为活跃状态
10. 在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？
11. 大文件切片上传的时候，确定切片数量的时候，有那些考量因素
12. 页面关闭时执行方法，该如何做
13. 如何统计用户 pv 访问的发起请求数量
14. 长文本溢出，展开/收起如何实现
15. 如何实现鼠标拖拽
16. 统计全站每一个静态资源加载耗时，该如何做
17. 防止前端页面重复请求
18. ResizeObserver 作用是什么
19. 要实时统计用户浏览器窗口大小，该如何做
20. 当项目报错，你想定位是哪个 commit 引入的错误的时，该怎么做
21. 如何移除一个指定的 commit
22. 如何还原用户操作流程
23. 可有办法将请求的调用源码地址包括代码行数也上报上去？
24. 请求失败会弹出一个 toast，如何保证批量请求失败，只弹出一个 toast
25. 如何减少项目里面 if-else
26. babel-runtime 作用是啥
27. 如何实现预览 PDF 文件
28. 如何在划词选择的文本上添加右键菜单（划词：标滑动选择一组字符，对组字符进行操作）
29. 富文本里面，是如何做到划词的（鼠标滑动选择一组字符，对组字符进行操作）？
30. 如何做好前端监控方案
31. 如何标准化处理线上用户反馈的问题
32. px 如何转为 rem
33. 浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制
34. cookie 可以实现不同域共享吗
35. axios 是否可以取消请求
36. 前端如何实现折叠面板效果？
37. dom 里面，如何判定 a 元素是否是 b 元素的子元素
38. 判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定？
39. is 如何判空？「空」包含了：空数组、空对象、空字符串、0、undefined、null、空 map、空 set 都属于为空的数据
40. CSS 实现翻牌效果
41. flex:1 代表什么
42. 一般是怎么做代码重构的
43. 如何清理源码里面没有被应用的代码，主要是 JS、TS、CSS 代码
44. 前端应用如何做国际化？
45. 应用如何做应用灰度发布
46. [微前端] 为何通常在微前端应用隔离，不选择 iframe 方案
47. [微前端] Qiankun 是如何做 JS 隔离的
48. [微前端] 微前端架构一般是如何做 JavaScript 隔离
49. [React] 循环渲染中为什么推荐不用 index 做 key
50. [React] 如何避免使用 context 的时候，引起整个挂载节点树的重新渲染
51. 前端如何实现截图？
52. 当 QPS 达到峰值时，该如何处理？
53. JS 超过 Number 最大值的数怎么处理？
54. 使用同一个链接，如何实现 PC 打开是 web 应用、手机打开是一个 H5 应用？
55. 如何保证用户的使用体验
56. 如何解决页面请求接口大规模并发问题
57. 设计一套全站请求耗时统计工具
58. 大文件上传了解多少
59. H5 如何解决移动端适配问题
60. 站点一键换肤的实现方式有哪些？
61. 如何实现网页加载进度条？
62. 常见图片懒加载方式有哪些？
63. cookie 构成部分有哪些
64. 扫码登录实现方式
65. DNS 协议了解多少
66. 函数式编程了解多少？
67. 前端水印了解多少？
68. 什么是领域模型
69. 一直在 window 上面挂东西是否有什么风险
70. 深度 SEO 优化的方式有哪些，从技术层面来说
71. 小程序为什么会有两个线程
72. Web 应用中如何对静态资源加载失败的场景做降级处理
73. HTML 中前缀为 data-开头的元素属性是什么？
74. 移动端如何实现上拉加载，下拉刷新？
75. 如何判断 DOM 元素是否在可视区域
76. 前端如何用 canvas 来做电影院选票功能
77. 如何通过设置失效时间清除本地存储的数据？
78. 如果不使用脚手架，如果用 webpack 构建一个自己的 React 应用
79. 用 Node.js 实现一个命令行工具，统计输入目录下面指定代码的行数
80. package.json 里面 sideEffects 属性的作用是啥
81. script 标签上有那些属性，分别作用是啥？
82. 为什么 SPA 应用都会提供一个 hash 路由，好处是什么？
83. [React] 如何进行路由变化监听
84. 单点登录是什么，具体流程是什么
85. Web 网页如何禁止别人移除水印
86. 用户访问页面白屏了，原因是啥，如何排查？
87. [代码实现] JS 中如何实现大对象深度对比
88. 如何理解数据驱动视图，有哪些核心要素？
89. Vue-CLI 都做了哪些事儿，有哪些功能？
90. JS 执行 100 万个任务，如何保证浏览器不卡顿？
91. JS 放在 head 里和放在 body 里有什么区别？
92. ESLint 代码检查的过程是啥？
93. 虚拟滚动加载原理是什么，用 JS 代码简单实现一个虚拟滚动加加载
94. [React] React-Router 和原生路由区别
95. HTML 的行内元素和块级元素的区别
96. 介绍一下 requestIdleCallback API
97. documentFragment API 是什么，有哪些使用场景？
98. Git Pull 和 Git Fetch 有啥区别？
99. 前端如何做页面主题色切换
100. 前端视角 - 如何保证系统稳定性
101. 如何统计长任务时间、长任务执行次数
102. V8 里面的 JIT 是什么？
103. 用 JS 写一个 cookies 解析函数，输出结果为一个对象
104. Vue 中 Scoped Styles 是如何实现样式隔离的，原理是啥
105. 样式隔离方式有哪些
106. 在 JS 中，如何解决递归导致栈溢出问题？
107. 站点如何防止爬虫？
108. TS 项目中，如何使用 node_modules 里面定义的全局类型包到自己项目 src 下面使用？
109. 不同标签页或窗口间的【主动推送消息机制】的方式有哪些？（不借助服务端）
110. [React] 在 React 项目开发过程中，是否可以不用 React-Router 使用浏览器原生 history 路由来组织页面路由？
111. 在表单校验场景中，如何实现页面视口滚动到报错的位置
112. 如何一次性渲染十万条数据还能保证页面不卡顿
113. [Webpack] 打包时 hash 码是如何生成的
114. 如何从 0 到 1 搭建前端基建
115. 你在开发过程中，使用过哪些 TS 的特性或者能力？
116. JS 的加载会阻塞浏览器渲染吗？
117. 浏览器对队头阻塞有什么优化？
118. Webpack 项目中通过 script 标签引入资源，在项目中如何处理？
119. 应用上线后，怎么通知用户刷新当前页面？
120. ESLint 代码检查的过程是啥？
121. HTTP 是一个无状态的协议，那么 Web 应用要怎么保持用户的登录态呢？
122. 如何检测网页空闲状态（一定时间内无操作）
123. 为什么 Vite 速度比 Webpack 快？
124. 列表分页，快速翻页下的竞态问题
125. JS 执行 100 万个任务，如何保证浏览器不卡顿？
126. Git 仓库迁移应该怎么操作
127. 如何禁止别人调试自己的前端页面代码？
128. Web 系统里面，如何对图片进行优化？
129. OAuth 2.0 是什么登录方式
130. 单点登录是如何实现的？
131. 常见的登录鉴权方式有哪些？
132. 需要在跨域请求中携带另外一个域名下的 Cookie 该如何操作？
133. Vite 和 Webpack 在热更新上有啥区别？
134. 封装一个请求超时，发起重试的代码
135. 前端如何设置请求超时时间 timeout
136. Node.js 如何充分利用多核 CPU？
137. 后端一次性返回树形结构数据，数据量非常大前端该如何处理？
138. 你认为组件封装的一些基本准则是什么？
139. 页面加载速度提升 (性能优化) 应该从哪些方向来思考？
140. 前端日志埋点 SDK 设计思路
141. Token 进行身份验证了解多少？
142. 在前端应用如何进行权限设计？
143. [低代码] 代码平台一般渲染是如何设计的？
144. [低代码] 代码平台一般底层协议是怎么设计的
145. [Webpack] 有哪些优化项目的手段？
146. IndexedDB 存储空间大小是如何约束的？
147. 浏览器的存储有哪些
148. [Webpack] 如何打包运行时 chunk，且在项目工程中如何去加载这个运行时 chunk？
149. 为何现在市面上做表格渲染可视化技术的，大多数都是 canvas，而很少用 SVG 的？
150. 在你的项目中，使用过哪些 Webpack Plugin，说一下他们的作用
151. 在你的项目中，使用过哪些 Webpack Loader，说一下他们的作用
152. [React] 如何避免不必要的渲染？
153. 全局样式命名冲突和样式覆盖问题怎么解决？
154. [React] 如何实现专场动画？
155. [React] 从 React 层面上，能做的性能优化有哪些？
156. [Vue] 中为何不要把 v-if 和 v-for 同时用在同一个元素上，原理是什么？
157. 将静态资源缓存在本地的方式有哪些？
158. SPA 首屏加载速度慢的怎么解决
159. Axios 是如何区分是 Node.js 环境还是浏览器环境的？
160. 如何拦截 Web 应用的请求
161. 前端有哪些跨页面通信方式？
162. H5 下拉刷新如何实现？
163. 如何修改第三方 npm 包？