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

3.22模拟面试

前端模拟面试(1 年经验)

面试时长:40-60 分钟
面试难度:初中级
技术栈:Vue 3、TypeScript、微前端(qiankun)、Webpack/Rspack、Ant Design、组件库迁移


一、基础知识

  1. HTML & CSS

介绍一下 BFC(块级格式化上下文)的作用?

flex: 1 具体代表什么?

CSS 选择器优先级计算规则是什么?

如何实现一个两栏布局,左侧固定 200px,右侧自适应?

如何让 CSS 动画更流畅?

  1. JavaScript & TypeScript

this 在 JavaScript 中是如何绑定的?

event loop 机制中,Promise.then 和 setTimeout 谁先执行?

typeof null 的结果是什么?为什么?

TypeScript 中 interface 和 type 有什么区别?

如何实现一个 deepClone 方法?

  1. Vue 3

Vue 2 和 Vue 3 在响应式上有什么不同?

ref 和 reactive 的区别是什么?

setup 函数的执行时机是什么?

Vue 3 组件生命周期中 onMounted 之后的生命周期有哪些?

介绍一下 defineExpose 及其应用场景。


二、框架 & 工程化

  1. Webpack & Rspack

Webpack 的 tree-shaking 原理是什么?

如何优化 Webpack 的构建速度?

Rspack 是如何提升构建性能的?

什么是 sideEffects?如何在 Webpack 中应用?

  1. 微前端 & qiankun

微前端的核心思想是什么?

qiankun 是如何实现子应用的隔离的?

你们团队在使用 qiankun 过程中遇到过哪些问题?是如何解决的?

主应用如何与子应用进行通信?


三、实践 & 业务场景

  1. 组件库迁移

你们是如何从旧组件库迁移到 Ant Design 的?过程中遇到哪些挑战?

业务组件库如何设计?你们如何管理版本发布?

  1. 性能优化

你们是如何优化 Webpack 启动时间的?

Vue 组件如何避免不必要的渲染?

前端如何做首屏加载优化?

  1. 项目经验

介绍一个你负责的项目,遇到了哪些技术挑战?

你在团队中主要承担了哪些角色?

你们是如何做代码 review 的?


四、手写代码

  1. 实现一个 deepClone 方法

  2. 实现一个 useDebounce Vue 3 组合式 API

  3. 实现一个 EventBus(发布订阅模式)

  4. 手写 Promise.all

  5. 实现一个 requestIdleCallback 兼容方案

  6. 实现一个简易版 computed


五、开放性问题

你对前端的发展趋势有什么看法?

如果让你优化当前团队的前端工程体系,你会从哪些方面入手?

你认为 1 年经验的前端如何更好地成长?


总结

这个面试涵盖了前端基础、Vue 3、工程化、微前端以及你的项目经验。你可以在模拟面试时多总结自己的经验,并通过手写代码提高自己的能力。

你需要更详细的讲解或模拟对答吗?

相关文章:

3.22模拟面试

前端模拟面试(1 年经验) 面试时长:40-60 分钟 面试难度:初中级 技术栈:Vue 3、TypeScript、微前端(qiankun)、Webpack/Rspack、Ant Design、组件库迁移 一、基础知识 HTML & CSS 介绍一下…...

MySQL高频八股——索引

大家好,我是钢板兽! 今天来更新MySQL高频八股的最后一篇文章,包括很多内容:索引分类、最左匹配原则、范围查询使联合索引失效、索引下推、给联合查询加索引、索引失效情况。 在MySQL的第一篇八股文章,我写了MySQL的索…...

二分查找(java)

文章目录 1. 基本原理2. 步骤3.练习 ​ 1. 基本原理 二分查找(Binary Search)是一种基于分治思想的高效搜索算法,核心逻辑是通过不断缩小搜索区间来定位目标值。其前提是数据必须为有序数组,时间复杂度为 O(log n)。 2. 步骤 1.…...

2025_0321_生活记录

刚刚写完待会儿早上要汇报的文档,看了一眼时间,现在已经是凌晨2点多了。一直说要早睡,但是一直都没做到。。。算了,不苛求自己了。 昨天是春分,春分秋分,昼夜平分。不知不觉就到春天了,但房间里…...

【LangChain入门 6 Chain组件】单链和多链

一、单链 1.1 LCEL的语法 | 为关键字,使用 | 作为链接符号 from langchain_core.output_parsers import StrOutputParser from langchain_ollama import ChatOllama llm ChatOllama( model"deepseek-r1:7b") parser StrOutputParser() # 加了这段后&…...

