融山科技前端面经·

前端面试问题解答

这次是波珠的第三次面试，持续打怪升级，积累面试中面试官问到的不会的点子。

1.自我介绍

面试官您好，我是来自XX学校XX专业本科的XX名字，然后介绍在学校情况，我就介绍了大一自学前端，然后做了什么项目，拿了什么奖，对前端有浓厚的兴趣......

2.演示一下你的项目

由于我的项目都是有部署上线的，所以面试官会叫我当场演示一下项目。

3. Vue2 和 Vue3 核心区别（基本都会问的）

核心差异点

维度	Vue2	Vue3
响应式原理	Object.defineProperty	Proxy
API 体系	Options API	Composition API
类型支持	需额外配置	原生 TypeScript 支持
生命周期	beforeDestroy	beforeUnmount
模板语法	单根节点限制	支持多根节点
打包体积	全量包含	Tree-shaking 优化
新特性	-	Teleport/Suspense 等组件

重要升级细节

// Composition API 示例
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    return { count, double }
  }
}

---

4. CSS 水平垂直居中方案

现代布局方案

/* Flex 终极方案 */
.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 视口高度 */
}

/* Grid 简洁方案 */
.center-box {
  display: grid;
  place-items: center;
}

传统兼容方案

/* 绝对定位方案 */
.parent { position: relative; }
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 表格布局方案 */
.container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100vw;
  height: 100vh;
}

---

5. Webpack 与 Vite 核心区别解析

架构设计对比

维度	Webpack	Vite
构建理念	Bundle-based（打包模式）	ESM-based（原生模块模式）
开发服务器	全量打包后启动	按需编译，秒级启动
热更新(HMR)	基于文件改动整包更新	精准到模块级热替换
打包机制	自建模块依赖图	依赖Rollup生产打包
配置文件	复杂（需loader/plugin配置）	简化（预设开箱即用）

核心差异详解

1. 构建机制差异

// Webpack 工作流程
入口文件 -> 解析依赖 -> 打包所有模块 -> 输出Bundle文件

// Vite 工作流程
浏览器请求 -> 动态编译所需模块 -> 即时返回ESM格式

2. 开发体验对比

Webpack痛点：

• 项目越大启动越慢（全量打包）
• 修改代码后热更新延迟明显
• 复杂配置（需配置loader处理各种文件类型）

Vite优势：

• 冷启动时间与项目规模无关
• 毫秒级热更新（基于ESM的HMR）
• 原生支持TS/JSX/CSS等（无需额外配置）

3. 生产构建区别

# Webpack生产构建
通过 optimization 配置实现代码分割、Tree-shaking

# Vite生产构建
使用 Rollup 进行打包（保留ESM优势），默认开启代码压缩

优缺点分析

Webpack优势场景

• 成熟生态（Loader/Plugin丰富）
• 深度定制能力（复杂项目构建）
• 历史项目兼容性（支持旧版浏览器）

Vite优势场景

• 现代浏览器项目开发（ESM原生支持）
• 快速原型开发（零配置启动）
• 框架官方支持（Vue/React模板）

如何选择？

考量因素	推荐工具
旧浏览器兼容需求	Webpack
大型传统项目	Webpack
现代SPA应用开发	Vite
微前端子应用	Vite
需要丰富插件生态	Webpack

实战建议：新项目优先考虑Vite，存量项目继续使用Webpack。二者可通过插件互相集成（如vite-plugin-webpack）

6. WebSocket 优缺点分析

✅ 核心优势

• 双向实时通信（全双工）
• 低延迟（毫秒级响应）
• 长连接节省握手开销
• 支持二进制数据传输

❌ 潜在问题

• 需手动维护连接状态（心跳机制）
• 浏览器兼容性限制（IE10+）
• 防火墙可能拦截
• 服务端资源消耗较高

---

7. 项目开发实施策略

项目生命周期管理

graph TD
    A[需求分析] --> B[技术选型]
    B --> C[架构设计]
    C --> D[开发规范]
    D --> E[模块开发]
    E --> F[质量保障]
    F --> G[持续交付]

关键控制点

1. 风险管控：技术预研 + 原型验证
2. 质量保障：
   • 单元测试覆盖率 > 80%
   • E2E 测试关键路径
3. 效率提升：
   • 脚手架生成模板代码
   • CI/CD 自动化流水线

---

8. 性能优化体系

优化维度全景图

优化层级	具体措施
网络层	HTTP/2 + CDN + 资源压缩（Brotli）
资源层	按需加载 + 代码分割 + 图片懒加载
渲染层	GPU加速 + 减少重排 + 虚拟滚动
缓存层	Service Worker + 本地缓存策略
服务端	SSR + 接口聚合 + 边缘计算

实战示例

// 路由级代码分割
const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue')

---

当时我还将了图片的webp格式还有视频使用HLS分片加载和关键帧的使用。

9. 项目维护方案

波珠没怎么维护过，当时也是不怎么会哈哈

运维监控体系

pie
    title 维护重点分布
    "性能监控" : 35
    "错误追踪" : 30
    "安全更新" : 20
    "用户反馈" : 15

核心维护措施

1. 自动化监控：
   • 使用 Prometheus + Grafana 监控性能指标
   • 配置 Sentry 实时错误报警
2. 版本管理：

   # 语义化版本控制
   npm version major|minor|patch
   

3. 应急方案：
   • 蓝绿部署策略
   • 快速回滚机制（5分钟降级方案）

10.Node.js 版本兼容性解决方案

核心解决思路

graph TD
    A[版本冲突问题] --> B{解决方向}
    B --> C[提升协作方版本]
    B --> D[降低项目要求]
    B --> E[环境隔离方案]

具体实施方案

1. 版本管理工具（推荐）

使用工具：

• nvm (Node Version Manager)
• n (轻量版版本管理)
• fnm (Fast Node Manager)

操作流程：

# 创建.nvmrc文件指定版本
echo "18.16.0" > .nvmrc

# 其他成员使用（需安装nvm）
nvm install
nvm use

2. 项目级版本约束

package.json配置：

{
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=9.0.0"
  }
}

强制校验配置（.npmrc）：

engine-strict = true

3. 构建环境隔离

Docker容器化方案：

# Dockerfile示例
FROM node:18.16.0-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

CMD ["npm", "run", "dev"]

使用方法：

docker build -t my-app .
docker run -p 3000:3000 my-app

4. 版本兼容处理

Babel降级方案：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { 
      targets: { 
        node: '14.0.0' // 指定最低支持版本
      }
    }]
  ]
}

重要依赖处理：

# 查看依赖支持版本
npm view [package] engines

5. CI/CD 强制校验

GitHub Actions示例：

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}

版本策略建议

长期支持策略

方案	适用场景	优点	缺点
统一版本管理	团队协作项目	开发环境一致	需要成员配合升级
Docker容器化	生产环境部署	完全环境隔离	增加运维复杂度
Babel转译	必须支持旧版Node	兼容性强	增加构建步骤

最佳实践建议：新项目应设置Node版本要求 >= 16.x（LTS版本），并在项目文档中明确说明版本要求，配合CI/CD进行自动化校验。

11-Git使用

我就说了几个常用的。

比如git init 新建仓库，然后git remote add origin 连接远程仓库，然后写完代码之后git add . 缓存，然后git commit -m 提交，git status查看状态，然后git push推送，git pull拉取，还讲了git fetch和git pull的区别。一个是只拉取不合并（fetch)一个是拉取之后合并（pull）。

---

最后就是期待等结果啦，虽然波珠还是个大二废物大学生，不过要是能收到一个offer也是很开心的。