中级前端面试题

### 中级前端开发常见面试题汇总 以下是针对中级前端开发者的一些常见的面试问题，涵盖了多个领域和技术要点： #### 1. **代码复审（Code Review）** 代码复审是一种通过团队成员之间相互审查代码来提高代码质量和一致性的过程[^1]。其重要性体现在以下几个方面： - 提高代码质量并减少错误率。 - 增强团队协作能力，促进知识共享。 - 发现潜在的设计缺陷或逻辑漏洞。 #### 2. **Vue.js 的 v-if 和 v-show 区别** `v-if` 是惰性的：当初始渲染条件为假时不会执行任何操作，只有在条件首次变为真时才开始渲染相应的 DOM 节点[^2]。而 `v-show` 则始终会渲染节点，并通过 CSS 属性控制显示与否。因此，在频繁切换场景下，`v-show` 更高效；而在动态加载组件或者仅需一次性判断的情况下，`v-if` 更合适。 #### 3. **JavaScript 执行上下文与作用域链** JavaScript 的执行上下文分为全局执行上下文和函数执行上下文两种类型。每当进入一个新的执行环境时都会创建对应的执行上下文，其中包含了变量对象、作用域链以及 this 指针等信息。作用域链用于解析标识符名称，确保能够访问到父级乃至顶层的作用域中的定义项。 #### 4. **事件委托机制** 事件委托利用了冒泡阶段的特点，即子元素触发的事件最终会被传递给祖先元素处理。这样可以有效地减少绑定次数从而优化性能表现。例如在一个列表中添加点击监听器时，可以通过为其容器设置单一处理器实现对所有子项目的响应管理。 #### 5. **React 组件生命周期方法** 对于类组件而言，主要经历三个阶段的关键时刻分别是挂载期(mounting)，更新期(updating) 及卸载期(unmounting)[^3]: - Mounting: constructor(), static getDerivedStateFromProps(), render(), componentDidMount() - Updating: static getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate() - Unmounting: componentWillUnmount() #### 6. **CSS Flexbox 布局原理** Flexbox 是一种一维布局模型，旨在提供更强大的空间分配能力和灵活的内容排列方式。它由两个核心概念组成—主轴(main axis) 和交叉轴(cross axis)—分别决定了项目沿水平方向还是垂直方向分布的方式。常用属性包括 justify-content, align-items 等用来调整内部元素的位置关系。 #### 7. **HTTP 缓存策略** 浏览器缓存主要包括强缓存和协商缓存两大类别。前者依赖于 Cache-Control 或 Expires 头部字段决定资源是否可以直接从本地获取无需再次请求服务器;后者则基于 Last-Modified/ETag 进行版本校验确认是否有新数据可用. ```javascript // 示例代码展示如何配置 HTTP Header 实现长期有效静态文件缓存 app.use((req, res, next) => { res.setHeader('Cache-Control', 'public, max-age=86400'); // 设置一天有效期 next(); }); ``` #### 8. **Webpack 配置基础** 作为现代 JavaScript 应用程序构建工具之一， Webpack 支持模块化打包并将各种类型的资产组合成单个输出包。基本配置涉及入口(entry), 出口(output), loader (负责转换特定格式文件如 SASS -> CSS ) , plugins(扩展功能插件). ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.[contenthash].js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } }; ```