决策树基础

决策树 定义 从根节点开始,也就是拥有全部的数据,找一个维度对根节点开始划分, 划分后希望数据整体的信息熵是最小的, 针对划分出来的两个节点,我们继续重复刚才的划分方式寻找信息熵最小的维度和阈值。 递归这个…...

MATLAB+Arduino控制小车直行+转向

1 硬件 两轮车arduino板子 硬件连接 注意:电机连线。 这个小车的电机电流小,可以用arduino板子直接驱动,如果是大电流的,需要你自带电池,供电用用你的电池(如移动电源),控制信号&…...

【uni-app】引用公共组件

目录 一、建立公共组件 1.1新建vue文件 1.2编写公共文件代码 1.3使用 注意事项 一、建立公共组件 1.1新建vue文件 在公共组件文件目录下新建所需要的功能文件 1.2编写公共文件代码 按需求写对应功能的代码 1.3使用 在需要使用的文件下引用公共组件 注意事项 想要使用s…...

六西格玛遇上Python:统计学的高效实践场

在当今数据驱动的时代,数据分析和可视化工具成为了各行业优化流程、提升质量的关键手段。六西格玛(Six Sigma)作为一种以数据为基础、追求完美质量的管理理念,其实施依赖于一系列基础工具的灵活运用。而Python,凭借其强…...

虚幻基础:UI

文章目录 控件蓝图可以装载其他控件蓝图可以安装其他蓝图接口 填充:相对于父组件填充水平框尺寸—填充—0.5:改变填充的尺寸填充—0.5:改变与父组件的距离 锚点:相对于父组件的控件坐标系原点,屏幕比例改变时&#xff…...

事件、页面跳转、wxml语法——微信小程序学习笔记

1. 事件 1.1 事件绑定 <!--pages/infoPage/infoPage.wxml--><button type"primary" bind:tap"childrenClicked">子按钮</button> // pages/infoPage/infoPage.jsPage({childrenClicked(){console.log("childrenClicked")} …...

关于kafka的一些知识总结

Kafka 1. 基本知识 1.1 前置知识 topic表示一个类型/业务的数据的组为方便扩展&#xff0c;提高吞吐率&#xff0c;一个topic分为多个partition。配合分区的设计&#xff0c;提出消费者组的概念&#xff0c;每个消费者并行消费&#xff0c;同时&#xff0c;一个分区的数据&a…...

系统架构书单推荐(一)领域驱动设计与面向对象

本文主要是个人在学习过程中所涉猎的一些经典书籍&#xff0c;有些已经阅读完&#xff0c;有些还在阅读中。于我而言&#xff0c;希望追求软件系统设计相关的原则、方法、思想、本质的东西&#xff0c;并希望通过不断的学习、实践和积累&#xff0c;提升自身的知识和认知。希望…...

JS—原型与原型链:2分钟掌握原型链

个人博客&#xff1a;haichenyi.com。感谢关注 一. 目录 一–目录二–原型三–原型链 二. 原型 什么是原型&#xff1f; 每个JavaScript对象都有一个原型&#xff0c;这个原型也是一个对象。比方说 function Person(name) {this.name name; } let person new Person(&quo…...

微软产品的专有名词和官方视频教程

Legend/Acronyms (D) Microsoft Documentation (V) Video (B) Blog (S) Site (IG)<...

OpenCV旋转估计(5)图像拼接的一个函数waveCorrect()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 waveCorrect 是OpenCV中用于图像拼接的一个函数&#xff0c;特别适用于全景图拼接过程中校正波浪形失真&#xff08;Wave Correction&#xff09…...

基于3DMax与Vray引擎的轻量级室内场景渲染实践

欢迎踏入3DMAX室内渲染的沉浸式学习之旅!在这个精心设计的实战教程中,我们将携手揭开3DMAX与Vray这对黄金搭档在打造现实室内场景时的核心奥秘。无论您是渴望入门的3D新手,还是追求极致效果的专业设计师,这里都将为您呈现从场景蓝图构建到光影魔法施加的完整技术图谱。我们…...

项目日记 -云备份 -服务器配置信息模块

博客主页&#xff1a;【夜泉_ly】 本文专栏&#xff1a;【项目日记-云备份】 欢迎点赞&#x1f44d;收藏⭐关注❤️ 代码已上传 gitee 目录 前言配置信息文件文件配置类getInstance 获得实例readConfigFile 读取配置信息文件 测试 #mermaid-svg-ewlCpjdOf0q0VTLI {font-family:…...

Linux冯诺依曼体系与计算机系统架构认知(8)

