2024前端面试八股文

上传者: 48420104 | 上传时间: 2024-10-12 10:37:32 | 文件大小: 3.38MB | 文件类型: PDF
内容概要:根据最近的面试情况,以及一些小伙伴面试的反馈,以及总结一些文档知识,组合了这篇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元素包括`
`、`

`等。 - **inline**:inline元素不会独占一行,且默认与其他inline元素排在同一行上。无法直接设置宽度和高度,但是可以设置水平方向上的内外边距(`margin` 和 `padding`),垂直方向上的内外边距则无效。常见的inline元素包括``、``等。 - **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`,优先考虑``标签,确保CSS与页面同时加载。 - **选择器性能** - 确定关键选择器,减少不必要的规则匹配。 - 避免使用通配符(`*`),因为它会导致性能瓶颈。 - 使用ID选择器作为关键选择器时,避免添加额外的标签选择器。 以上内容覆盖了2024前端面试中关于CSS的关键知识点,从基本概念到高级技巧都有涉及,对于即将参加前端面试的同学来说,这些都是必不可少的基础知识。

文件下载

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明