2025最新出炉--前端面试题六

1. 我看你项目里有提到 nuxt 做 seo 优化

回答： 是的，Nuxt.js 通过服务端渲染（SSR）生成静态 HTML 页面，提升搜索引擎爬虫的抓取效果，具体优化点包括：

• 预渲染页面：服务端直接返回完整的 HTML 结构，避免客户端渲染的空白页面问题。
• 动态路由静态化：结合 generate 配置，将动态路由预生成静态文件（如商品详情页）。
• Meta 标签管理：通过 head() 方法动态设置页面标题、关键词等 SEO 关键信息。

2. nuxt 通常会被称为同构应用, 你能解释一下他的同构过程吗

回答： 同构（Isomorphic）指代码在服务端和客户端均可运行，Nuxt 的同构过程如下：

1. 服务端渲染：
   • 首次访问时，服务端执行 Vue 组件逻辑，生成 HTML 并返回给浏览器。
   • 数据通过 asyncData 或 fetch 在服务端预取。
2. 客户端激活：
   • 浏览器下载客户端 JS 后，Vue 执行“注水”（Hydration），将静态 HTML 转换为可交互的 SPA。
3. 路由切换：
   • 后续页面跳转由客户端处理，仅请求数据并局部更新。

3. 除了 nuxt 这种, 你还有其他对原项目改动较小的, seo 优化方案吗

回答： 是的，其他 SEO 优化方案：

• 预渲染（Prerendering）：使用 prerender-spa-plugin 对指定路由生成静态 HTML。
• 动态渲染（Dynamic Rendering）：根据 User-Agent 返回不同内容（对爬虫返回预渲染 HTML）。
• 使用无头浏览器：如 Puppeteer 在构建时生成静态页面。

4. 像是后台项目, 都会有一些复杂的表单联动, 你能描述一下吗

回答： 复杂表单联动常见场景：

• 条件显示字段：如选择“企业用户”后显示“公司名称”字段。
• 级联选择：如选择省份后动态加载城市列表。
• 动态校验规则：根据字段值调整校验逻辑（如邮箱或手机号二选一）。

实现方案：

• Vue：使用 v-if、watch 监听字段变化，结合 async-validator 动态校验。
• React：通过 useState 管理状态，利用 useEffect 处理依赖关系。

5. react 使用过吗, vue3 了解吗

回答： 是的，React 和 Vue3 均有实际使用经验：

• React：熟悉 Hooks（useState、useEffect）、Context API、性能优化（memo、useCallback）。
• Vue3：掌握 Composition API、<script setup> 语法、Teleport、响应式原理（Proxy）。

6. vue3 有哪些升级点能说一下吗

回答： Vue3 主要升级点：

1. Composition API：逻辑复用更灵活，替代 Options API。
2. 性能优化：
   • Proxy 替代 Object.defineProperty，支持深层对象监听。
   • 编译时优化（静态节点提升、补丁标记）。
3. Tree-shaking：按需引入 API，减小打包体积。
4. 新组件：Fragment（多根节点）、Teleport（传送门）、Suspense（异步组件）。

7. Promise 新增的 allSettled 和 all 之间有什么区别

回答：

• Promise.all： 所有 Promise 成功时返回结果数组；任一失败立即 reject。
• Promise.allSettled： 等待所有 Promise 完成（无论成功或失败），返回结果数组，包含每个 Promise 的状态和值。

示例：

// allSettled 结果格式：
[{ status: 'fulfilled', value: 1 }, { status: 'rejected', reason: 'Error' }]

8. 在 es5 里面怎么实现继承呢

回答： ES5 实现继承的常见方式：

1. 原型链继承：

   function Parent() {}
   function Child() {}
   Child.prototype = new Parent(); // 问题：父类属性被所有实例共享

1. 构造函数继承：

   function Child() { Parent.call(this); } // 问题：无法继承父类原型方法

1. 组合继承：

   function Child() { Parent.call(this); }
   Child.prototype = new Parent();
   Child.prototype.constructor = Child; // 解决上述两种问题

9. 能说一下跨域吗

回答： 跨域是浏览器同源策略（协议、域名、端口一致）的限制，解决方式：

1. CORS：服务端设置响应头（如 Access-Control-Allow-Origin: *）。
2. JSONP：利用 <script> 标签跨域请求（仅支持 GET）。
3. 代理服务器：前端开发服务器代理请求（如 Webpack devServer）。

10. 浏览器为什么会有跨域的限制, 浏览器如果不限制跨域会怎样

回答：

• 原因：防止恶意网站通过脚本窃取用户数据（如 Cookie）。
• 不限制的后果：

• CSRF 攻击更易发生，用户敏感信息可能被非法获取。
• 任意网站可随意读取其他域下的资源（如银行页面内容）。

11. 你能详细说一下 cors 跨域的具体过程吗

回答： CORS 跨域流程：

1. 简单请求（GET/POST/HEAD，且 Content-Type 为 text/plain、application/x-www-form-urlencoded、multipart/form-data）：
   • 浏览器直接发送请求，检查响应头 Access-Control-Allow-Origin 是否匹配当前域。
2. 预检请求（复杂请求如 PUT、DELETE 或自定义头部）：
   • 浏览器先发送 OPTIONS 请求，检查服务端是否允许实际请求的 Method 和 Headers。
   • 服务端响应 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。
   • 预检通过后，发送实际请求。

12. 能说一下你对 js 闭包的理解吗

回答： 闭包（Closure）是函数与其词法环境的组合，特性：