文章目录 前言一、冯诺依曼体系冯•诺依曼体系结构推导内存提高冯•诺依曼体系结构效率的方法你用QQ和朋友聊天时数据的流动过程与冯•诺依曼体系结构相关的一些知识 二、计算机层次结构分析操作系统(Operator System)驱动层的作用与意义系统调用接口(system call)用户操作接口…...

23.linux下电脑健康检查

电脑健康检查 硬盘 工具 sudo apt-get install smartmontools检查命令 sudo smartctl -a /dev/sdb1输出结果 # smartctl 7.2 2020-12-30 r5155 [x86_64-linux-6.8.0-52-generic] (local build) # Copyright (C) 2002-20, Bruce Allen, Christian Franke, www.smartmontools…...

使用HAI来打通DeepSeek的任督二脉

一、什么是HAI HAI是一款专注于AI与科学计算领域的云服务产品&#xff0c;旨在为开发者、企业及科研人员提供高效、易用的算力支持与全栈解决方案。主要使用场景为&#xff1a; AI作画&#xff0c;AI对话/写作、AI开发/测试。 二、开通HAI 选择CPU算力 16核32GB&#xff0c;这…...

.NET 10 新的 JsonIgnoreCondition

Intro 之前提了一个 api 建议为 JsonIgnore 添加两个扩展,WhenReading 和 WhenWriting,主要的一个用例是 WhenReading 我们的 Api Response 里有一个字段非常的大,不需要在 response 里包含,但是从 json 里反序列化时时需要地所以不能简单地直接忽略,在使用 Newtonsoft.J…...

数据结构——哈夫曼编码、哈夫曼树

1 哈夫曼树、哈夫曼编码 定义 哈夫曼树又称最优二叉树&#xff0c;是一种带权路径长度最短的二叉树。所谓树的带权路径长度&#xff0c;就是树中所有的叶结点的权值乘上其到根结点的路径长度&#xff08;若根结点为 0 层&#xff0c;叶结点到根结点的路径长度为叶结点的层数&…...

MySQL 调优:查询慢除了索引还能因为什么?

文章目录 情况一&#xff1a;连接数过小情况二&#xff1a;Buffer Pool 太小 MySQL 查询慢除了索引还能因为什么&#xff1f;MySQL 查询慢&#xff0c;我们一般也会想到是因为索引&#xff0c;但除了索引还有哪些原因会导致数据库查询变慢呢&#xff1f; 以下以 MySQL 中一条 S…...

数据库锁机制

一、数据库锁的分类 数据库锁机制根据不同的维度可分为多种类型: 按锁的粒度划分: 行级锁(Row-Level Lock):锁定单行数据,粒度最细,并发度高,如InnoDB引擎的行锁。表级锁(Table-Level Lock):锁定整张表,并发度低,如MyISAM引擎的表锁。页级锁(Page-Level Lock):…...

计算机二级web易错点(6)-选择题

在软件或系统的三层架构中&#xff0c;三层分别为表示层、逻辑层&#xff08;业务逻辑层&#xff09;和数据访问层。表示层主要负责与用户交互&#xff0c;展示数据和接收用户输入&#xff1b;逻辑层处于中间位置&#xff0c;负责处理业务逻辑&#xff0c;对表示层传来的请求进…...

深入理解 lt; 和 gt;:HTML 实体转义的核心指南!!!

&#x1f6e1;️ 深入理解 < 和 >&#xff1a;HTML 实体转义的核心指南 &#x1f6e1;️ 在编程和文档编写中&#xff0c;< 和 > 符号无处不在&#xff0c;但它们也是引发语法错误、安全漏洞和渲染混乱的头号元凶&#xff01;&#x1f525; 本文将聚焦 <&#…...

windows环境下NER Python项目环境配置(内含真的从头安的perl配置)

注意 本文是基于完整项目的环境配置&#xff0c;即本身可运行项目你拿来用 其中有一些其他问题&#xff0c;知道的忽略即可 导入pycharm基本包怎么下就不说了&#xff08;这个都问&#xff1f;给你一拳o(&#xff40;ω*)o&#xff09; 看perl跳转第5条 1.predict报错多个设备…...

Redis + 布隆过滤器解决缓存穿透问题

Redis 布隆过滤器解决缓存穿透问题 1. Redis 布隆过滤器解决缓存穿透问题 &#x1f4cc; 什么是缓存穿透&#xff1f; 缓存穿透指的是查询的数据既不在缓存&#xff0c;也不在数据库&#xff0c;导致每次查询都直接访问数据库&#xff0c;增加数据库压力。 例如&#xff1…...

