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

【前端面经】百度一面

article 2025/6/5 18:31:25

写在前面：面经只是记录博主遇到的题目。每题的答案在编写文档的时候已经有问过deepseek，它只是一种比较普世的答案，要学得深入还是靠自己

Q：

<html><style>.a {background-color: red;width: 200px;height: 100px;}.b {background-color: blue;width: 50px;height: 50px;margin-top: 100%;padding-top: 50%;}</style><body><div class="a"><div class="b"></div></div></body>
</html>

以上代码执行结果是什么
A：
在这里插入图片描述
考察百分比单位的解析规则。
在CSS中，百分比单位的计算方式取决于它所应用的属性以及其包含块的情况。
对于margin/padding的百分比值，无论是水平方向还是垂直方向，都是相对于包含块的宽度来计算的。在这个例子中，包含块是a的div所以是200px。
padding-top与margin相同，也是相对于包含块的宽度，所以50%是100px。
外边距折叠：浏览器的一种默认行为。当子元素的margin-top紧邻父元素的margin-top时，它们边距会折叠，合并为一个外边距，作用于父元素上；如果父元素加上“border: 1px solid black;”则会分割

Q：cesium底层代码有看过吗，底层如何使用canvas实现地图渲染的
A：一个基于WebGL的3D地理空间可视化引擎，底层通过canvas+WebGL实现高性能的地图渲染。
一、场景管理层：管理实体，地形，影像，相机；通过私有API将数据转换为WebGL可渲染的图元。
二、渲染引擎层：基于WebGL封装底层绘图指令；使用command模式组织绘制逻辑，实现高效排序和批处理。
三、数据调度层：动态加载和卸载瓦片，地形，矢量数据。

  		// 创建 WebGL 上下文（通过 Canvas）const canvas = document.getElementById('cesiumContainer');const context = canvas.getContext('webgl', { alpha: false });// 主渲染循环function render() {// 1. 更新相机和场景状态scene.updateFrameState();// 2. 生成渲染命令队列const commandList = scene.updateAndExecuteCommands();// 3. 执行 WebGL 绘制context.clear(...);executeCommands(commandList);// 4. 请求下一帧// requestAnimationFrame调度动画帧，可以确保动画在浏览器【重绘】周期内执行// 从而避免不必要的回流，这种方式可确保动画在最佳时间点进行渲染requestAnimationFrame(render);}// 关键渲染技术// 伪代码：瓦片裁剪与选择if (tile.isInView && tile.meetsLODCriteria) {tile.loadContent(); // 加载纹理或几何数据commandList.add(tile.renderCommand);}// GLSL着色器// 顶点着色器（处理高程采样）varying vec3 v_positionEC;void main() {vec4 position = czm_projection * czm_modelView * vec4(positionMC, 1.0);v_positionEC = (czm_modelView * vec4(positionMC, 1.0)).xyz;gl_Position = position;}

Q：为什么想到用cesium
A：图片获取url然后把所有的图层叠加，转化为canvas。它做3d相对比较底层，SuperMap也有3D，但是它的3D是基于cesium做了二次封装，而越是底层的东西越好操作，被过度封装的东西好用，但是如果有bug或业务改动则不合适。

Q：协商缓存和强缓存有什么区别
A：若缓存生效，强缓存返回200【cache-control】，协商缓存返回304【if-none-match】

Q：性能指标有哪些，查看指标之后如何去优化性能
A：

  • FP first paint 浏览器首次绘制像素到屏幕上的时间
  • FCP first contentful paint 首次绘制有内容的像素到屏幕上的时间
  • FMP 首次绘制有意义的像素到屏幕上的时间
  • 帧率FPS
  • LCP largest contentful paint
  • FID first input delay
  • CLS 累积布局偏移
  • TTI 可交互时间

优化：

  • 长缓存：使浏览器能缓存应用程序的静态资源更长时间，以减少不必要的网络请求，如果资源的URL不变，浏览器会继续用缓存的资源，直到URL变化
  • Web Worker并行处理
  • 图片懒加载+监听滚动事件
  • 长列表渲染：分片，只渲染可视区域，滚动触底加载
  • 动画优化性能：启用GPU加速，避免过多z-index

答题注意逻辑：我使用Lighthouse发现A问题，然后优化对Webpack的构建以解决A问题，部署后查看Chrome DevTools页面，分析是否A问题解决，是否仍有问题，为什么仍有问题。

Q：HMR服务器热更新的原理、热更新时ws传给浏览器有哪些事件
A：模块热替换，是Webpack、Vite等构建工具提供的功能，允许在运行时动态替换，而无需完全刷新页面。

