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

前端面试每日三题 - Day 25

news 来源：原创 2025/8/25 3:22:54

这是我为准备前端/全栈开发工程师面试整理的第25天每日三题练习，涵盖了：

CSS中如何实现一个保持宽高比的自适应正方形元素
Angular的变更检测（Change Detection）机制
项目实战 - 设计一个微前端架构的前端应用。

✅ 题目1：CSS中如何实现一个保持宽高比的自适应正方形元素？请给出至少两种实现方案并解释原理

padding百分比法
```
.square {width: 100%;height: 0;padding-bottom: 100%; /* 宽高比1:1 */background: #ccc;
}
```
原理：CSS规范中垂直方向（padding-top/padding-bottom）的百分比值基于父元素宽度计算，通过设置padding-bottom:100%实现1:1宽高比。需配合height:0消除容器原始高度影响。
aspect-ratio属性
```
.aspect-wrapper {container-type: inline-size; /* 定义容器 */
}.aspect-square {width: 100%;aspect-ratio: 1/1; /* 直接声明宽高比 */background: #e0e0e0;
}
```
原理：通过aspect-ratio属性直接声明宽高比，需配合容器查询实现响应式布局。浏览器会自动根据容器宽度计算高度，兼容Chrome 88+/Firefox 89+。
视窗单位法
```
.square {width: 50vw;height: 50vw; /* 基于视窗宽度 */
}
```
原理：vw单位基于视口宽度，但需注意父容器可能限制实际尺寸。

✅ 题目2：Angular的变更检测（Change Detection）机制是如何工作的？如何优化性能？

工作原理：
- 默认策略：Zone.js拦截所有异步事件（点击、定时器等），触发整个组件树的变更检测
- 脏检查：通过比较数据的新旧值判断是否需要更新视图
- 组件树遍历：从根组件开始，递归检查所有子组件
优化策略：
- OnPush策略：设置组件changeDetection: ChangeDetectionStrategy.OnPush，仅在输入属性变化或手动标记时检测
- 手动控制：使用ChangeDetectorRef.detach()/detectChanges()精细控制检测范围
- Immutable数据：使用不可变数据结构减少检测次数
- Async Pipe：内置管道自动管理订阅和取消检测

✅ 题目3：设计一个微前端架构的前端应用，需要考虑哪些核心问题？如何实现应用间的隔离与通信？

核心问题清单：

应用隔离：样式污染、JS全局变量冲突
通信机制：跨应用数据共享与事件传递
资源加载：按需加载子应用，避免重复依赖
路由管理：主应用与子应用路由协调
构建部署：独立开发、独立部署

实现方案：

应用隔离：
- CSS隔离：使用Shadow DOM或CSS Module
- JS沙箱：通过Proxy代理全局对象（如window），实现运行时隔离
通信机制：
- CustomEvent：主应用与子应用通过自定义事件通信
- 状态管理库：共享Redux或Vuex Store（需版本兼容）
- URL参数：通过路由参数传递简单数据

技术选型：

方案库：qiankun（阿里）、single-spa
模块加载：SystemJS动态加载子应用资源

示例代码：

// 主应用注册子应用（qiankun示例）
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([{name: 'subApp1',entry: '//localhost:7101',container: '#subapp-container',activeRule: '/subapp1',}
]);
start();

📅 明日预告：

HTML/CSS/JS - CSS Grid 布局与 Flexbox 布局的核心区别
Vue - Vue 的 Transition 组件
项目实战 - 设计一个高性能的 SSR（服务端渲染）方案

💪 坚持每日三题，未来更进一步！如果你也在准备面试，欢迎一起刷题打卡！

前端面试每日三题 - Day 25

这是我为准备前端/全栈开发工程师面试整理的第25天每日三题练习，涵盖了： CSS中如何实现一个保持宽高比的自适应正方形元素Angular的变更检测（Change Detection）机制项目实战 - 设计一个微前端架构的前端应用。 ✅ 题目1&#xff…...