2025年3月 CCF GESP C++ 二级 真题解析

1. 单选题(每题2分&#xff0c;共30分) 第1题 试题&#xff1a;2025年春节有两件轰动全球的事件&#xff0c;一个是DeepSeek横空出世&#xff0c;另一个是贺岁片《哪吒2》票房惊人&#xff0c;入了全球票房榜。下面关于DeepSeek与《哪吒2》的描述成立的是( )。 A. 《哪吒2》是一…...

回顾Python基础语法,辨析和C++等的不同~

由于很多院校的计科尤其软工专业在本科期间会设置大量有关不同编程语言的语法基础课&#xff0c;虽然整体来看大同小异&#xff0c;但还是有些细节在不同语言有所差异&#xff1a;比如分号在C和Java必须加&#xff0c;Python和JavaScript则不必&#xff0c;而在Matlab中加入则不…...

ubuntu设置开机自动运行应用

系统版本&#xff1a;Ubuntu 24.04.1 LTS桌面版 按招网上的资料显示&#xff0c;当前版本主要的实现方式有以下两种&#xff0c; 方式1&#xff1a;通过图形界面的【启动应用程序】设置开机自启动&#xff1b;方式2&#xff1a;配置为服务实现开机自启动。 但是在我的电脑上方…...

2024年MathorCup数学建模D题量子计算在矿山设备配置及运营中的建模应用解题文档与程序

2024年第十四届MathorCup高校数学建模挑战赛 D题 量子计算在矿山设备配置及运营中的建模应用 原题再现&#xff1a; 随着智能技术的发展&#xff0c;智慧矿山的概念越来越受到重视。越来越多的设备供应商正在向智慧矿山整体解决方案供应商转型&#xff0c;是否具备提供整体解…...

MCU vs SoC

MCU&#xff08;Microcontroller Unit&#xff0c;单片机&#xff09;和SoC&#xff08;System on Chip&#xff0c;片上系统&#xff09;是两种不同的芯片类型&#xff0c;尽管它们都实现了高度集成&#xff0c;但在设计目标、功能复杂性和应用场景上存在显著差异。以下是两者…...

我的uniapp自定义模板

uniapp自定义模板 如有纰漏请谅解&#xff0c;以官方文档为准后面这段时间我会学习小程序开发的知识&#xff0c;会持续更新可以查看我的github&#xff0c;后续我会上传我的uniapp相关练习代码有兴趣的话可以浏览我的个人网站&#xff0c;我会在上面持续更新内容&#xff0c;…...

JVM 类加载器之间的层次关系,以及类加载的委托机制

JVM 类加载器之间存在一种层次关系&#xff0c;通常被称为双亲委派模型 (Parent Delegation Model)。这种层次关系和委托机制是 Java 类加载机制的核心&#xff0c;对于保证 Java 程序的安全性和避免类冲突至关重要。 1. 类加载器的层次关系: JVM 中的类加载器&#xff08;Cl…...

吞吐与时延的博弈,超发与冗余的交换

做传输协议加速&#xff0c;大家默认激进超发原则&#xff0c;却认为冗余双发不道德&#xff0c;其实这两个是一回事&#xff0c;它们本质上是一种 “矩” 内的交换&#xff0c;就像力和力臂交换但乘积不变一样&#xff0c;成本是固定的。 人们更能原谅激进超发是因为人们对吞…...

Jackson使用ObjectNode对象实现JSON对象数据(一):增、删、改、查

Jackson 是一款高性能的 Java JSON 处理库,广泛应用于 Java 对象的序列化(转为JSON)与反序列化(JSON转为对象)‌。作为 Spring MVC 默认的JSON解析器‌,其核心优势包括‌高性能‌、‌灵活性‌和‌丰富的功能支持‌。 Jackson 库中 ObjectNode 是操作 JSON 对象的核心类,…...

【递归、搜索和回溯算法】专题三 :穷举VS暴搜VS深搜VS回溯VS剪枝

回溯算法 回溯算法是一种经典的递归算法&#xff0c;通常用于解决组合问题、排列问题和搜索问题等。 基本思想&#xff1a;从一个初始状态开始&#xff0c;按照一定的规则向前搜索&#xff0c;当搜索到某个状态无法前进时&#xff0c;回退到钱一个状态&#xff0c;再按照其他的…...

Ubuntu如何部署AI-Sphere-Butler(metahuman-stream)

环境&#xff1a; Ubuntu 20.04、22.04 Python3.10 Pytorch 1.12 CUDA 11.3 问题描述&#xff1a; Ubuntu如何部署AI-Sphere-Butler&#xff08;metahuman-stream&#xff08;LiveTalking&#xff09;&#xff09; 解决方案&#xff1a; 一、部署 本次部署以云服务器&a…...

基于开源模型的微调训练及瘦身打造随身扫描仪方案__用AI把手机变成文字识别小能手

基于开源模型的微调训练及瘦身打造随身扫描仪方案__用AI把手机变成文字识别小能手 一、准备工作&#xff1a;组装你的"数码工具箱" 1. 安装基础工具&#xff08;Python环境&#xff09; 操作步骤&#xff1a; 访问Python官网下载安装包安装时务必勾选Add Python to…...

SpringBoot分布式定时任务实战:告别重复执行的烦恼

场景再现&#xff1a;你刚部署完基于SpringBoot的集群服务&#xff0c;凌晨3点突然收到监控告警——优惠券发放量超出预算两倍&#xff01;检查日志发现&#xff0c;两个节点同时执行了定时任务。这种分布式环境下的定时任务难题&#xff0c;该如何彻底解决&#xff1f; 本文将…...

第十二章 | Solidity 智能合约前后端集成实战

&#x1f4da; 第十二章 | Solidity 智能合约前后端集成实战 ——链上合约 前端钱包 用户交互&#xff0c;打造完整 DApp&#xff01; 这章我们正式进入 DApp 全栈开发领域&#xff01; 用 Ethers.js React/Vue 完成前端和合约交互完整的「前端发起交易 → 钱包签名 → 链上…...

sqlite3数据库(文件)损坏恢复方法

问题描述 实时控制系统在运行过程中&#xff0c;我使用DB Browser for SQLite工具写sqlite数据库操作&#xff0c;工具异常退出&#xff0c;再次使用此工具打开数据文件时&#xff0c;数据文件打不开&#xff0c;报错:invalid rootpage&#xff0c;如何处理&#xff1f; 解决…...

正则艺术:深入探讨高级语法——零宽断言与反向引用实战

正则艺术:深入探讨高级语法——零宽断言与反向引用实战 在 Python 这门语言中,正则表达式无疑是一把神奇的钥匙。它不仅能够轻松实现字符串匹配、替换和拆分,更在数据清洗、日志分析、爬虫开发等场景中大放异彩。作为一名拥有多年实战与教学经验的 Python 程序专家,今天我…...

python——UI自动化(1) selenium之介绍和环境配置

一、selenium介绍 selenium是一个第三方库&#xff0c;python有很多库&#xff1b; 1、什么是ui自动化? 通过模拟手工操作用户ui页面的方式&#xff0c;用代码去实现自动化操作和验证的行为。 2、ui自动化的优点&#xff1f; &#xff08;1&#xff09;解决重复性的功能测…...

专题|Python贝叶斯网络BN动态推理因果建模:MLE/Bayes、有向无环图DAG可视化分析呼吸疾病、汽车效能数据2实例合集

原文链接&#xff1a;https://tecdat.cn/?p41199 作为数据科学家&#xff0c;我们始终在探索能够有效处理复杂系统不确定性的建模工具。本专题合集系统性地解构了贝叶斯网络&#xff08;BN&#xff09;这一概率图模型在当代数据分析中的创新应用&#xff0c;通过开源工具bnlea…...

MQ,RabbitMQ,MQ的好处,RabbitMQ的原理和核心组件,工作模式

1.MQ MQ全称 Message Queue&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中 保存消息的容器。它是应用程序和应用程序之间的通信方法 1.1 为什么使用MQ 在项目中&#xff0c;可将一些无需即时返回且耗时的操作提取出来&#xff0c;进行异步处理&#xff0…...

STM32__红外避障模块的使用

目录 一、红外避障模块 概述 二、直接读取OUT引脚电平 三、使用中断方式触发 一、红外避障模块 概述 引脚解释&#xff1a; VCC接3.3V 或 5.0VGND接开发板的GNDOUT数字量输出(0或1&#xff09;; 低电平时表示前方有障碍 ; 通过可调电阻调整检测距离 产品特点&#xff1a; …...

第三天 开始Unity Shader的学习之旅之第二天的补充

Unity Shader的学习笔记 第三天 开始Unity Shader的学习之旅之第二天的补充 文章目录 Unity Shader的学习笔记前言一、Unity 提供的内置文件和变量1. 内置的包含文件2. UnityCG.cginc中的常用结构体 二、Unity 提供的Cg/HLSL语义1. 从应用阶段传递模型数据给顶点着色器时Unity…...