2025新鲜出炉--前端面试题（四）

全栈若城

发布于 2025-02-10 14:21:47

11600

代码可运行

文章被收录于专栏：若城技术专栏若城技术专栏

运行总次数：0

代码可运行

1. 我看你之前还写过服务端渲染

回答： 是的，我在之前的项目中实现过服务端渲染（SSR），主要使用 Next.js（React 生态）和 Nuxt.js（Vue 生态）。服务端渲染的核心目的是提升首屏加载性能、SEO 友好性以及用户体验。具体实现包括：

服务端预渲染页面，返回完整的 HTML 结构给浏览器。
客户端通过 hydration（注水）激活交互逻辑。
需要注意数据预取、状态同步、生命周期差异（如 componentDidMount 在服务端不执行）。

2. 你们的项目做过错误兼容和埋点吗

回答： 是的，项目中通过以下方式实现错误监控和埋点：

错误监控：

全局监听 window.onerror 和 unhandledrejection 捕获 JS 错误和未处理的 Promise 异常。
使用 try-catch 包裹关键逻辑，结合 Sentry 或自研监控系统上报错误。
埋点方案：

手动埋点：在关键交互节点调用埋点 API。
无痕埋点：通过劫持事件监听（如 addEventListener）自动收集用户行为。
使用 Google Analytics 或 神策数据 等第三方工具。

3. 关于打包工具你是怎么考虑的

回答： 选择打包工具需综合考虑项目规模、生态支持、性能需求：

Webpack：适合复杂应用，支持代码分割、懒加载、丰富的插件生态。
Rollup：适合库或组件打包，生成更小、更高效的代码（Tree-shaking 更彻底）。
Vite：基于 ES Module 的按需编译，开发环境极速热更新，适合现代项目。
Parcel：零配置，适合快速搭建原型。

4. 你感觉 Rollup 和 Webpack 有什么区别

回答： 核心区别在于定位和适用场景：

Rollup：

专注于库的打包，输出更简洁的代码（Tree-shaking 更彻底）。
默认生成 ES Module 格式，适合作为第三方库发布。
Webpack：

适合应用级打包，支持代码分割、动态导入、复杂资源处理（如图片、CSS）。
插件生态更丰富（如 Babel、CSS 预处理器）。

5. 如果是让你封装一个组件库，这种按需引入怎么做

回答： 实现按需引入的常见方案：

单组件独立打包：每个组件单独打包为 ES Module 文件，通过 package.json 的 sideEffects 标记无副作用。

Babel 插件：使用 babel-plugin-import，将 import { Button } from 'lib' 转换为按路径引入：

import Button from 'lib/es/button';

Tree-shaking 支持：确保组件库以 ES Module 格式发布，并在 package.json 中配置 module 字段。

6. 你觉得 CJS 和 ES6 Module 直接有什么区别

回答： 关键区别：

语法：

CJS：require() 和 module.exports。
ESM：import/export。
加载方式：

CJS 是动态加载（运行时解析），ESM 是静态加载（编译时解析，支持 Tree-shaking）。
ESM 支持顶层 await，CJS 不支持。
环境：

CJS 是 Node.js 默认模块系统，ESM 需通过 .mjs 或 type: "module" 启用。

7. React 有用过吗，React@17 有了解过吗

回答： 是的，React@17 是一个“过渡版本”，主要变化：

事件委托变更：事件不再挂载到 document，而是挂载到根 DOM 容器，避免多版本 React 共存时的事件冲突。
渐进式升级：允许应用逐步升级 React 版本，无需一次性全量迁移。
无新特性：主要聚焦于底层改进，为未来 Concurrent Mode 铺路。

8. React Hooks 你有用到过吗

回答： 是的，Hooks 是 React 16.8 的核心特性，常用场景：

状态管理：useState、useReducer。
副作用处理：useEffect、useLayoutEffect。
性能优化：useMemo、useCallback。
自定义 Hook：封装可复用的逻辑（如 useFetch 请求数据）。

关键规则：只能在函数组件顶层调用 Hooks，且不能嵌套在条件或循环中。

9. Vue3 你有了解过吗

回答： 是的，Vue3 的核心改进：

Composition API：替代 Options API，逻辑复用更灵活（类似 React Hooks）。
性能优化：基于 Proxy 的响应式系统，性能更好，支持嵌套对象监听。
Tree-shaking：按需编译，减小打包体积。
新特性：Teleport、Suspense、多根节点支持。

10. Vue 里面的两个路由有什么区别

回答： Vue Router 的两种路由模式：

Hash 模式：通过 URL 的 # 部分实现路由（如 http://example.com/#/home），无需服务端配置，兼容性好。
History 模式：基于 history.pushState API，URL 更简洁（如 http://example.com/home），需服务端配置避免 404。

11. Vue 里面的 $nextTick 说一说

回答： $nextTick 是 Vue 的异步更新机制：

作用：在 DOM 更新后执行回调，确保获取到最新的 DOM 状态。
原理：优先使用 Promise.then（微任务），降级到 setTimeout（宏任务）。
使用场景：修改数据后立即操作 DOM（如滚动到最新消息）。

12. 小程序和移动端有做过吗

回答： 是的，开发过微信小程序和移动端 H5：

小程序：使用 WXML/WXSS/JS，限制较多（如无 DOM/BOM API），需熟悉微信生态 API。
移动端 H5：基于 Vue/React，适配不同屏幕（rem/vw），处理滑动、手势等交互。

13. 如果我想在数组索引为 3 的位置上插入一个元素

回答： 使用 Array.splice()：

arr.splice(3, 0, newElement); 
// 参数：起始索引、删除数量、插入元素

14. splice 会改变原数组吗

回答： 是的，splice 是原地修改数组的方法，会直接改变原数组。

15. 如果我想截取数组索引 3-5 该怎么做

回答： 使用 Array.slice()：

const subArr = arr.slice(3, 6); // 参数：起始索引（包含）、结束索引（不包含）

16. slice 的返回值是深拷贝还是浅拷贝

回答：

slice 返回的是 浅拷贝。如果数组元素是对象，修改拷贝后的数组中的对象会影响原数组。

17. 实现一个红绿灯依次亮起的逻辑，并循环

回答：

function trafficLight() {
  const lights = ['red', 'green', 'yellow'];
  let index = 0;

  function next() {
    console.log(lights[index]);
    index = (index + 1) % lights.length;
    setTimeout(next, 2000); // 每 2 秒切换一次
  }

  next();
}
trafficLight();