自己设置网站怎么做网站制作工具
前端面试问题解答
这次是波珠的第三次面试，持续打怪升级，积累面试中面试官问到的不会的点子。
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）