1. sse是什么，和websockt/https的区别

2. 打字机效果怎么实现的

3. 怎么切片的

4. 怎么上传

5. 为什么用polifill库不用eventsource？

6. EventSourcePolyfill怎么携带token的？

7. token存储在哪里

8. 为什么不能存在localstorage中，会有什么问题

9. token怎么生成的

10. 讲一讲jwt令牌

    JWT（JSON Web Token）是一种开放标准（RFC 7519），用于在各方之间安全传输声明的紧凑、自包含的方式。它是一种轻量级的身份验证和授权机制，被广泛用于跨域身份验证和授权场景。

    JWT由三部分组成，通过点号（.）分隔开：

    1. Header（头部）：包含了描述JWT的元数据和算法信息，如令牌的类型（JWT）和使用的签名算法（例如HMAC SHA256或RSA）。

    2. Payload（负载）：包含了实际的声明，可以是用户身份信息、权限、过期时间等。声明可以是预定义的标准声明（例如iss、exp、sub等），也可以是自定义的声明。

    3. Signature（签名）：使用指定的算法和密钥对Header和Payload进行签名，以确保令牌的完整性和真实性。服务器接收到JWT后，使用相同的密钥和算法进行签名验证。

    4. 轻量级：JWT是基于文本的格式，具有紧凑的结构，使得它适合在网络请求中传输。

    5. 安全性：通过使用签名或加密算法，JWT可以确保令牌在传输过程中不被篡改或伪造。

    6. 跨域支持：由于JWT是通过标准化的格式和算法定义的，它可以在不同域之间安全地传输和使用。

    JWT通常用于身份验证和授权场景，用户在成功登录后，服务器会生成一个JWT并将其返回给客户端。客户端将JWT存储在本地，然后在后续请求中将其作为身份验证凭据发送给服务器。服务器使用密钥对JWT进行验证，并根据其中的声明来授权用户的操作。

11. 为什么用index

12. 为什么用md5

13. 为什么要计算哈希值

14. 你说唯一性，加密，uid不可以吗？（uid页面刷新后会变，哈希值不会；哈希值可以实现秒传）

15. 怎么实现断点续传的

    在重新上传时检查有哪些已经被上传过了文件切片就行。gey请求，携带文件名filename，得到已经上传的切片的索引数组。然后跳过已上传的文件切片，从未上传的切片开始上传就好

    Ai对话：在正常传输过程中，服务器通过分块编码逐段发送 token，并在每个块中包含当前 token 的索引，当客户端检测到连接中断（如超时、网络错误），会使用保存的会话 ID 发起重连请求，并在请求头中指定最后成功接收的 token 索引。

    当连接中断时，客户端会根据 retry 字段指定的毫秒数进行重试。

    重连时，客户端会在请求头中包含 Last-Event-ID 字段，告知服务器最后成功接收的事件 ID。服务器收到包含 Last-Event-ID 的请求后，从该 ID 对应的下一个事件开始继续发送

16. 说一说虚拟滚动

17. 说一说不定高虚拟滚动实现原理

    由于每个列表项的高度不固定，需要在列表项渲染时记录其实际高度，再根据这些高度计算每个列表项的偏移量，进而确定可见区域。

    实现步骤：

    记录高度：在列表项渲染时，记录每个列表项的实际高度。并使用Map结构缓存，避免重复测量。

    计算偏移量：根据已记录的列表项高度，从上到下累加计算每个列表项相对于列表顶部的偏移量。

    确定可见区域：依据滚动位置和容器高度（scrollTop和clienHeight），确定当前可见区域列表项的起始和结束索引。

    渲染可见区域：只渲染可见区域内的列表项，并通过设置偏移量transform: translateY(offsetY)将它们定位到正确的位置。

18. bloburl了解过吗，有什么作用，为什么用这个

    Blob URL 是一种特殊的 URL，它不指向远程服务器上的资源，而是指向浏览器内存中存储的一个二进制大对象（Blob）

    1.以使用BLOB URL创建下载链接

    2.对不支持 HTTP Range Requests（范围请求）（设置Accept-Ranges: bytes），无法设置curTime实现音频拖动。对使用blob url的媒体资源就没有这种限制

    怎么实现的：求配置中设置了 responseType: 'blob'，这会告诉 axios 将响应体直接作为 Blob 对象返回，而不是默认的 JSON 或文本。new Blob([data], {type: 'audio/wav'}) 再次包装这个 Blob。window.URL.createObjectURL(blob)创建连接

