当前位置：首页 > news >正文

融山科技前端面经

news 来源：原创 2025/7/14 11:05:44

前端面试问题解答

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

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）

融山科技前端面经

前端面试问题解答这次是波珠的第三次面试，持续打怪升级，积累面试中面试官问到的不会的点子。 1.自我介绍面试官您好，我是来自XX学校XX专业本科的XX名字，然后介绍在学校情况，我就介绍了大一自学前端，然…...

编程日记 2025/7/14 11:05:44

元素滚动和内容垂直居中同时存在，完美的 html 元素垂直居中的方法flex + margin: auto

假设有一个元素 div 作为父容器且宽高固定，里面的内容 content 在父容器中垂直/水平都居中，且当内容很多时，父元素滚动overflow: auto，content的内容要能够完全展示。我之前在这篇文档提到了两个方法： 使用 flex s…...

编程日记 2025/7/14 15:38:19

STM32F103 单片机（基于 ARM Cortex-M3 内核）的启动过程涉及硬件初始化、固件配置和程序执行流程。

1. 启动模式与地址映射 STM32F103 的启动模式由 BOOT0 和 BOOT1 引脚配置决定，不同的启动模式对应不同的存储器映射： 启动模式映射地址范围说明主 Flash 0x08000000~0x0807FFFF 用户程序存储在 Flash 中，复位后从 Flash 启动&#xff08…...

编程日记 2025/7/14 15:40:02

c++中iota容器和fill的区别

在C 中，std::iota 和 std::fill 都是标准库中的函数，用于对序列进行操作，它们的功能和用法如下： std::iota 功能：std::iota 函数用于将一个连续的递增序列赋值给指定范围的元素。它接受三个参数，第一个参…...

编程日记 2025/7/14 15:18:39

Kafka集群

kafka集群: kafka-server-start.sh;kafka-server-stop.sh cd/opt/software/kafka/ kafka.sh上传:cd /usr/local/bin/ 执行文件变成绿色：chmod 777 kafka.sh Kafka.sh start Xcall.sh jps...

编程日记 2025/7/14 9:11:56

多源数据集成技术分析与应用实践探索

摘要：本文聚焦多源数据集成技术，深入剖析联邦式、基于中间件模型及数据仓库三类主流技术的侧重点与应用场景。通过实际案例阐述多源数据集成应用构建过程，旨在为企业数据整合与共享提供理论指导与实践参考，助力企业提升数据利用效…...

编程日记 2025/7/14 14:28:23

UniOcc：自动驾驶占用预测和预报的统一基准

25年3月来自 UC Riverside、U Wisconsin 和 TAMU 的论文"UniOcc: A Unified Benchmark for Occupancy Forecasting and Prediction in Autonomous Driving"。 UniOcc 是一个全面统一的占用预测基准（即基于历史信息预测未来占用）和基于摄像头图…...

编程日记 2025/7/12 1:53:08

反向代理和DDNS的区别是什么？

反向代理（Reverse Proxy）和动态域名解析（DDNS，Dynamic Domain Name System）是两种不同的网络技术，虽然它们都与外部访问内部服务相关，但解决的问题和应用场景完全不同。具体区别如下&#xff1a…...

编程日记 2025/7/14 15:42:25

markdown展示数学公式

要让Markdown正确展示数学公式，你需要使用支持数学公式渲染的工具，比如在支持LaTeX语法的Markdown编辑器中进行编写。 Markdown本身并不原生支持数学公式的渲染，但许多Markdown解析器（例如在GitHub、Jupyter Notebooks、或一些博…...

编程日记 2025/7/14 14:39:58

服务器编译环境配置及数据接收脚本编写（11）

文章目录一、本章说明二、云端服务器Python编译环境配置三、传感数据解析脚本编写一、本章说明注：本节为【基于STM的环境监测系统（节点+云服务器存储+QT界面设计）】项目第11篇文章，上面两篇介绍了云服务器数据库的安装与相关设置，本章主要介绍在服务器中安装Python编译…...

编程日记 2025/7/14 14:23:28

硬件基本概念

