校招｜前端百度校招123面经--已oc

百度前端校招123面经核心问题及解析如下：

• CSS布局实现

  题目：实现左右分栏布局，左侧固定200px，右侧自适应。

  解析：

  Flex布局：父容器设display: flex，左侧width: 200px，右侧flex: 1。

  Grid布局：父容器设display: grid，grid-template-columns: 200px 1fr。

  绝对定位：左侧position: absolute; width: 200px，右侧margin-left: 200px（需注意父容器需设position: relative）。

  浮动：左侧float: left; width: 200px，右侧overflow: hidden（BFC原理）。

• 布局显示问题（代码分析）

  题目：分析以下代码的渲染效果：

  p { background: red; color: #000; position: absolute;}

  解析：所有<p>标签会脱离文档流，重叠显示在相同位置（左上角），背景红色，文字黑色。需注意绝对定位元素的定位基准（若无父级定位则相对于视口）。

• Promise链式调用

  题目：分析以下代码输出：

  Promise.resolve(1) .then((x) => { throw new Error('My Error') }) .catch(() => 1) .then((x) => x + 1) .then((x) => console.log(x)) .catch(console.error);

  解析：

  Promise.resolve(1)返回1，进入第一个then。

  第一个then抛出错误，跳转到catch，返回1。

  后续then依次执行：1 + 1 = 2 → 输出2。

• 闭包与this指向

  题目：分析以下代码输出：

  var x = 10;function fn() { console.log(x); }function show(f) { var x = 20; (function() { f(); })();}show(fn);

  解析：输出10。闭包fn引用外部变量x，其作用域链指向全局作用域（非show函数作用域），因此访问全局x = 10。

• 原型链与继承

  题目：分析以下代码输出：

  Function.prototype.a = () => alert(1);Object.prototype.b = () => alert(2);function A() {};var a = new A();a.a();a.b();

  解析：

  a.a()：A的原型链未继承Function.prototype，因此a无法访问a()，输出TypeError。

  a.b()：A的原型链通过A.__proto__ === Function.prototype → Function.prototype.__proto__ === Object.prototype，因此a可访问b()，输出2。

• 性能优化

  核心点：

  进程与线程：进程是资源分配单位，线程是执行单元；浏览器多进程架构（如渲染进程、GPU进程）；JS单线程（主线程+Web Worker）。

  事件循环：浏览器事件循环分宏任务（如setTimeout）和微任务（如Promise.then）；Node.js事件循环分多个阶段（如timers、poll）。

  网络缓存：

  强缓存：Expires（HTTP/1.0）、Cache-Control（HTTP/1.1，优先级更高）。

  协商缓存：Last-Modified/If-Modified-Since、ETag/If-None-Match。

  页面渲染流程：DNS解析 → TCP连接 → HTTP请求 → 解析HTML（构建DOM）→ 解析CSS（构建CSSOM）→ 渲染树（Render Tree）→ 布局（Layout）→ 绘制（Paint）→ 合成（Composite）。

• 防抖与节流

  防抖：触发事件后延迟执行，若期间再次触发则重新计时（如搜索框输入）。

  function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, arguments), delay); };}

  节流：固定时间间隔内只执行一次（如滚动事件）。

  function throttle(fn, delay) { let lastTime = 0; return function() { const now = Date.now(); if (now - lastTime >= delay) { fn.apply(this, arguments); lastTime = now; } };}

• 学习规划与技能树

  考察点：技术深度（如框架原理、性能优化）、技术广度（如工程化、跨端开发）、学习能力（如技术博客、开源贡献）。

• 产品改进建议

  示例：百度网盘可优化大文件上传速度（分片上传）、增加离线下载功能、提升移动端体验（如自动备份优化）。

• 团队看法

  核心：强调对团队技术方向（如云存储、前端工程化）的了解，表达合作意愿与长期规划。