2024前端面试八股文

内容概要：根据最近的面试情况，以及一些小伙伴面试的反馈，以及总结一些文档知识，组合了这篇2024最新前端面试八股文，里面包含了css, js, vue2, vue3, 以及webpack相关的知识。 适合人群：适合具备有一定前端基础，即将找工作或准备跳槽的同学们，也适合工作1-3年的前端开发同学们。 能学到什么：css, js, vue2, vue3, 以及webpack相关的知识和原理，也有些实际工作过程中会遇到的问题，面试中常被问到的面试题，希望对有需要的人有帮助，谢谢！！！！ ### 2024前端面试八股文精要解析 #### CSS部分 1. **display的block、inline和inline-block的区别** - **block**：此类元素会独占一行，这意味着在同一行上不能存在其他的block元素。block元素可以设置宽度（`width`）、高度（`height`）、内外边距（`margin` 和 `padding`）属性。常见的block元素包括`<div>`、`<p>`等。 - **inline**：inline元素不会独占一行，且默认与其他inline元素排在同一行上。无法直接设置宽度和高度，但是可以设置水平方向上的内外边距（`margin` 和 `padding`），垂直方向上的内外边距则无效。常见的inline元素包括`<span>`、`<a>`等。 - **inline-block**：结合了block和inline的特点，元素表现如同inline元素一样不换行，并可以设置宽度和高度等block元素的特性。inline-block元素可以在同一行显示，同时也允许设置垂直方向上的内外边距。例如，使用`display: inline-block;`可以让按钮或图像等元素在同一行对齐。 2. **link和@import的区别** - **link**：这是一个XHTML标签，主要用于引入外部资源，不仅限于CSS文件，还支持如RSS等格式。当页面加载时，link引入的CSS会同步加载。 - **@import**：属于CSS范畴，仅用于引入CSS文件。@import会在页面完全加载后才加载CSS，因此可能导致页面先闪现未样式化的状态。 - **兼容性和控制DOM**：link具有更好的浏览器兼容性，同时可以通过JavaScript控制DOM来改变样式，而@import不具备此功能。 3. **CSS3的新特性** - **新增选择器**：如`:not(.input)`，可以选择所有类不是“input”的节点。 - **圆角**：通过`border-radius`属性轻松创建圆角效果。 - **多列布局**：使用`columns`属性实现流体多列布局。 - **阴影和反射**：利用`box-shadow`属性添加阴影效果。 - **文字特效**：如`text-shadow`属性可以给文本添加阴影效果。 - **文字渲染**：`text-decoration`属性提供更多的文字装饰选项。 - **线性渐变**：使用`linear-gradient`属性创建平滑的渐变效果。 - **变换**：支持旋转（`rotate`）、缩放（`scale`）、定位（`translate`）和倾斜（`skew`）等变换操作。 - **动画**：使用`animation`属性制作复杂的动画效果。 - **多背景**：可以在单个元素上应用多个背景图片。 4. **CSSSprites的理解** - **定义**：CSSSprites是一种将多个小图标或背景图像合并到一张大图中的技术，通过CSS的`background-image`、`background-repeat`和`background-position`属性来实现精准的背景定位。 - **优点** - 减少了HTTP请求的数量，从而显著提高了页面加载速度。 - 通过合并图片可以减少总字节数，进一步提高性能。 - **缺点** - 合并图片时需精确计算位置，可能会导致维护成本增加。 - 当页面尺寸变化时，可能需要调整图片大小以避免断裂。 5. **CSS优化和提高性能的方法** - **加载性能** - 使用CSS压缩工具减少文件体积。 - 采用单一CSS样式来提高执行效率。 - 减少使用`@import`，优先考虑`<link>`标签，确保CSS与页面同时加载。 - **选择器性能** - 确定关键选择器，减少不必要的规则匹配。 - 避免使用通配符（`*`），因为它会导致性能瓶颈。 - 使用ID选择器作为关键选择器时，避免添加额外的标签选择器。 以上内容覆盖了2024前端面试中关于CSS的关键知识点，从基本概念到高级技巧都有涉及，对于即将参加前端面试的同学来说，这些都是必不可少的基础知识。