No166.精选前端面试题，享受每天的挑战和学习

vue3 添加了哪些新特性?

Vue 3引入了许多新特性和改进，以下是Vue 3的一些主要特性：

1. Composition API（组合式API）：Vue 3中引入了Composition API，它是一种新的API风格，使代码组织更加灵活。它允许开发者根据功能逻辑而不是组件层次进行组织，使得代码重用、测试和维护更加容易。
   
2. 更好的TypeScript支持：Vue 3对TypeScript的支持得到了改进，为开发者提供了更好的类型推断和类型检查，增强了开发过程中的可靠性和工具支持。
   
3. 更快的渲染和更新：Vue 3在Virtual DOM层面进行了一些优化，引入了静态树提升和更高效的渲染算法，提供了更快的渲染和更新性能。
   
4. 更小的包大小：Vue 3在体积方面进行了优化，移除了一些不必要的特性和代码，使得最终打包生成的代码更小。
   
5. 更好的 TypeScript 支持: Vue 3在类型推断和类型检查方面对TypeScript进行了改进，提供了更好的开发工具支持和更可靠的类型安全性。
   
6. Fragments（片段）：Vue 3中引入了Fragments，可以通过<template>标签内的多个根元素，而无需使用额外的容器元素。这样可以更灵活地组织模板结构。
   
7. Teleport（传送门）：Vue 3中引入了Teleport，可以将组件的内容放置在DOM结构中的其他位置，这对于用于弹出层或模态框等场景非常有用。
   
8. Suspense（异步占位）：Vue 3中引入了Suspense，允许在异步加载组件时显示一些占位内容，以提高用户体验。
   
9. 更好的Tree-shaking：Vue 3通过重写内部结构，实现了更好的Tree-shaking，可以更有效地清除无用的代码，最大限度地减小打包体积。
   

这些特性和改进使得Vue 3更强大、更高效，并提供了更好的开发体验和可维护性。当迁移到Vue 3时，开发者可以享受这些新特性和改进所带来的好处。

xss 的特点以及如何防范?

跨站脚本攻击（Cross-Site Scripting, XSS）是一种常见的安全漏洞，攻击者通过注入恶意脚本代码到受信任的网页中，使得用户在浏览器中执行这些恶意代码，从而获取用户信息、劫持会话，甚至控制用户浏览器。

跨站脚本攻击的特点包括：

1. 攻击网站的可信任性：攻击利用了受信任网站的漏洞，如输入验证不严格、不正确的输出编码等。
   
2. 客户端执行：XSS攻击是在用户的浏览器上执行的，而不是服务器端执行。攻击者通过注入恶意代码，使浏览器执行该代码并产生攻击效果。
   

为了防范跨站脚本攻击，可以采取以下措施：

1. 输入验证和过滤：对于用户输入的数据，进行严格的验证和过滤。验证用户输入的数据类型、长度、格式等，可以使用白名单机制过滤或移除不安全的字符和标签。
   
2. 输出编码：在将用户输入的数据显示到页面时，使用适当的输出编码，如HTML实体编码、JavaScript编码等，避免浏览器将此数据识别为代码执行。
   
3. 使用安全的上下文环境：根据输出的上下文环境选择合适的编码方式。例如，在HTML标签内容中使用HTML实体编码，在JavaScript中使用JavaScript编码，以确保安全地进行输出。
   
4. 使用HTTP头部设置：使用Content Security Policy (CSP) 和HTTP Only Cookie等安全策略来限制浏览器加载外部资源和保护敏感信息的访问。
   
5. 防御点击劫持：通过设置X-Frame-Options响应头或使用Content Security Policy的frame-ancestors指令来阻止点击劫持攻击。
   
6. 过滤恶意链接：在用户输入中检测并移除恶意链接，并对用户输入的URL进行合法性校验和过滤，防止注入恶意代码。
   
7. 定期更新和安全审计：及时更新应用程序和组件的版本，修复已知的安全漏洞。进行定期的安全审计和漏洞扫描，及时发现并修复潜在的安全问题。
   

综上所述，防范跨站脚本攻击需要在输入验证、输出编码、安全策略设置和安全审计等多个层面进行综合考虑和实施措施，以确保Web应用程序的安全性。

Http 2.0 和 http3.0 对比之前的版本，分别做了哪些改进?

HTTP/2.0和HTTP/3.0（也称为HTTP2和HTTP3）是对HTTP协议的重大改进，它们在性能、效率和安全性方面都有显著的改进。以下是HTTP/2.0和HTTP/3.0相对于之前版本的一些主要改进：