步骤：

  1. Webpack、Vite的开发服务器webpack-dev-server启动时，建立new WebSocket(‘ws://localhost:xxx’)
  2. 服务器用文件系统监听检测代码变动，当文件被修改时，框架会重新编译受影响的部分，并生成新的模块代码和HMR更新清单
  3. 服务器通过ws向浏览器发送HMR更新事件
  4. 浏览器接受更新，新模块代码动态替换旧模块，并执行相关回调

热更新时ws传给浏览器有哪些事件：
在这里插入图片描述

// 事件的详细结构
// 浏览器收到后，会用新模块代码替换旧模块
// 执行 module.hot.accept() 回调（如果有）
{"type": "update","data": {"hash": "a1b2c3d4",       // 当前编译的 hash"modules": [               // 需要更新的模块列表{"id": "./src/App.js",  // 模块路径"name": "./App",       // 模块名称"generated": "..."     // 新模块代码（字符串或 AST）}],"source": "HMR"           // 更新来源}
}

相关文章：

【前端面经】百度一面

写在前面&#xff1a;面经只是记录博主遇到的题目。每题的答案在编写文档的时候已经有问过deepseek&#xff0c;它只是一种比较普世的答案&#xff0c;要学得深入还是靠自己 Q&#xff1a; <html><style>.a {background-color: red;width: 200px;height: 100px;}…...

编程日记 2025/6/3 22:15:25

嵌入式学习笔记 - freeRTOS 动态创建任务跟静态创建任务的区别，以及内存回收问题

‌FreeRTOS动态创建任务和静态创建任务各有优缺点&#xff0c;选择哪种方式取决于具体的应用场景和需求。‌ 一 动态创建任务 ‌优点‌&#xff1a; ‌灵活性高‌&#xff1a;动态任务在运行时通过pvPortMalloc()动态分配内存&#xff0c;系统自动管理栈和任务控制块&#xf…...

编程日记 2025/6/3 22:14:22

[免费]微信小程序网上花店系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序网上花店系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序网上花店系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程日记 2025/6/3 22:13:17

如何给老旧 iOS App 添加安全保护？用 Ipa Guard 对 IPA 文件混淆加固实录

在大多数安全讨论中&#xff0c;我们习惯关注新项目的安全性&#xff0c;从代码结构、API 设计、用户认证机制出发&#xff0c;构建完善的防护体系。但现实是&#xff0c;很多开发者都在维护一些年久失修的老项目——技术架构老旧、团队成员流失、源码混乱甚至缺失。 我最近接…...

编程日记 2025/6/5 10:28:42

C#语音录制：使用NAudio库实现语音录制功能详解

C#语音录制&#xff1a;使用NAudio库实现语音录制功能详解 在音频处理领域&#xff0c;C# 凭借其强大的生态系统和丰富的类库&#xff0c;为开发者提供了便捷的开发工具。NAudio 库就是其中一款用于音频处理的优秀开源库&#xff0c;它支持多种音频格式和音频设备操作。今天&a…...

编程日记 2025/6/5 13:50:13

[蓝桥杯]缩位求和

缩位求和 题目描述 在电子计算机普及以前&#xff0c;人们经常用一个粗略的方法来验算四则运算是否正确。 比如&#xff1a;248153720248153720 把乘数和被乘数分别逐位求和&#xff0c;如果是多位数再逐位求和&#xff0c;直到是 1 位数&#xff0c;得 24814>14524814…...

编程日记 2025/6/3 22:10:09

MySQ-8.42 MGR 组复制部署及详解

目录 1 MGR要求 2 操作系统信息和软件版本 3 集群架构图 4 MySQL MGR 主库部署步骤 1 MGR要求 InnoDB 存储引擎 表上必须存在主键或唯一非空索引 MGR可允许的最大节点9个 2 操作系统信息和软件版本 rootu24-mysql-mgr-42:~# cat /etc/issue Ubuntu 24.04.2 LTS \n \l mysql…...

编程日记 2025/6/5 15:07:00

css使用scoped之后样式失效问题

项目中的vue代码原本用的style标签来写css&#xff0c;现在想改成<style langscss scoped>&#xff0c;但是改完之后发现样式不对&#xff1a; 原来是&#xff1a; 将style改成scoped之后变成了&#xff1a;检查发现是之前定义的一些变量无法被识别&#xff0c;导致这些样…...

编程日记 2025/6/5 9:27:57

【NLP】将 LangChain 与模型上下文协议 (MCP) 结合使用

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…...

编程日记 2025/6/5 0:28:15

使用NMEA Tools生成GPS轨迹图

前言 在现代科技快速发展的时代&#xff0c;GPS定位技术已经广泛应用于各种领域&#xff0c;如导航、物流、运动追踪等。为了获取和分析GPS数据&#xff0c;我们常常需要使用一些专业的工具。本文将详细介绍如何使用一款名为“NMEA Tools”的APK应用&#xff0c;结合GPSVisual…...

编程日记 2025/6/5 10:39:14

1. pytorch手写数字预测

1. pytorch手写数字预测 1.背景2.准备数据集2.定义模型3.dataloader和训练4.训练模型5.测试模型6.保存模型 1.背景 因为自身的研究方向是多模态目标跟踪&#xff0c;突然对其他的视觉方向产生了兴趣&#xff0c;所以心血来潮的回到最经典的视觉任务手写数字预测上来&#xff0…...

编程日记 2025/6/5 8:33:33

vs中添加三方库的流程

在Visual Studio&#xff08;VS&#xff09;中添加第三方库&#xff08;如OpenCV、PCL等&#xff09;的流程可以分为以下几个步骤&#xff1a;安装库、配置项目、编写代码。以下是详细的步骤说明&#xff1a; 1. 安装第三方库 首先&#xff0c;需要下载并安装所需的第三方库。…...

编程日记 2025/6/5 12:15:31

JAVASE面相对象进阶之static

JavaSE 面向对象进阶之 static 一、static 的核心作用 static 是 Java 中用于修饰成员&#xff08;属性/方法&#xff09;的关键字&#xff0c;作用是让成员与类直接关联&#xff0c;而非依赖对象存在。 二、static 修饰属性&#xff08;静态变量&#xff09; 特点&#xf…...

编程日记 2025/6/5 7:00:14

深入解析 Redis Cluster 架构与实现（一）

#作者&#xff1a;stackofumbrella 文章目录 Redis Cluster特点Redis Cluster与其它集群模式的区别集群目标性能hash tagsMutli-key操作Cluster Bus安全写入&#xff08;write safety&#xff09;集群节点的属性集群拓扑节点间handshake重定向与reshardingMOVED重定向ASK重定向…...

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

（12）java+ selenium-＞元素定位大法之By_link_text

1.简介 本章节介绍元素定位中的link_text，顾名思义是通过链接定位的（官方说法：超链接文本定位）。什么是link_text呢，就是我们在任何一个网页上都可以看到有一个或者多个链接，上面有一个文字描述，点击这个文字，就可以跳转到其他页面。这个就是link_Text。 注意：link_t…...

编程日记 2025/6/5 6:35:26

数据库MySQL集群MGR

一、MGR原理 一、基本定义 MGR&#xff08;MySQL Group Replication&#xff09; 是 MySQL 官方推出的一种高可用、高可靠的数据库集群解决方案&#xff0c;基于分布式系统理论&#xff08;如 Paxos 协议变种&#xff09;实现&#xff0c;主要用于构建强一致性的主从复制集群…...

编程日记 2025/6/5 12:37:47

Ubuntu22.04 安装 ROS2 Humble

ROS2 Documentation: Humble Ubuntu 22.04 对应的 ROS 2 版本是 ROS 2 Humble Hawksbill (LTS)。 1.设置系统区域 确保区域设置支持UTF-8 sudo apt update && sudo apt install locales sudo locale-gen en_US en_US.UTF-8 sudo update-locale LC_ALLen_US.UTF-8 L…...

编程日记 2025/6/3 21:58:32

Spring Boot，注解，@RestController

RestController 是 Spring MVC 中用于创建 RESTful Web 服务的核心注解。 RestController 核心知识点 REST 作用: RestController 是一个方便的组合注解&#xff0c;它结合了 Controller 和 ResponseBody 两个注解。 Controller: 将类标记为一个控制器&#xff0c;使其能够处理…...

编程日记 2025/6/4 23:22:05

C++中新式类型转换static_cast、const_cast、dynamic_cast、reinterpret_cast

C中新式类型转换static_cast、const_cast、dynamic_cast、reinterpret_cast 在C中&#xff0c;新式类型转换&#xff08;也称为强制类型转换&#xff09;是C标准引入的一种更安全、更明确的类型转换方式&#xff0c;用以替代C语言风格的类型转换。C提供了四种新式类型转换操作…...

编程日记 2025/6/5 0:19:51

AXI 协议补充（二）

axi协议存在slave 和master 之间的数据交互，在ahb ，axi-stream 高速接口 ，叠加大位宽代码逻辑中，往往有时序问题，valid 和ready 的组合电路中的问题引发的时序问题较多。 本文根据axi 协议和现有解决反压造成的时序问题的方法做一个详细的科普。 1. 解决时序问题的方法：…...

编程日记 2025/6/5 4:34:53

Linux 基础指令入门指南：解锁命令行的实用密码

文章目录 引言&#xff1a;Linux 下基本指令常用选项ls 指令pwd 命令cd 指令touch 指令mkdir 指令rmdir 指令 && rm 指令man 指令cp 指令mv 指令cat 指令more 指令less 指令head 指令tail 指令date 指令cal 指令find 指令按文件名搜索按文件大小搜索按修改时间搜索按文…...

编程日记 2025/6/5 10:36:48

标准精读：2025 《可信数据空间 技术架构》【附全文阅读】

《可信数据空间 技术架构》规范了可信数据空间的技术架构，明确其作为国家数据基础设施的定位，以数字合约和使用控制技术为核心，涵盖功能架构（含服务平台与接入连接器的身份管理、目录管理、数字合约管理等功能）、业务流程（登记、发现、创建空间及数据流通利用）及安全要求…...

编程日记 2025/6/5 14:53:35

山东大学软件学院项目实训-基于大模型的模拟面试系统-面试官和面试记录的分享功能（2）

本文记录在发布文章时&#xff0c;可以添加自己创建的面试官和面试记录到文章中这一功能的实现。 前端 首先是在原本的界面的底部添加了两个多选框&#xff08;后期需要美化调整&#xff09; 实现的代码&#xff1a; <el-col style"margin-top: 1rem;"><e…...

编程日记 2025/6/5 5:41:02

Webug4.0靶场通关笔记05- 第5关SQL注入之过滤关键字

目录 一、代码审计 1、源码分析 2、SQL注入分析 &#xff08;1&#xff09;大小写绕过 &#xff08;2&#xff09;双写绕过 二、第05关 过滤型注入 1、进入靶场 2、sqlmap渗透 &#xff08;1&#xff09;bp抓包保存报文 &#xff08;2&#xff09;sqlmap渗透 &…...

编程日记 2025/6/3 21:49:56

ONLYOFFICE文档API：更强的安全功能

在数字化办公时代&#xff0c;文档的安全性与隐私保护已成为企业和个人用户的核心关切。如何确保信息在存储、传输及协作过程中的安全&#xff0c;是开发者与IT管理者亟需解决的问题。ONLYOFFICE作为一款功能强大的开源办公套件&#xff0c;不仅提供了高效的文档编辑与协作体验…...

编程日记 2025/6/3 21:48:47

深入浅出MQTT协议：从物联网基础到实战应用全解析

深入浅出MQTT协议&#xff1a;从物联网基础到实战应用全解析 作为一名在物联网领域摸爬滚打多年的老程序员&#xff0c;今天来和大家聊聊物联网通信中最核心的技术之一——MQTT协议。无论是Java后端开发还是嵌入式硬件开发&#xff0c;掌握MQTT都能让你在物联网项目中如鱼得水…...

编程日记 2025/6/5 16:58:35

解析楼宇自控系统：分布式结构的核心特点与优势展现

在建筑智能化发展的进程中&#xff0c;楼宇自控系统作为实现建筑高效运行与管理的关键&#xff0c;其系统结构的选择至关重要。传统的集中式楼宇自控系统在面对日益复杂的建筑环境和多样化的管理需求时&#xff0c;逐渐暴露出诸多弊端&#xff0c;如可靠性低、扩展性差、响应速…...

编程日记 2025/6/5 18:12:20

C#数字图像处理(三)

文章目录 前言1.图像平移1.1 图像平移定义1.2 图像平移编程实例 2.图像镜像2.1 图像镜像定义2.2 图像镜像编程实例 3.图像缩放3.1 图像缩放定义3.2 灰度插值法3.3 图像缩放编程实例 4.图像旋转4.1 图像旋转定义4.2 图像旋转编程实例 前言 在某种意义上来说&#xff0c;图像的几…...

编程日记 2025/6/5 13:22:53

STM32 智能小车项目 L298N 电机驱动模块

今天开始着手做智能小车的项目了 在智能小车或机器人项目中&#xff0c;我们经常会听到一个词叫 “H 桥电机驱动”&#xff0c;尤其是常见的 L298N 模块&#xff0c;就是基于“双 H 桥”原理设计的。那么&#xff0c;“H 桥”到底是什么&#xff1f;为什么要用“双 H 桥”来驱动…...

编程日记 2025/6/3 21:43:34

SQL Transactions（事务）、隔离机制

目录 Why Transactions? Example: Bad Interaction Transactions ACID Transactions COMMIT ROLLBACK How the Transaction Log Works How Data Is Stored Example: Interacting Processes Interleaving of Statements Example: Strange Interleaving Fixing the…...

编程日记 2025/6/4 23:42:59