19. 组件动态导入是怎么做的

    路由层的懒加载： () => import('...') 是 ES 动态导入语法，Vite 会在构建时将每个动态导入的模块拆分为独立的 chunk（如 Home.xxx.js、User.xxx.js 等），当用户真正访问该路由时，浏览器才异步加载对应 chunk，从而实现“页面模块按需加载”

20. 聊天消息滚动加载怎么做的

21. 了解过单元测试吗，还有其他测试

    单元测试（Unit Testing，简称 UT）是对软件中的最小测试单元进行细致的检查和验证，这是最基础的测试活动。在前端开发中，这些单元可能是一个函数、一个类，或是某个组件。通过断言检查其输出结果

    集成测试（Integration Testing）则是将多个单元根据业务进行整合，并进行全面的测试

    端到端测试

    端到端测试（end-to-end，简称 e2e）则更注重从用户的角度出发，模拟用户对应用程序的访问，确保界面和功能都符合预期

22. Vite分包策略

    Vite使用了一种新的构建方式，称为「原生ESM」构建。它利用浏览器原生支持ES模块的能力，通过将每个模块作为一个单独的文件进行构建，而不是像webpack那样将所有模块打包成一个文件。Vite 会基于代码中的动态导入语句，自动进行分包。例如，使用以下代码时，Vite 会自动将 lodash 库单独打包

    手动配置 Rollup 的 manualChunks

    对于更精细的分包需求，Vite 支持手动配置 manualChunks。通过 manualChunks，开发者可以指定哪些模块应当被打包到单独的 chunk 中。例如，可以将第三方库与业务代码分开打包

    动态导入与懒加载

    动态导入是 Vite 实现分包的核心机制之一。在需要时才加载某些模块，可以显著减少初始加载的文件大小。例如，对于一个大型的管理后台系统，可以按页面模块进行分包，每次用户访问页面时，才加载对应的模块。

    webpack则是使用传统的「Bundler」构建方式，它将所有模块打包成一个或多个bundle文件，并使用代码分割和懒加载等技术来优化加载性能。

    分包策略应用场景

    对于后台管理系统，通常有大量的模块和功能。通过分包策略，可以将每个模块的代码独立打包，在用户需要时按需加载。例如，将用户管理模块、商品管理模块分别打包成独立的 chunk

23. CDN的原理有了解过吗

工作原理: C通过将内容复制到分布在全球各地的边缘节点（也称为缓存节点）来提供快速的内容传输。当用户请求访问某个资源时，CDN 会根据用户的位置，将资源从离用户最近的边缘节点返回，而不是从原始服务器返回。这样可以减少网络延迟和带宽消耗，提高内容的加载速度和可用性

边缘节点: 边缘节点是构成 CDN 网络的服务器，位于不同的地理位置，分布在全球各地。边缘节点存储缓存的内容，并直接与用户进行交互

缓存机制: CDN 的关键功能之一是缓存。边缘节点会缓存静态资源（如图片、CSS 文件、JavaScript 文件等），以便更快地响应用户请求。当用户请求访问某个资源时，CDN 首先检查边缘节点中是否已经缓存了该资源。如果有缓存，边缘节点直接返回缓存的资源；如果没有缓存，边缘节点会从源服务器获取资源，并将其缓存起来，以便后续的请求

安全性: CDN 提供了一些安全功能，如 DDoS（分布式拒绝服务攻击）防护

1. 为什么用fcp作为性能指标，不用其他的

   LCP(Largest Contentful Paint)	计算网页可视范围内最大的内容元件需花多少时间载入

   fcp为渲染首个可见内容的时间，用户看到比较直观；适用于SSR（服务器端渲染）网站的首屏性能监控

2. 怎么判断一个任务是否耗时？

3. settimeout的使用场景，里面可以再套settimeout吗

4. 内存泄漏的场景

5. treeshaking讲一讲

