【CSS面试题】position：sticky不生效原因

<think>好的，用户需要适合有两年工作经验的前端开发者的面试题目。首先，我得确定这个经验阶段的候选人应该掌握哪些技能。两年经验的前端开发者通常已经熟悉基础的前端技术，如HTML、CSS和JavaScript，可能对框架如React或Vue有一定的了解，也接触过项目协作和基本的性能优化。 接下来，我需要考虑不同方面的面试题。通常前端面试包括基础知识、框架应用、项目经验、算法和软技能等部分。根据引用[1]，业务思维和跨领域经验可能也是加分项，所以可以加入相关问题。同时，引用[3]提到团队文化的重要性，因此团队协作和沟通的问题也需涵盖。 基础技术方面，应该涉及HTML语义化、CSS布局、JavaScript核心概念如闭包、事件循环等。框架相关问题可以包括React的生命周期、状态管理，或者Vue的响应式原理。项目经验部分需要考察候选人解决实际问题的能力，比如性能优化策略或跨浏览器兼容性问题。 算法题方面，两年经验的开发者可能需要处理中等难度的算法，比如数组操作或字符串处理，但不需要太复杂的题目。引用[2]提到招聘过程中的压力，所以问题应适中，既能评估能力又不让候选人感到过于困难。 软技能问题可以包括团队合作、代码审查经验，以及如何处理工作中的冲突，这部分参考了引用[3]中提到的团队文化问题。此外，可以加入一些关于学习新技术或自我提升的问题，以了解候选人的成长潜力。 最后，综合所有方面，整理出结构清晰的分类问题，确保覆盖技术深度和广度，同时考察实际应用和团队协作能力。需要确保问题适合两年经验者，既不过于基础也不过于高深，帮助雇主全面评估候选人的能力。</think>### 适合2年前端开发者的面试题目（按模块分类） #### 一、基础技术 1. **HTML/CSS** - 如何实现一个三栏布局（左右固定宽度，中间自适应）？列举至少两种方法（如Flexbox、Grid） - 解释`position: sticky`的应用场景和实现原理[^1] 2. **JavaScript核心** - 以下代码输出结果是什么？解释原因： ```javascript console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4); ``` - 如何用闭包实现一个计数器函数`createCounter()`？要求支持`increment()`, `decrement()`, `getValue()`方法 #### 二、框架与工程化 1. **React/Vue** - （React）解释`useEffect`的依赖数组为空/非空/未传时的区别，并给出清除副作用的示例 - （Vue）描述Vue3的`<script setup>`语法如何简化组件开发，对比Options API的差异 2. **构建工具** - Webpack的Tree Shaking实现需要满足哪些条件？如何验证是否生效？ - 列举三种提升Webpack编译速度的优化手段[^2] #### 三、项目实战 1. **性能优化** - 针对首屏加载速度慢的问题，你会如何系统性地定位和优化？ - 如何实现图片懒加载？是否了解Intersection Observer API的浏览器兼容性解决方案？ 2. **异常监控** - 如何全局捕获前端JavaScript异常？如何处理未捕获的Promise错误？ - 设计一个前端日志上报系统需考虑哪些安全性和性能问题？ #### 四、进阶能力 1. **浏览器原理** - 从输入URL到页面渲染完成，浏览器经历了哪些关键步骤？ - 解释重排（Reflow）和重绘（Repaint）的区别，如何减少它们的发生？ 2. **TypeScript** - 如何定义类型让以下函数同时支持两种调用方式？ ```typescript func({ a: number }); func(number, string); ``` #### 五、协作与架构 1. **代码规范** - 如何在团队中推行ESLint规则？如何处理历史项目中的存量代码风格问题？[^3] 2. **跨端方案** - 对比React Native、Flutter、Taro三个框架的适用场景和技术选型考量因素 ---