前端面试题 查漏补缺ing！
2023-09-30 15:09:31
前端面试备战攻略：直面常见考点，从容应对
作为一名前端工程师，当我们摩拳擦掌准备跳槽时，面试焦虑期总会如影随形。为了克服这一挑战，全面梳理和掌握面试中常见的知识点至关重要。本文将深入探讨前端面试中常考的领域，包括 webpack、Vue、React、JavaScript 和 CSS，帮助各位前端er查漏补漏，在实战中游刃有余。
webpack 揭秘
打包原理
webpack 是一款模块打包工具，其核心原理是：
- 识别入口文件： 从指定的入口文件开始，解析模块依赖关系。
- 构建依赖图谱： 分析模块之间的依赖顺序，形成依赖关系图谱。
- 确定打包顺序： 根据依赖图谱，确定模块的打包顺序，确保依赖的模块先于被依赖的模块打包。
- 生成输出文件： 按照打包顺序，将模块打包成输出文件，通常是 bundle.js。
常用配置
了解 webpack 的常用配置可以帮助我们更好地控制打包过程：
- entry： 指定入口文件。
- output： 指定输出文件名、路径等。
- module： 指定模块加载规则，如处理不同类型的模块。
- plugins： 扩展 webpack 功能的插件。
优化技巧
优化 webpack 配置可以提升构建速度和减小包体积：
- 代码拆分： 将代码拆分成多个包，按需加载。
- 缓存： 利用 webpack 缓存机制，避免重复编译。
- 压缩： 使用压缩工具减小文件体积。
- Tree Shaking： 去除未使用的代码。
Vue 深入浅出
生命周期
Vue 实例的生命周期包含一系列钩子函数，用于处理组件从创建到销毁的各个阶段：
- beforeCreate： 数据观测和事件配置之前。
- created： 数据和方法可访问后。
- beforeMount： 挂载之前，可操作 DOM。
- mounted： 挂载完成后，DOM 已完全挂载。
- beforeUpdate： 数据更新之前。
- updated： 数据更新后，DOM 已更新。
- beforeDestroy： 实例销毁之前。
- destroyed： 实例销毁后。
指令
Vue 指令用于扩展 HTML 元素的功能，常见指令包括：
- v-model： 双向绑定指令，同步输入框的值和模型数据。
- v-show： 条件性显示指令。
- v-if： 条件性渲染指令。
- v-for： 循环指令。
- v-bind： 属性绑定指令。
React 探索
生命周期
React 组件的生命周期与 Vue 相似，但有细微差别：
- componentWillMount： 挂载之前，可进行初始化操作。
- componentDidMount： 挂载后，可访问 DOM 元素。
- componentWillReceiveProps： 接收到新 props 之前。
- shouldComponentUpdate： 判断是否更新组件。
- componentWillUpdate： 更新之前。
- componentDidUpdate： 更新后，可访问更新后的 DOM 元素。
- componentWillUnmount： 卸载之前，可进行清理操作。
Hooks
Hooks 是 React 16.8 引入的新特性，用于在函数组件中使用状态和生命周期方法：
- useState： 管理组件状态。
- useEffect： 管理副作用，如挂载或更新时执行操作。
- useContext： 访问组件树中的上下文数据。
- useMemo： 缓存经常计算的值。
- useCallback： 缓存回调函数。
JavaScript 基础
数据类型
JavaScript 提供多种数据类型：
- 基本类型： undefined、null、boolean、number、string、symbol、bigint。
- 引用类型： object、array、function。
函数
JavaScript 函数有三种定义方式：
- 函数声明： function funcName() { ... }。
- 函数表达式： const funcName = () => { ... }。
- 箭头函数： const funcName = () => { ... }。
闭包
闭包是指内部函数可以访问外部函数作用域中的变量，从而形成一种封装机制。
CSS 奥秘
布局模式
CSS 中有三种常见的布局模式：
- 块级元素： 占据水平空间，宽度撑满父元素。
- 行内元素： 不占据水平空间，宽度根据内容自适应。
- 行内块元素： 兼具块级元素和行内元素的特性。
定位
CSS 定位属性控制元素在页面中的位置：
- static： 正常文档流中。
- relative： 相对于自身位置。
- absolute： 相对于最近的定位父元素。
- fixed： 相对于浏览器视口。
- sticky： 指定范围内相对于最近的定位父元素，超出范围变为 static。
总结
前端面试中常见知识点纷繁复杂，但通过查漏补漏，掌握核心原理，我们就能提升应对面试的自信心。本文仅提供了冰山一角，深入理解和实践才是成功跳槽的关键。
常见问题解答
- webpack 中 Tree Shaking 的原理是什么？
Tree Shaking 是通过静态分析识别未使用的代码，并将其从打包结果中剔除，从而减小包体积。
- Vue 中 v-model 指令的工作原理是什么？
v-model 指令将输入框的值和模型数据进行双向绑定，即改变输入框的值会同时更新模型数据，反之亦然。
- React 组件的生命周期中哪些阶段可以进行副作用操作？
副作用操作通常在 componentDidMount、componentDidUpdate 和 useEffect 钩子函数中进行。
- JavaScript 中的闭包是如何工作的？
闭包通过将内部函数作为外部函数的返回值，从而使内部函数可以访问外部函数作用域中的变量。
- CSS 中 fixed 定位属性如何影响元素的层叠顺序？
fixed 定位属性将元素从正常文档流中移除，并将其置于所有其他元素之上。
