百度-文库-校招 on Last Stand

百度-文库-校招 · 第 1 轮 · 一面

Sat, 19 Jul 2025 07:40:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本轮面试侧重于考察候选人的JavaScript基础知识、CSS布局能力、对浏览器工作原理的理解以及实际编码能力。重点在于事件循环、异步编程、闭包、原型链等核心概念，同时也涵盖了跨域、缓存等常见Web问题。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 实现一个三栏布局，左右侧固定200px，中间自适应，写出至少两种方案。追问：Grid布局中fr单位的作用？如何解决Flex布局的浏览器兼容问题？

题目要点

CSS布局能力：面试官想确认你是否熟练掌握现代CSS布局技术，如Flexbox和Grid，以及是否了解传统的布局方法。
布局方案的优劣对比：能否分析不同方案的适用场景和优缺点，体现出技术选型的思考能力。
CSS单位的理解：对fr这类现代布局单位的深入理解，表明你不是只会“复制粘贴”代码。
兼容性处理经验：在实际项目中如何处理浏览器兼容性问题，这是衡量工程师经验的重要指标。

参考答案

1.1 原理说明

三栏布局是前端开发中的经典布局问题，旨在实现一个两侧宽度固定、中间区域宽度自适应的页面结构。核心是处理中间区域如何填满剩余空间。

Flexbox（弹性盒子布局）：是一种一维布局模型，它让容器内的项目（item）能够灵活地分配空间。通过设置父容器display: flex，并为子项设置flex-grow（放大比例）、flex-shrink（缩小比例）和flex-basis（基准大小），可以轻松实现空间的自适应分配。对于三栏布局，可以将中间栏的flex-grow设为1，使其占据所有剩余空间。
Grid（网格布局）：是一种二维布局模型，可以将页面划分为行和列，并在这些行列构成的单元格中放置内容。通过grid-template-columns属性，可以精确定义每一列的宽度，使用fr单位可以非常方便地实现自适应。
fr 单位：fr是 “fractional unit”（分数单位）的缩写，用于Grid布局中。它代表了可用空间的一等份。例如，grid-template-columns: 200px 1fr 200px;意味着第一个和第三个元素宽度为200px，中间的元素占据所有剩余的可用空间。如果是1fr 2fr，则表示两者按1:2的比例分配可用空间。

1.2 核心用法 + 示例代码

方案一：Flexbox 布局这是目前最常用和推荐的方案，代码简洁且语义化。

使用场景：适用于绝大部分现代浏览器项目，尤其是一维方向（行或列）的布局。
注意点：需要注意旧版本浏览器的兼容性问题。

<div class="container-flex">
 <div class="left">左侧固定</div>
 <div class="main">中间自适应</div>
 <div class="right">右侧固定</div>
</div>

<style>
 .container-flex {
 display: flex;
 height: 100vh;
 }
 .left, .right {
 width: 200px;
 background-color: #f0f0f0;
 }
 .main {
 flex: 1; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
 background-color: #e0e0e0;
 }
</style>

方案二：Grid 布局Grid布局在处理二维对齐时更具优势，实现三栏布局同样非常简单。

百度-文库-校招 · 第 1 轮 · 二面

Sat, 19 Jul 2025 07:40:07 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 二面深入考察了前端核心知识的应用和原理理解。重点包括CSS优先级、闭包与内存管理、JavaScript继承的多种实现方式、原型链的深层理解、虚拟DOM的性能优化原理以及Vue框架的高级特性。题目更侧重于“为什么”和“如何实现”，要求候选人不仅知其然，更要知其所以然。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 自我介绍，没有实习过。

题目要点

沟通表达能力：能否清晰、自信地介绍自己。
潜力与热情：在没有实习经历的情况下，如何通过个人项目、技术博客、开源贡献等来证明自己的技术热情和学习能力。
求职动机：为什么选择这个岗位和公司。

参考答案

此题为个人经验总结，请根据自身情况作答。核心是突出自己的优势、学习能力和对前端的热情，用项目经验或学习成果来弥补实习经历的不足。

2. 最终颜色是什么？为什么？

<div class="box" id="content" style="color:red"></div>

.box { color: blue }
#content { color: green }

题目要点

CSS优先级（Specificity）：这是CSS核心概念之一，考察对不同选择器权重的理解和计算能力。
CSS规则来源：是否了解行内样式、内部样式表、外部样式表的优先级关系。

参考答案

1.1 原理说明

CSS的优先级（Specificity），也常被称为特殊性或权重，是浏览器用来决定当多个规则应用到同一个元素上时，哪一条规则生效的计算方法。

优先级的计算规则可以总结为一个四元组 (a, b, c, d)：

a: 行内样式（Inline styles）：如 style="color: red;"。如果存在，a为1，否则为0。
b: ID选择器：如 #content。b为ID选择器的数量。
c: 类选择器、属性选择器、伪类选择器：如 .box, [type="text"], :hover。c为这些选择器的总数量。
d: 标签选择器、伪元素选择器：如 div, ::before。d为这些选择器的总数量。

比较规则：从a开始，逐位比较。a大的胜出；如果a相同，则比较b，b大的胜出；以此类推。只有在优先级完全相同时，才会根据样式在代码中出现的顺序来决定，“后来者居上”。

另外，!important声明拥有最高优先级，它会覆盖任何其他声明，但应避免滥用。

1.2 核心用法 + 示例代码

我们来分析题目中的三个样式规则：

行内样式：style="color:red"
- 优先级计算：a=1, b=0, c=0, d=0 -> (1, 0, 0, 0)
ID选择器：#content { color: green }
- 优先级计算：a=0, b=1, c=0, d=0 -> (0, 1, 0, 0)
类选择器：.box { color: blue }
- 优先级计算：a=0, b=0, c=1, d=0 -> (0, 0, 1, 0)

比较结果：