融山科技前端面经

前端面试问题解答

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

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. 项目开发实施策略

项目生命周期管理

关键控制点

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

8. 性能优化体系

优化维度全景图

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

实战示例

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

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

9. 项目维护方案

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

运维监控体系

核心维护措施

自动化监控：
- 使用 Prometheus + Grafana 监控性能指标
- 配置 Sentry 实时错误报警

版本管理：

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

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

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

核心解决思路

具体实施方案

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-alpineWORKDIR /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-lateststrategy:matrix:node-version: [18.x]steps:- uses: actions/checkout@v3- uses: actions/setup-node@v3with: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）