百度-文库-校招

← 已是第一轮 · 返回本次面经 · 第 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 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 二面深入考察了前端核心知识的应用和原理理解。重点包括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) 比较结果： ...