目录基本概念电压电流串联、并联欧姆定律电路仿真网址： 功率焦耳定律 AC220V 转 DC5V 基本电子元器件了解电阻：（电阻器） 电容电感继电器二极管三极管晶振（晶体振荡器） 光耦…...

编程日记 2025/7/14 14:34:01

Spark与Hadoop之间的联系与区别

联系生态系统互补： Hadoop 是一个分布式存储和计算平台，主要包括 HDFS（分布式文件系统）和 MapReduce（分布式计算框架）。Hadoop 提供了可靠的数据存储和分布式计算的基础。 Spark 是一个高性能的分布式计算…...

编程日记 2025/7/14 14:49:54

spark和Hadoop之间的对比与联系

对比计算模型： Hadoop：采用MapReduce计算模型，分map与reduce两个阶段，数据处理按阶段顺序执行，数据处理按阶段顺序执行，中间结果会写入磁盘，I/O开销大。 Spark：基于弹性分布式数…...

编程日记 2025/7/14 14:05:59

0802api设计和实战-网络ajax请求1-react-仿低代码平台项目

文章目录 1 API设计1.1 用户功能1.1.1 获取用户信息1.1.2 注册1.1.3 登录 1.2 问卷功能1.2.1 获取单个问卷1.2.2 获取问卷列表1.2.3 创建问卷1.2.4 更新问卷1.2.5 批量彻底删除问卷1.2.6 复制问卷 1.3 小结 2 实战2.1配置axios2.2 封装API和测试2.3 新建问卷2.4 自定义hooks封装…...

编程日记 2025/7/14 15:40:47

什么是CAN的非破坏仲裁？

‌CAN总线的非破坏性仲裁‌是一种在多个设备同时发送数据时，通过标识符（ID）优先级来决定哪个设备可以优先发送数据的机制。其核心思想是：当多个设备同时发送数据时，ID值较小的数据具有更高的优先级，能够优先…...

编程日记 2025/7/14 15:05:15

无线监控系统分类全解析：搭配视频融合平台EasyCVR开启高效监控

随着技术的发展，无线监控系统在家庭、小型企业、特定行业以及室外恶劣环境中的应用越来越广泛。本文将介绍几种常见的无线监控系统，分析其优缺点，并结合EasyCVR视频融合平台的功能，探讨如何优化无线监控系统的性能和应用。一、主…...

编程日记 2025/7/14 5:40:34

并行RANSAC平面拟合（C++)

依赖库 1）Eigen 2）GLM 算法大致思路 Step 1：源点云随机采样3个点； Step 2：3个点拟合平面，统计符合该平面模型的点，为inlier点； Step 3：判断inlier点比例是否达到阈…...

编程日记 2025/7/14 14:45:47

Docker核心技术精讲：从入门到企业级实战

第一章>Docker概述第二章>Docker安装与镜像下载加速第三章>镜像第四章>容器第五章>发布镜像到阿里云或私有化仓库第六章>容器卷第七章>Docker安装常用软件第八章>Docker高级版-Mysql主从复制、Redis主从、分布式存储第九章>Doc…...

编程日记 2025/7/14 8:01:10

【KWDB 创作者计划】_深度学习篇---向量指令集

文章目录前言一、加速原理数据级并行（DLP）计算密度提升减少指令开销内存带宽优化隐藏内存延迟二、关键实现技术1. 手动向量化（Intrinsics）优势挑战 2. 编译器自动向量化限制 3. BLAS/LAPACK库优化4. 框架级优化三、典型应用场景…...

编程日记 2025/7/14 14:18:01

音视频小白系统入门课-4

本系列笔记为博主学习李超老师课程的课堂笔记，仅供参阅往期课程笔记传送门： 音视频小白系统入门笔记-0音视频小白系统入门笔记-1音视频小白系统入门笔记-2音视频小白系统入门笔记-3 将mp4文件转换为yuv文件 ffmpeg -i demo.mp4 # 输入文件-an …...

编程日记 2025/7/14 14:52:53

CS144 Lab3 实战记录：TCP 发送器实现

