前端面试题

前端面试题

• 1. CSS3有哪些新特性？
• 2. React合成事件的原理，有什么好处和优势？
• 3.为什么react元素有一个$$type属性？
• 4.说说你对fiber架构的理解？解决了什么问题？
• 5.短轮询、长轮询和 WebSocket 间的区别？
• 6.前端跨域的解决方案？
• 7.数组常用方法及作用，至少15个？

1. CSS3有哪些新特性？

• 选择器的增加：引入了许多选择器，如：兄弟选择器，属性选择器，伪类选择器，伪元素选择器。
• 盒子模型：通过box-sizing属性，可以对盒子模型进行计算方式，包括border-box和context-box。
• 圆角边框：通过border-radius属性，可以添加圆角边框，不必再通过其他手段来进行添加。
• 阴影效果：通过border-shadow属性，可以为元素添加阴影效果。
• 媒体查询：媒体查询可以根据不同的设备，屏幕尺寸和特性来应用不同的样式，实现响应式设计。
• 渐变：CSS3支持线性渐变（linear-gradient）和径向渐变（radial-gradient），使背景颜色和图片渐变变得更加容易。
• 动画和过渡：CSS3引入了@keyframes规则和transition属性，用于创建动画和过渡效果，而不需要JavaScript。

2. React合成事件的原理，有什么好处和优势？

• React合成事件是React框架提供的一种事件处理机制，用于处理DOM事件。合成事件是一种在原生浏览器事件系统之上构建的抽象，它有以下原理、好处和优势：
• 原理：
  1. 事件委托：React利用事件委托的原理，将所有事件监听器挂载到顶层容器（通常是document）上，而不是每个元素上。这样可以减少DOM元素上的事件监听器数量，提高性能。
  2. 事件池：React使用事件池来管理事件对象，这意味着事件对象在事件处理函数执行完毕后会被重用，而不是立即销毁。这减少了垃圾回收的压力，提高了性能。
• 好处和优势:
  1. 性能优化：React合成事件的事件委托和事件池机制有助于减少内存和 性能开销。通过减少事件监听器数量和减少垃圾回收，提高了应用程序的性能。
  2. 跨浏览器兼容性：React合成事件屏蔽了不同浏览器之间的差异，使开发者不必担心浏览器兼容性问题。React会处理不同浏览器的事件差异，以确保一致的行为。
  3. 性能监测和调试：React提供了开发者工具，可以用于监测和调试合成事件。你可以查看事件的详细信息，包括事件类型、事件目标和事件处理函数，以便更容易调试和分析应用程序的行为。

3.为什么react元素有一个$$type属性？

• React元素通常是用React.createElement()或JSX语法创建的，它们是描述虚拟DOM树的轻量对象。React元素对象中的$$type属性是内部React实现的一个私有属性，用于标识元素的类型。这个属性的名称以$$开头，表明它是一个私有属性，不应该被应用程序代码直接访问或修改。
• React使用$$type属性来表示元素的类型，通常是一个字符串，表示HTML元素的标签名（如div、p等）或React组件的类型（如自定义组件）。这有助于React在虚拟DOM的比较过程中快速确定元素的类型，以便进行高效的更新和渲染。
• 应用程序代码通常不需要访问或使用$$type，因为它是React内部的实现细节。开发者应该专注于使用React提供的公共API来创建、更新和渲染元素。
• 在React的官方文档中，$$type属性是私有的，并没有被正式记录在文档中，因此不建议开发者在自己的应用程序代码中使用它。如果你需要获取元素的类型，可以使用type属性或element.type来访问。

4.说说你对fiber架构的理解？解决了什么问题？

Fiber 架构是 React 推出的一种新的架构，主要解决了大型应用或复杂组件树的渲染和更新问题，提高了页面的性能和用户交互体验。具体来说，Fiber 架构有以下几个优点：

1. 异步渲染：Fiber 框架将渲染过程分解成多个小任务，可以在每个任务之间让出主线程，从而实现异步渲染。这样可以提高页面的响应性能，避免页面的卡顿或无响应。
2. 优先级调度：Fiber 框架引入了任务优先级的概念，可以根据任务的优先级来决定任务的执行顺序。这样可以优先处理一些重要的任务，提高用户交互的体验。
3. 增量渲染：Fiber 框架可以将渲染过程分解成多个阶段，每个阶段只处理一部分任务，然后让出主线程。这样可以实现增量渲染，即在每个阶段之间可以更新部分组件，从而提高渲染的效率。
4. 错误边界：Fiber 框架引入了错误边界的概念，可以捕获并处理组件渲染过程中的错误，避免错误导致整个组件树的崩溃。