• 定义：内部函数可以访问外部函数的作用域，即使外部函数已执行完毕。
• 作用：
  • 封装私有变量（如计数器实现）。
  • 延长变量生命周期（如事件回调中保留状态）。 示例：

function createCounter() {
  let count = 0;
  return () => count++; // 返回的函数闭包引用了 count
}

13. 在 js 里面有哪些会造成内存泄漏

回答： 常见内存泄漏场景：

1. 未清理的定时器或事件监听：

  const timer = setInterval(() => {}, 1000);
  // 忘记 clearInterval(timer)

1. 闭包滥用：意外保留对大对象的引用。
2. 全局变量：未使用 var/let/const 声明变量，导致变量挂载到 window。
3. DOM 引用未释放：

  const element = document.getElementById('id');
  // 即使删除 DOM，element 仍保留引用

14. webpack 你平时会有一些配置吗

回答： 常用 Webpack 配置：

• 入口/出口：entry、output。
• Loader：处理 CSS（style-loader、css-loader）、图片（file-loader）。
• 插件：HtmlWebpackPlugin 生成 HTML，CleanWebpackPlugin 清理构建目录。
• 优化：代码分割、压缩（TerserPlugin）、缓存（contenthash）。

15. 你能说一下 loader 和 plugin 之间有什么区别吗

回答：

1. Loader：

• 用于处理模块源码（如转换 ES6、加载 CSS）。
• 在 module.rules 中配置，链式调用（从右到左）。

1. Plugin：

• 扩展 Webpack 功能（如生成 HTML、压缩代码）。
• 在 plugins 数组中配置，通过钩子介入构建生命周期。

16. webpack 里面的 chunkhash 和 contenthash 有什么区别

回答：

• chunkhash：基于 chunk 内容生成，同一 chunk 内所有文件共享相同 hash（如 JS 和 CSS 属于同一 chunk）。
• contenthash：基于文件内容生成，文件内容不变则 hash 不变（适用于独立缓存 CSS 文件）。

17. webpack5 你有了解过吗

回答： 是的，Webpack5 主要改进：

1. 持久化缓存：通过 cache: { type: 'filesystem' } 显著提升构建速度。
2. 模块联邦（Module Federation）：实现微前端架构，跨应用共享模块。
3. 资源处理优化：内置 Asset Modules（替代 file-loader）。
4. Tree Shaking 增强：支持嵌套模块的未使用代码消除。

18. es6 里面的模板字符串有什么特殊功能吗

回答： 模板字符串（Template Literals）特性：

1. 多行字符串：无需 \n 或拼接符号。
2. 嵌入表达式：通过 ${} 插入变量或表达式。
3. 标签模板：自定义函数处理字符串和变量。 示例：

const name = 'Alice';
console.log(`Hello, ${name}!`); // Hello, Alice!

19. grid 布局有了解吗

回答： Grid 布局是二维布局系统，核心概念：

1. 容器属性：

• display: grid、grid-template-columns 定义列宽。
• gap 设置行列间距。

1. 项目属性：

• grid-column、grid-row 控制项目位置。
• grid-area 定义项目在网格中的区域。 优势：相比 Flexbox 更适合复杂布局（如棋盘、仪表盘）。

20. 响应式布局都有哪些方案

回答： 常见响应式方案：

1. 媒体查询（Media Queries）：根据屏幕尺寸应用不同样式。
2. Flexbox：弹性布局，适合一维排列。
3. Grid 布局：二维布局，支持复杂响应式结构。
4. REM/VW 单位：基于视口宽度动态调整元素尺寸。
5. 框架方案：Bootstrap 栅格系统、Tailwind CSS 断点工具。

21. 平时都使用过哪些 css 预处理器

回答： 常用 CSS 预处理器：

• Sass/SCSS：支持变量、嵌套、Mixin、模块化。
• Less：语法类似 Sass，配置更简单。
• Stylus：灵活性高，可省略括号和分号。

22. async/await 在 v8 引擎里是怎么实现的

回答： async/await 底层基于 Generator 和 Promise 实现：

• 转换过程： async 函数被转换为 Generator 函数，通过 yield 暂停执行。 V8 使用 Promise 自动处理异步操作，通过 next() 恢复执行。
• 执行流程：

• 遇到 await 时，暂停并等待 Promise 完成。
• Promise 解决后，继续执行后续代码。

23. 那你能说一下 generator 吗

回答： Generator 是 ES6 的异步编程解决方案，特性：

• 定义：通过 function* 声明，内部使用 yield 暂停执行。
• 执行：调用 next() 恢复执行，返回 { value, done }。 示例：

function* gen() {
  yield 1;
  yield 2;
}
const g = gen();
g.next(); // { value: 1, done: false }

24. 你觉得 generator 可以用来解决什么问题

回答：

Generator 适用场景：

1. 异步流程控制：结合 yield 和 Promise 实现类似 async/await 的效果。
2. 惰性求值：按需生成数据（如大数据分页遍历）。
3. 状态机：管理复杂的状态流转（如游戏角色行为）。

25. http1.1 和 http2 之间有什么区别

回答： HTTP/2 核心改进：

1. 二进制分帧：数据以二进制帧传输，替代 HTTP/1.1 的文本格式。
2. 多路复用：一个连接并行处理多个请求，解决队头阻塞问题。
3. 头部压缩：HPACK 算法减少头部大小。
4. 服务器推送：服务端主动推送资源（如 CSS、JS）。