面试题前端

面试题前端涵盖了前端开发中的多个关键知识点，包括HTML/CSS布局、JavaScript编程、数据结构、网络协议、前端框架、状态管理、模块打包、错误处理和源码分析等方面。以下是对这些知识点的详细说明： 1. **CSS布局**： - `span`元素垂直居中：可以使用Flexbox布局，设置`display: flex`和`align-items: center`；或者使用CSS Grid，设置`display: grid`和`align-items: center`；还可以通过绝对定位实现。 2. **算法**： -随机生成不重复数组：可以使用Fisher-Yates (Knuth)洗牌算法，结合`Math.random()`和`splice()`方法。 -排序：使用快速排序、归并排序或其他高效的排序算法。 3. **组件化编程**： - Vue或React组件：需要理解组件的基本结构，如props、state、生命周期方法和事件处理。 4. **移动端布局**： -列表布局：使用Flexbox或Grid布局，配合`flex-wrap`和`align-items`属性。对于省略号不显示，可以使用CSS的`text-overflow: ellipsis`和`overflow: hidden`。 5. **数组处理**： -乱序处理：可以使用`Array.prototype.sort()`配合随机函数，但避免直接使用`arr.sort()`，因为它可能会改变原数组。 6. **后端交互**： -技术：通常涉及API接口设计、HTTP请求、JSON数据格式等。 -原理：理解HTTP请求方法（GET、POST等）和响应状态码。 7. **跨域**： - CORS（Cross-Origin Resource Sharing）是解决跨域的主要方式，理解预检请求（OPTIONS）和Access-Control-*头部。 - HTTP与HTTPS的区别：HTTPS提供了安全加密传输，防止中间人攻击。 8. **前端库和工具**： - `fetch`与`axios`：`fetch`是浏览器内置的API，`axios`是第三方库，提供更丰富的API和错误处理。 - Redux：理解Provider如何注入store，`connect()`函数的参数作用，以及中间件的工作机制。 9. **Promise**： - `catch`与`then`：`catch`用于捕获`then`链中的错误，后续的`.then`可以捕获`catch`抛出的异常。 10. **高阶组件**（HOC）： - HOC是一种函数组件，用于重用组件逻辑，与mixin不同，HOC不会污染组件的组件树，React 16.7以后推荐使用Hooks替代mixin。 11. **网络地址解析**： -使用URL API来解析URL对象，获取各个组成部分。 12. **浅复制与深复制**： -浅复制：`slice()`、`concat()`、`Object.assign()`等方法，仅适用于简单对象和数组。 -深复制：`JSON.parse(JSON.stringify())`（有局限性）、`lodash.cloneDeep()`等。 13. **React源码**： - React组件的渲染基于虚拟DOM和state/props变化检测，当state或props改变时，会触发`shouldComponentUpdate`、`render`等生命周期方法。 14. **Diff算法**： - Diff算法用于高效地找出两个树结构的最小差异，React使用它来决定何时更新DOM。 15. **框架实现**： - Imvc框架的MVVM绑定：通常通过数据监听和发布订阅模式实现双向数据绑定。 16. **浏览器渲染流程**： -从输入URL到页面渲染，涉及DNS解析、TCP连接、HTTP请求、HTML解析、CSSOM构建、渲染树生成、布局计算、绘制等步骤。 -无样式到有样式的过程称为"Flash of Unstyled Content"（FOUC），可通过延迟CSS加载或使用``避免。面试题的深度从基础应用到原理分析，旨在考察开发者对前端全栈的理解和实践经验。熟悉这些知识点，将有助于提升面试表现和实际工作能力。