HTTP/2.0的改进：

1. 多路复用（Multiplexing）：HTTP/2引入了多路复用，允许在同一连接上同时发送多个请求和响应。这消除了旧的HTTP/1.1中的串行请求限制，提高了性能和效率。
   
2. 二进制分帧（Binary Framing）：HTTP/2使用二进制分帧，将请求和响应数据分割成更小的帧，可以并行发送和处理，提高了传输的效率。
   
3. 首部压缩（Header Compression）：HTTP/2使用HPACK算法对首部进行压缩，减少了首部的开销，降低了带宽占用。
   
4. 服务器推送（Server Push）：HTTP/2支持服务器可以主动推送与当前请求相关的资源，减少了客户端的请求延迟。
   
5. 流量控制（Flow Control）：HTTP/2引入了流的概念，可以对每个流进行流量控制，避免了传输过程中的拥塞问题。
   

HTTP/3.0的改进：

1. QUIC传输协议：HTTP/3使用了QUIC（Quick UDP Internet Connections）作为传输层协议，取代了过去的TCP+TLS。QUIC基于UDP，在不可靠的网络环境下提供了更好的容错性和速度。
   
2. 连接迁移（Connection Migration）：HTTP/3允许在不中断传输的情况下，将连接从一个IP地址迁移到另一个IP地址，提高了网络连接的稳定性和可靠性。
   
3. 快速握手和加密强化：HTTP/3采用0-RTT（零往返时间）握手机制，减少了握手延迟。同时，HTTP/3对加密进行了优化，提供更好的安全性。
   
4. 报头压缩：HTTP/3使用QPACK算法对请求和响应报头进行压缩，减少了报头传输的开销。
   
5. 解决队头阻塞问题：HTTP/3解决了HTTP/2中的队头阻塞问题，使得一个请求的延迟不会影响其他请求的传输。
   

总的来说，HTTP/2.0和HTTP/3.0的改进致力于提高性能、效率和安全性。HTTP/2.0通过多路复用、二进制分帧和首部压缩等机制来提高传输效率；而HTTP/3.0采用了QUIC传输协议，解决了队头阻塞问题，加快了连接建立和传输速度，同时提供了更好的安全性和稳定性。

下面是使用表格总结HTTP/2.0和HTTP/3.0相对于之前版本的改进的示例：

这个表格列举了HTTP/2.0和HTTP/3.0的一些关键改进，包括多路复用、二进制分帧、首部压缩、服务器推送、流量控制等方面的改进。同时也列出了HTTP/3.0引入的新特性，如QUIC传输协议、连接迁移、快速握手和加密、报头压缩等。这些改进和特性的引入旨在提高传输效率、性能、安全性和稳定性。

Http 3.0 是基于 udp 的，那么它是如何保证传输可靠性的?

HTTP/3.0是基于UDP的传输协议QUIC（Quick UDP Internet Connections），并且在QUIC协议层引入了一系列机制来确保传输的可靠性：

1. 内置的错误纠正和丢包恢复机制：QUIC协议内置了错误纠正和丢包恢复机制，通过向发送端提供丢失的数据以及进行重传，以确保数据的完整性和正确性。
   
2. 快速的拥塞控制机制：QUIC协议在应用层实现了自己的拥塞控制机制，它能够迅速对网络拥塞作出反应，并调整数据传输速率，以避免网络拥塞。
   
3. 多路径和连接迁移：QUIC在协议层支持多路径和连接迁移，这意味着在网络发生变化时（例如切换网络或IP地址变动），可以迁移连接到新的路径或IP地址，从而提供了更好的可靠性。
   
4. 0-RTT握手和快速恢复：QUIC支持0-RTT握手，允许客户端在重新连接时恢复上次的会话状态，避免了握手延迟。此外，QUIC还实现了快速恢复机制，以快速恢复丢失的连接状态。
   
5. 前向纠错：QUIC通过在数据传输时引入冗余信息，可以在接收端纠正少量的丢包或数据错误。这种前向纠错使得即使有部分数据丢失，仍然能够恢复原始数据。
   

总的来说，HTTP/3.0通过QUIC协议在应用层实现了一系列可靠性相关的机制，包括错误纠正、丢包恢复、快速拥塞控制、多路径支持、连接迁移等。这些机制的引入使得HTTP/3.0在使用UDP作为传输层协议时，能够提供与TCP类似甚至更好的传输可靠性。