【前端面经】百度一面

news2025/6/7 22:13:38

写在前面：面经只是记录博主遇到的题目。每题的答案在编写文档的时候已经有问过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等构建工具提供的功能，允许在运行时动态替换，而无需完全刷新页面。

步骤：

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

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

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