5.短轮询、长轮询和 WebSocket 间的区别？

短轮询、长轮询，和 WebSocket 是用于实现实时通信的不同技术和协议，它们在工作原理和应用场景上有一些重要区别。

1. 短轮询（Short Polling）：
   o 工作原理：客户端定期向服务器发送HTTP请求，询问是否有新数据可用。
   o 应用场景：适用于需要实时数据更新，但对延迟和网络带宽要求不高的应用。通常会产生频繁的HTTP请求。
   o 优点：简单，适用于大多数浏览器和服务器。不需要特殊的协议支持。
   o 缺点：产生较多的网络流量，可能会导致高延迟。
2. 长轮询（Long Polling）：
   o 工作原理：客户端向服务器发送一个HTTP请求，服务器保持请求打开，直到有新数据可用时才响应，然后客户端会立即发送下一个请求。
   o 应用场景：适用于需要较低延迟但不能支持WebSocket的应用。减少了HTTP请求次数，但仍然会有一些延迟。
   o 优点：较短轮询来说，减少了不必要的HTTP请求。
   o 缺点：服务器需要保持连接打开，浏览器需要等待响应，可能会导致资源占用和连接限制。
3. WebSocket：
   o 工作原理：WebSocket是一种双向通信协议，允许服务器主动向客户端发送数据，而不需要客户端发起请求。通信始终是活跃的连接。
   o 应用场景：适用于需要实时、低延迟通信的应用，如聊天应用、实时游戏等。
   o 优点：实时、低延迟，减少了不必要的HTTP请求。双向通信使服务器可以主动推送数据。
   o 缺点：需要浏览器和服务器支持WebSocket协议，可能需要额外的配置和安全考虑。

6.前端跨域的解决方案？

前端跨域是由于浏览器的同源策略引起的，为了保护用户安全，浏览器会限制不同源（协议、域名、端口不同）之间的资源请求。

1. JSONP（JSON with Padding）：
   o JSONP是一种跨域请求的方法，它通过动态添加 script 标签来获取数据。服务器返回的数据包装在回调函数中，然后在页面中执行该回调函数，以获取数据。
   o 优点：简单易用，可以在不支持CORS的老浏览器上使用。
   o 缺点：不支持POST请求，存在安全风险，只能用于获取数据。
2. CORS（跨域资源共享）：
   o CORS是一种官方的跨域解决方案，需要服务器设置响应头，以允许特定域名的请求。
   o 优点：安全且强大，支持各种HTTP方法，适用于现代浏览器。
   o 缺点：需要服务器端支持，不适用于旧版本浏览器。
3. 代理服务器：
   o 前端可以使用自己的服务器作为代理，将跨域请求发送给自己的服务器，然后由服务器代为向目标服务器请求数据，最后将数据传递给前端。这种方式可以绕过浏览器的同源策略。
   o 优点：适用于所有浏览器，可以处理复杂的跨域请求。
   o 缺点：需要自己的服务器，并且可能会增加服务器负担。
4. JSON Web Tokens（JWT）：
   o JWT是一种用于在不同域之间进行安全身份验证和授权的标准。它可以在不同域之间传递数据，并验证数据的真实性。
   o 优点：安全，适用于身份验证和授权。

7.数组常用方法及作用，至少15个？

1.concat(): 连接两个或更多的数组，并返回结果新数组
2.every(): 检测数值元素的每个元素是否都符合条件
3.filter(): 返回符合条件的数组元素，即过滤掉不符合条件的元素
4.forEach(): 遍历数组中的每个元素并执行回调函数
5.indexOf(): 返回数组中第一个指定元素的索引位置
6.join(): 将所有元素连接成一个字符串
7.lastIndexOf(): 返回数组中最后一个指定元素的索引位置
8.map(): 遍历数组并对每个元素进行操作，最后返回操作后得到的新数组
9.pop(): 删除并返回数组的最后一个元素
10.push(): 向数组末尾添加一个或多个元素
11.reduce(): 对数组中的所有元素执行指定的操作，并将其结果累加到一个单独的值中
12.reverse(): 反转数组中元素的顺序
13.sort(): 对数组中的元素进行排序
14.shift(): 删除并返回数组的第一个元素
15.slice(): 从数组中获取指定范围内的元素