编程日记 2025/8/25 3:22:54

基于windows安装MySQL8.0.40

基于windows安装MySQL8.0.40 基于windows 安装 MySQL8.0.40，解压文件到D:\mysql-8.0.40-winx64 在D:\mysql-8.0.40-winx64目录下创建my.ini文件，并更新一下内容 [client] #客户端设置，即客户端默认的连接参数 # 设置mysql客户端连接服务…...

编程日记 2025/8/25 1:43:53

基于机器学习算法预测二手车市场数据清洗与分析平台（源码+定制+讲解）基于Python的数据挖掘与可视化二手车数据处理与分析系统开发 (机器学习算法预测）

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2025/8/23 5:48:51

【神经网络与深度学习】普通自编码器和变分自编码器的区别

引言自编码器（Autoencoder，AE）和变分自编码器（Variational Autoencoder，VAE）是深度学习中广泛应用的两类神经网络结构，主要用于数据的压缩、重构和生成。然而，二者在模型设计、训练…...

编程日记 2025/8/25 3:22:19

【现代深度学习技术】现代循环神经网络07：序列到序列学习（seq2seq）

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈PyTorch深度学习 ⌋ ⌋ ⌋ 深度学习 (DL, Deep Learning) 特指基于深层神经网络模型和方法的机器学习。它是在统计机器学习、人工神经网络等算法模型基础上，结合当代大数据和大算力的发展而发展出来的。深度学习最重…...

编程日记 2025/8/21 18:43:14

【Linux我做主】进度条小程序深度解析

Linux下C语言进度条程序深度解析进度条小程序GitHub地址前言前置知识回车换行（CR/LF）的深度解析历史渊源与技术规范在进度条/倒计时中的应用缓冲区机制的全面剖析缓冲区引入缓冲类型对比进度条开发中的关键控制进度条实现以小见大——倒计时倒计时最…...

编程日记 2025/8/25 1:12:41

Vue项目安全实践指南：从输入验证到状态管理的全方位防护

一、项目背景在Vue2项目开发过程中，我们遇到了一些需要优化的安全实践问题。本文将分享我们在项目中的一些安全优化经验，希望能帮助到其他开发者。主要优化点： 输入输出安全处理请求安全防护数据存储安全路由访问控制文件上传处理表单数…...

编程日记 2025/8/21 20:08:12

Pinocchio导入URDF关节为continuous的问题及详细解释

视频讲解： Pinocchio导入URDF关节为continuous的问题及详细解释仓库地址：GitHub - LitchiCheng/mujoco-learning 问题背景：打算测试将之前的panda的urdf换成so-arm100的urdf，发现pinocchio的代码不能用，很奇怪&#…...

编程日记 2025/8/21 18:43:12

《Python星球日记》第30天：Flask数据库集成

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏：《Python星球日记》，限时特价订阅中ing 目录一、数据库…...

编程日记 2025/8/22 19:44:03

GAF-CNN-SSA-LSSVM故障诊断/分类预测，附带模型研究报告（Matlab）

GAF-CNN-SSA-LSSVM故障诊断/分类预测，附带模型研究报告（Matlab） 目录 GAF-CNN-SSA-LSSVM故障诊断/分类预测，附带模型研究报告（Matlab）效果一览基本描述程序设计参考资料效果一览基本描述本研究提出的GA…...

编程日记 2025/8/21 12:34:33

轻松养生：让健康融入生活

养生不是负担，而是可以轻松融入日常的生活方式。掌握以下要点，就能开启健康之旅。清晨醒来，先喝一杯常温水，唤醒沉睡的肠胃。早餐选择富含膳食纤维的燕麦片搭配新鲜水果，补充能量又促进消化。午餐和晚餐做到荤素搭配&…...

编程日记 2025/8/25 3:20:35

工业主义与民主的兴衰：历史逻辑与未来危机

一、工业主义催生大众民主的机制经济基础变革非技术工人崛起：工业革命后，机器生产替代传统手工业，非熟练工人（包括妇女、儿童）收入提升，财富分配趋于平等，形成新兴中产阶级。政府财政能力增…...

编程日记 2025/8/25 3:20:36

从代码学习深度学习 - 目标检测前置知识(二) PyTorch版

文章目录前言一、多尺度目标检测1.1 多尺度锚框1.2 绘图工具函数 (`utils_for_huitu.py`)1.3 可视化多尺度锚框1.4 多尺度检测（理论）二、自定义目标检测数据集2.1 读取数据2.2 创建 Dataset 类2.3 创建 DataLoader2.4 验证数据加载2.5 可视化数据集样本总结前言大家好！欢…...

编程日记 2025/8/21 11:45:22

什么是“系统调用”

一、什么是“系统调用”？用生活中的比喻理解可以把“系统调用”比作你（用户）向“管理员”请求帮助完成某件事情的过程。举个例子： 你想借书，去图书馆（操作系统）找管理员（内核&a…...

编程日记 2025/8/25 3:21:26

代码异味（Code Smell）识别与重构指南

1、引言：什么是“代码异味”？在软件开发中，“代码异味（Code Smell）”是指那些虽然不会导致程序编译失败或运行错误，但暗示着潜在设计缺陷或可维护性问题的代码结构。它们是代码演进过程中的“信号灯”，提示我们某段代码可能需要优化。 1.1 ✅ 为什么关注代码异味？预…...

编程日记 2025/8/21 18:43:02

005-nlohmann/json 基础方法-C++开源库108杰

《二、基础方法》：节点访问、值获取、显式 vs 隐式、异常处理、迭代器、类型检测、异常处理……一节课搞定C处理JSON数据85%的需求…… JSON 字段的简单类型包括：number、boolean、string 和 null（即空值）；复杂类型则有…...

编程日记 2025/8/21 18:43:00

java学习之数据结构：四、树（代码补充）

这部分主要是用代码实现有序二叉树、树遍历、删除节点目录 1.构建有序二叉树 1.1原理 1.2插入实现 2.广度优先遍历--队列实现 3.深度优先遍历--递归实现 3.1先序遍历 3.2中序遍历 3.3后序遍历 4.删除 4.1删除叶子节点 4.2删除有一棵子树的节点 4.3删除有两棵子树的节…...

编程日记 2025/8/21 4:20:37

Java面试场景分析：从音视频到安全与风控的技术探讨

Java面试场景分析：从音视频到安全与风控的技术探讨在一个阳光明媚的早晨，互联网大厂的面试室里，面试官李老师坐在桌前，严肃认真；而程序员小张则显得有些紧张，甚至有些搞笑。第一轮提问： 李老…...

编程日记 2025/8/21 18:42:57

《OmniMeetProTrack 全维会议链智能追录系统软件设计文档》

撰稿人：wjz 一、引言 1.1 目的本软件设计文档详细描述了 OmniMeetProTrack 全维会议链智能追录系统的架构、组件、模块设计及实现细节，旨在为开发人员、利益相关者和维护人员提供系统的全面设计蓝图。本文档基于需求定义文档，确保系统实现…...

编程日记 2025/8/25 3:22:19

C 语言逻辑运算符：组合判断，构建更复杂的条件

各类资料学习下载合集 https://pan.quark.cn/s/8c91ccb5a474 在 C 语言编程中，我们已经学习了如何使用比较运算符（如 ==, <, >）来判断两个值之间的关系，从而得到“真”或“假”的结果。但很多时候，我们需要根据多个条件的组合…...

编程日记 2025/8/23 2:30:34

大模型推理框架简介

概述通常需要大量的计算资源，高效运行LLMs仍然是一个挑战， 推理框架作为LLM高效部署的关键组件，直接关系到应用的性能、成本和开发效率。高性能框架 vLLM GitHub，由SKYPILOT构建的推理优化框架，旨在提高在GPU上…...

编程日记 2025/8/21 20:08:06

《MATLAB实战训练营：从入门到工业级应用》高阶挑战篇-《5G通信速成：MATLAB毫米波信道建模仿真指南》

《MATLAB实战训练营：从入门到工业级应用》高阶挑战篇-5G通信速成：MATLAB毫米波信道建模仿真指南 🚀📡 大家好！今天我将带大家进入5G通信的奇妙世界，我们一起探索5G通信中最激动人心的部分之一——毫米波信…...

编程日记 2025/8/22 7:26:00

word导出pdf带有目录导航栏-error记

1、打开word文档——>点击"视图"选项卡——>勾选"导航窗格" 2、点击"文件"——>导出——>创建PDF/XPS 3、点击"选项"——>勾选"创建书签时使用(C)" "标题(H)" 4、点击"确定"——>点击…...

编程日记 2025/8/21 20:08:02

word怎么删除空白页？word最后一页删不掉怎么办

在使用word的过程中，有时出现空白页就可能会给大家带来一些困扰。到底怎么样才能把这些空白页删除，又应该如何解决最后也删不掉的问题呢？ 要想删除普通的空白页，那就需要将光标直接放在空白页，然后按【Delete】键&…...

编程日记 2025/8/23 10:12:08

虚幻基础：硬件输入

文章目录 triggered：按下一直触发等于tickcompleted：必须等到triggered结束后才触发松下triggered结束默认按键触发顺序按下：触发两个先 Started后 Triggered 松开Completed 触发器：用于修改triggered 触发和结束驱动阈值&…...

编程日记 2025/8/21 20:07:58

【Java ee初阶】多线程（5）

一、wait 和 notify wait notify 是两个用来协调线程执行顺序的关键字，用来避免“线程饿死”的情况。 wait 和 notify 其实都是 Object 这个类的方法，而 Object这个类是所有类的“祖宗类”，也就是说明，任何一个类，都…...

编程日记 2025/8/21 20:07:56

售前赢单评分是越权吗？

相关文章软件实施工作个人看法当前部门软件产品经理的职责涵盖售前支持工作。此前梳理工作时，计划在每个售前支持项目完成后，由支持人对项目赢单概率进行评估，旨在通过这一机制筛选重点项目，为赢单率高的项目优先配置资源。 …...

编程日记 2025/8/21 20:07:53

uniapp中用canvas绘制简单柱形图，小容量，不用插件——简单使用canvas

uniapp中用canvas绘制简单柱形图，小容量，不用插件——简单使用canvas 完整代码 <template><view><view class"navTab"><view :class"listIndexi?activite:"…...

编程日记 2025/8/21 20:07:51

SecureCRT 使用指南：安装、设置与高效操作

目录一、SecureCRT 简介 1.1 什么是 SecureCRT？ 1.2 核心功能亮点 1.3 软件特点二、SecureCRT 安装与激活 2.1 安装步骤（Windows 系统） 2.2 激活与破解（仅供学习参考） 三、基础配置与优化 3.1 界面与编码设…...

编程日记 2025/8/21 11:15:57

WebRTC 服务器之SRS服务器概述和环境搭建

1.概述 SRS（Simple Realtime Server）是一款高性能、跨平台的流媒体服务器，支持多种协议，包括 RTMP、WebRTC、HLS、HTTP-FLV、SRT、MPEG-DASH 和 GB28181。本文介绍了 SRS，包括其用途、关键功能、架构和支持协议。SRS 旨…...

编程日记 2025/8/25 3:20:37

第R8周：RNN实现阿尔兹海默病诊断（pytorch）

- **🍨 本文为[🔗365天深度学习训练营](https://mp.weixin.qq.com/s/rnFa-IeY93EpjVu0yzzjkw) 中的学习记录博客** - **🍖 原作者：[K同学啊](https://mtyjkh.blog.csdn.net/)** 一：前期准备工作 1.设置硬件设备 impo…...

编程日记 2025/8/21 20:07:45

vue+element 导航实现例子

项目使用的是 vue 3，安装配置可以查看栏目前面的文章。组件导航：https://element-plus.org/zh-CN/component/menu.html 面包屑：https://element-plus.org/zh-CN/component/breadcrumb.html 安装element库 PS D:\code\my-vue3-project&g…...

编程日记 2025/8/21 20:07:43

金仓数据库 KingbaseES 在电商平台数据库迁移与运维中深入复现剖析

金仓数据库 KingbaseES 在电商平台数据库迁移与运维中深入复现剖析前言在当今数字化商业蓬勃发展的时代，电商平台的数据量呈爆发式增长，对数据库性能、稳定性和扩展性提出了极高要求。本文章基于大型电商平台原本采用 MySQL 数据库，但随着业…...

编程日记 2025/8/21 11:13:59

Go小技巧易错点100例（三十）

本期分享： 1.切片共享底层数组 2.获取Go函数的注释切片共享底层数组在Go语言中，切片和数组是两种不同的元素，但是切片的底层是数组，并且还有一个比较重要的机制：切片共享底层数组。下面这段代码演示了切片&…...

编程日记 2025/8/21 20:07:39

LeetCode 热题 100 78. 子集

LeetCode 热题 100 | 78. 子集大家好，今天我们来解决一道经典的算法题——子集。这道题在 LeetCode 上被标记为中等难度，要求给定一个整数数组 nums，返回该数组所有可能的子集（幂集）。解集不能包含重复的子集&#x…...

编程日记 2025/8/25 1:43:56

苹果公司正在与亚马逊支持的初创公司Anthropic展开合作

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/8/21 20:07:36

Python项目源码57：数据格式转换工具1.0（csv+json+excel+sqlite3）

1.智能路径处理：自动识别并修正文件扩展名，根据转换类型自动建议目标路径，实时路径格式验证，自动补全缺失的文件扩展名。 2.增强型预览功能：使用pandastable库实现表格预览，第三方模块自己安装一下&#x…...

编程日记 2025/8/24 2:31:33

Redis总结（六）redis持久化

本文将简单介绍redis持久化的两种方式 redis提供了两种不同级别的持久化方式： RDB持久化方式能够在指定的时间间隔能对你的数据进行快照存储.AOF持久化方式记录每次对服务器写的操作,当服务器重启的时候会重新执行这些命令来恢复原始的数据,AOF命令以redis协议追加保…...

编程日记 2025/8/24 16:03:02

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】5.3 相关性分析（PEARSON/SPEARMAN相关系数）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 5.3 相关性分析（PEARSON/SPEARMAN相关系数）5.3.1 相关性分析理论基础5.3.1.1 相关系数定义与分类5.3.1.2 Pearson相关系数（ Pearson Corr…...

编程日记 2025/8/21 20:07:31

目录 01 lars 系统架构回顾 02 lars-lbAgentV0.4-route_lb处理report业务流程 03 lars-lbAgentV0.4-负责均衡判断参数配置 04 lars-lbAgentV0.4-负载均衡idle节点的失败率判断 05 lars-lbAgentV0.4-负载均衡overload节点的成功率判断 06 lars-lbAgentV0.4-负载均衡上报提交…...

编程日记 2025/8/23 21:19:15

AIGC学术时代：DeepSeek如何助力实验与数值模拟

目录 1.实验和数值模拟工具 2.结合使用大家好这里是AIWritePaper官方账号，官网👉AIWritePaper~ 在工程和科学研究的世界里，实验与数值模拟是探索未知、验证理论和推动创新的两大支柱。它们如同一对翅膀，让思想得以飞翔&#xf…...

编程日记 2025/8/23 16:51:00

PHP数组排序深度解析：sort()、rsort()、asort()、arsort()、ksort()、krsort() 的适用场景与性能对比

在PHP开发中，数组排序是日常操作的核心技能之一。无论是处理用户数据、产品列表，还是分析日志信息，合理的排序方法能显著提升代码的效率和可维护性。PHP提供了多种数组排序函数（如 sort()、rsort()、asort() 等）&#…...

编程日记 2025/8/24 4:35:56

2025年企业Radius认证服务器市场深度调研：中小企业身份安全投入产出比最优解

引言：数字化转型浪潮下的身份安全新命题在混合办公成为常态、物联网设备呈指数级增长、网络攻击手段日益隐蔽的2025年，企业网络边界正在经历前所未有的重构。据IDC预测，全球企业网络安全投入中，身份与访问管理（IAM&a…...

编程日记 2025/8/21 20:07:24

开源模型应用落地-qwen模型小试-Qwen3-8B-快速体验-批量推理（三）

一、前言阿里云最新推出的 Qwen3-8B 大语言模型，作为国内首个集成“快思考”与“慢思考”能力的混合推理模型，凭借其 80 亿参数规模及 128K 超长上下文支持，正在重塑 AI 应用边界。该模型既可通过轻量化“快思考”实现低算力秒级响应，也能在复杂任务中激活深度推理模式，以…...

编程日记 2025/8/22 21:08:49

相同IP和端口的服务器ssh连接时出现异常

起因把服务器上的一个虚拟机搞坏了，所以删除重新创建了一个，端口号和IP与之前的虚拟机相同。 ssh usernameIP -p port 时报错 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone…...

编程日记 2025/8/25 1:12:44

VScode中关于Copilot的骚操作

目录 1. Ctrl I 直接在工作区对话 2.Tab 党福音：写注释生成代码 3. 连续写几行函数头，Copilot 会自动“补全全函数” 4. 自动写单元测试 5. 在注释中要求它写某种风格 6. 代码重写器 7. 多语言切换无痛自动翻译 8. 在空文件中写注释&#xff0c…...

编程日记 2025/8/21 3:23:01

linux inotify 资源详解

Linux 的 inotify 是一个强大的文件系统监控机制，允许应用程序实时监听文件和目录的变化。这对于需要响应文件系统事件的应用（如配置热加载、备份工具、文件同步服务等）至关重要。以下是对 inotify 资源的深度解析： 一、核心概念…...

编程日记 2025/8/21 20:07:17

Java SE(8)——继承

1.继承的概念&作用在Java中，继承是面向对象编程的三大基本特性之一（还有封装和多态），允许一个类（子类/继承类）继承另一个类（父类/基类）的属性和方法继承的核心目的是&#xf…...

编程日记 2025/8/21 20:07:15

【论文笔记】SOTR: Segmenting Objects with Transformers

【题目】：SOTR: Segmenting Objects with Transformers 【引用格式】：Guo R, Niu D, Qu L, et al. Sotr: Segmenting objects with transformers[C]//Proceedings of the IEEE/CVF international conference on computer vision. 2021: 7157-7166. 【网…...

编程日记 2025/8/23 5:48:48

AIDC智算中心建设：资源池化核心技术解析

目录一、池化技术架构二、池化核心技术三、展望一、池化技术架构智能算力池化指依托云计算技术，整合 GPU/AI 芯片等异构算力资源，构建集中管理的资源池，并按上层智算业务的需求，对池化的资源进行统一调度、分配&#xff…...

编程日记 2025/8/24 5:26:57

✅ 题目1：CSS中如何实现一个保持宽高比的自适应正方形元素？请给出至少两种实现方案并解释原理

✅ 题目2：Angular的变更检测（Change Detection）机制是如何工作的？如何优化性能？

✅ 题目3：设计一个微前端架构的前端应用，需要考虑哪些核心问题？如何实现应用间的隔离与通信？

📅 明日预告：

相关文章：