6. npmyarnpnpm区别

7. 幽灵依赖是啥，怎么解决幽灵依赖的

8. 组件库样式覆盖怎么实现的

9. 按需引入和全量引入怎么实现的

10. 什么时候可以全量引入

    将所有组件打包为单一模块，通过 app.use(Varlet) 完成全局注册

    本质是空间换时间——牺牲网络传输和内存占用换取开发便捷性，适合快速原型开发或组件使用密度极高的场景。

    混合引入方案

    对于核心组件（如 Button、Cell）采用全局引入，非常用组件按需引入

什么是跨域？

跨域（Cross-Origin）是指浏览器出于安全考虑，限制网页脚本访问不同源（协议、域名或端口）的资源的现象，由浏览器的同源策略（Same-Origin Policy）引发，旨在防止恶意攻击和数据泄露。‌‌1‌‌2

‌定义与核心概念‌

跨域是浏览器安全机制的核心表现，指当一个网页的脚本（如JavaScript）尝试请求另一个不同源的资源时，浏览器会阻止该交互。这里的“源”由协议、域名和端口三部分组成：如果两个URL的协议、域名或端口任意一项不同，即视为不同源，从而触发跨域限制。例如：‌

• 协议不同：http://example.com 请求 https://example.com。
• 域名不同：example.com 请求 api.example.com。
• 端口不同：example.com:8080 请求 example.com:3000。‌‌2‌‌4

‌产生原因‌

跨域问题源于浏览器的同源策略，该策略是Web安全的基础，主要目的包括：

1. ‌安全防护‌：防止恶意网站通过脚本窃取用户敏感信息（如Cookie、登录凭证）或发起跨站请求伪造（CSRF）攻击。‌‌1‌‌2
2. ‌浏览器实现‌：浏览器作为执行环境，强制实施同源策略以隔离不同源的资源，即使服务器允许访问，浏览器也会拦截响应。‌‌1‌‌5
3. ‌Web应用复杂性‌：现代Web应用常需整合多个后端服务（如API），导致跨域请求需求增加，但默认策略限制了这种交互。‌‌1‌‌4

‌常见解决方案‌

解决跨域需通过技术手段绕过或放宽同源策略，主要方法包括：

1. ‌CORS（跨域资源共享‌：W3C标准方案，服务器通过设置响应头（如Access-Control-Allow-Origin）明确允许跨域请求，支持所有HTTP方法且安全性高。‌‌1‌‌4
2. ‌JSONP‌：利用<script>标签无跨域限制的特性，动态加载脚本并回调数据，但仅支持GET请求且存在安全风险。‌‌1‌‌4
3. ‌代理服务器‌：客户端请求发送至同源代理服务器，由代理转发至目标服务器并返回结果，避免浏览器直接跨域请求。‌‌1‌‌6
4. ‌Nginx反向代理‌：通过配置Nginx将跨域URL映射到同源路径，实现透明转发。‌‌4‌‌6
5. ‌其他方法‌：如window.postMessage用于跨文档通信，或设置document.domain共享Cookie（仅限主域相同场景）。‌‌

Bearer

Token前缀使用"Bearer"源于OAuth 2.0认证框架的规范要求，主要用于标识令牌类型和安全模型。以下是具体原因：

规范要求

Bearer是OAuth 2.0框架中定义的认证方案（RFC 6750标准），用于标识令牌的传输方式和验证方式。在HTTP请求头中添加"Bearer"前缀，可帮助服务器快速识别使用的认证方式为无状态令牌验证（无需存储会话状态）。 ‌12

安全模型

"Bearer"代表"持有者"，意味着任何持有该令牌的实体均可代表用户身份进行授权。这种设计简化了客户端实现，但存在安全隐患：

1. ‌无状态性‌：每次请求需携带完整令牌，服务器不依赖会话存储；
2. ‌风险‌：若令牌泄露，攻击者可直接滥用；

clienHeight和innerHeight的区别

• ‌clientHeight‌：指元素内部高度（包含内边距但不包含边框、外边距及滚动条），通常用于DOM元素尺寸计算。 ‌12
• ‌innerHeight‌：指浏览器可视区域的高度（包含滚动条），主要用于窗口尺寸测量。