文章目录 1 实验背景与目标2 TCP发送器的实现2.1 整体流程2.2 核心组件2.3 窗口管理2.4 关键函数实现2.4.1 push函数2.4.2 receive函数2.4.3 tick函数 3 仓库地址 1 实验背景与目标在 TCP 协议中，发送器（TCP Sender）是实现可靠传输的核心组…...

编程日记 2025/7/14 15:24:14

Transformer：引领深度学习新时代的架构

引言在深度学习的快速发展历程中，Transformer 架构如同璀璨的新星，照亮了自然语言处理（NLP）以及计算机视觉（CV）等众多领域的前行道路。自 2017 年在论文《Attention Is All You Need》中被提出以来&#…...

编程日记 2025/7/14 15:15:24

基于RabbitMQ实现订单超时自动处理

基于RabbitMQ实现订单超时自动处理引言在现代电商系统中，订单超时自动取消是一个常见的业务需求。传统的定时任务扫描数据库的方式存在性能瓶颈和实时性差的问题。本文将介绍如何使用RabbitMQ的消息队列和死信队列特性，构建一个高效可靠的订单超时自…...

编程日记 2025/7/14 13:56:32

nginx实现同一个端口监听多个服务

nginx实现同一个端口监听多个服务前言原理配置不同域名基于路径（URL 路由）补充总之完结撒花，如有需要收藏的看官，顺便也用发财的小手点点赞哈，如有错漏，也欢迎各位在评论区评论！ 前言受同…...

编程日记 2025/7/14 1:54:12

用 Firebase 和 WebRTC 快速搭建一款浏览器视频聊天应用

在现代 Web 应用中，实时音视频通信变得越来越普遍。本文将通过一个简洁实用的示例，带你一步步搭建一个基于 Firebase WebRTC 的浏览器视频聊天应用，帮助你理解 WebRTC 的核心通信机制以及如何借助 Firebase 进行信令传输。 🔧 技…...

编程日记 2025/7/14 13:39:30

记录一次OGG进程abended，报错OGG-01431、OGG-01003、OGG-01151、OGG-01296问题的处理

1. ogg进程abended的几种常见原因： 1. undo表空间不足导致abended。 2. 数据不一致，违反唯一约束导致abended。 3. 源端和目标端表结构不一致导致abended。 4. 源端表名过长，同步到目标端报错导致abended。 5. OGG-03517字符集转换问题导…...

编程日记 2025/7/14 15:04:30

机器学习分类算法详解：原理、应用场景与测试用例

机器学习分类算法详解：原理、应用场景与测试用例一、基础分类算法 1. 决策树原理：通过递归划分数据集，选择信息增益（ID3）或基尼系数（CART）最大的特征作为分裂节点，构建树结构。叶节点代表分类结果。应用场景：医疗诊断（需解释性，如判断疾病风险）。客户分群（如根…...

编程日记 2025/7/14 13:57:31

机器人仿真：相机信息仿真及显示

1）概要除了激光雷达以外，机器人常用的视觉传感器还包括相机，相机图像能够获取真实世界的真实颜色和纹理信息，能够被用于进行目标检测、分割和追踪。 2）结果展示...

编程日记 2025/7/14 14:20:50

车载功能测试-车载域控/BCM控制器测试用例开发流程【用例导出方法+优先级划分原则】

目录 1 摘要2 位置灯手动控制简述2.1 位置灯手动控制需求简述2.2 位置灯手动控制逻辑交互图 3 用例导出方法以及优先级原则3.1 用例导出方法3.1.1 用例导出方法介绍3.1.2 用例导出方法关键差异分析 3.2 优先级规则3.2.1 优先级划分的核心原则3.2.2 具体等级定义与判定标准 3.3 …...

编程日记 2025/7/13 22:25:46

memory-modeling|Details on how memory is modeled in gem5-gpu ====== gem5-gpu’s Memory Simulation ====== gem5-gpu, for the most part, eschews GPGPU-Sim’s separate functional simulation and instead uses gem5’s execute-in-execute model. Therefore, memory …...

编程日记 2025/7/14 14:11:32