哪些操作会造成内存泄漏？
意外的全局变量 被遗忘的计时器或回调函数 脱离 DOM 的引用 闭包
内存泄漏指的是应用程序中已不再使用的内存没有被正确释放，导致内存持续增长，最终可能耗尽系统的可用内存。以下是一些常见的操作和原因，可能导致内存泄漏的情况：
- 无限制的对象引用：存在对象之间的相互引用，而这些对象中至少有一个是不再需要的。由于相互引用导致垃圾回收器无法自动回收这些对象，从而造成内存泄漏。
- 垃圾回收器的问题：如果程序中存在垃圾回收器的bug或者配置不当，可能导致未能正确回收不再使用的内存。
- 未释放的资源：应用程序中使用了一些需要手动释放的资源，如打开文件、数据库连接、网络连接等，如果在不再使用时未显式释放这些资源，就会导致内存泄漏。
- 定时器和回调函数：在使用定时器或回调函数时，没有正确处理取消或清理操作，导致持有对应用程序其他部分的引用，从而导致内存泄漏。
- 大对象和缓存：在使用大量大对象或缓存时，如果没有及时清理或管理这些对象，可能导致内存泄漏。
- 循环引用的事件监听器：如果对象注册了事件监听器，而这些监听器又引用了该对象，就会形成循环引用。即使对象已经不再使用，但由于事件监听器的存在仍然被引用，从而导致内存泄漏。
- 不正确的数据结构使用：使用不当的数据结构或算法，可能导致内存泄漏。例如，使用不合适的缓存策略或遗忘了从缓存中删除不再需要的数据。
避免内存泄漏的关键在于仔细设计和编写应用程序，确保及时释放不再使用的资源和对象，并遵循最佳的内存管理实践。使用合适的工具和进行严格的代码审查也可以帮助发现和解决潜在的内存泄漏问题。
移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？
移动端点击有 300ms 的延迟是因为移动端会有双击缩放的这个操作，因此浏览器在 click 之后要等待300ms，看用户有没有下一次点击，来判断这次操作是不是双击。
1.通过 meta 标签禁用网页的缩放。
2.通过 meta 标签将网页的 viewport 设置为 ideal viewport。
3.调用一些 js 库，比如 FastClick
移动端的点击事件延迟通常是由于浏览器的触摸事件处理机制所导致的。传统的触摸事件处理流程包含多个阶段（手指接触屏幕、手指移动、手指离开屏幕），浏览器需要等待一段时间以判断用户的操作是否为点击或滑动等，这就导致了点击事件延迟的出现。
延迟的时间在不同的移动设备和浏览器上可能会有所不同，一般范围在100至300毫秒之间。
为了解决移动端点击事件延迟，可以采取以下几种方式：
- 使用FastClick等库：FastClick是一种常用的解决方案，它通过消除点击事件的延迟来提供更快的响应速度。该库会通过在触发点击事件时模拟一个真实的点击来代替浏览器的默认行为。
- 使用Touch Events代替Click Events：触摸事件（Touch Events）通常比点击事件（Click Events）具有更快的响应速度。可以考虑使用touchstart、touchend等触摸事件来替代click事件，以提供更快的交互响应。
- CSS样式优化：当用户点击某个元素时，添加CSS样式的反馈，如高亮、缩放等，可以增加用户对点击的感知，减轻延迟的影响。
- 避免使用click事件监听短时间内的连续点击：在移动端，快速点击同一元素可能会引发延迟问题。可以使用节流或防抖等技术，将短时间内的连续点击合并为一个点击事件进行处理，避免频繁触发事件导致延迟感。
- 使用原生HTML元素：在某些情况下，使用原生的HTML元素（如按钮）会比使用自定义的元素（如div）拥有更快的响应速度，因为原生元素已经经过了优化和适配。
综合考虑以上解决方案，可以根据具体需求和场景选择合适的方法来减少移动端点击事件的延迟，提升用户体验。
tips:click 延时问题还可能引起点击穿透的问题，就是如果我们在一个元素上注册了 touchStart
的监听事件，这个事件会将这个元素隐藏掉，我们发现当这个元素隐藏后，触发了这个元素下的一个元素的点击事件，这就是点击穿透。
Vue3.0是如何实现代码逻辑复用的？
Vue 3.0引入了一种新的特性，即Composition API（组合式API），以实现代码逻辑的复用。
Composition API是一种基于函数的API，它允许开发者根据逻辑相关性将代码组织为可复用的逻辑块。
在Vue 3.0中，使用Composition API可以更灵活地组织代码，避免了之前版本中使用大型组件和混入的复杂性。
下面是Composition API的一些特性和用法：
- 通过
setup()函数来组织逻辑：在Vue 3组件中，可以使用setup()函数来定义逻辑代码。这个函数在组件实例化之前执行，并且可以返回一个对象，这个对象中的属性和方法可以在模板中使用。 - 使用
ref和reactive：Composition API提供了ref和reactive函数，用于创建响应式数据。ref可以将基本类型的数据包装为响应式对象，而reactive可以将对象包装为响应式对象。 - 使用
computed：computed函数可以创建计算属性，用于根据其他响应式数据计算出新的值。 - 使用
watch：watch函数可以监听响应式数据的变化，并在数据变化时执行相应的操作。 - 使用
provide和inject：provide和inject可以实现跨层级组件的数据传递，使得逻辑可以在组件之间共享。 - 使用
onMounted和onUnmounted：这两个函数可以在组件挂载和卸载时执行相应的操作，可以用于处理生命周期相关的逻辑。
通过以上这些特性，Vue 3.0的Composition API可以更好地实现代码逻辑的复用。开发者可以根据需要自由组织代码，将相关的逻辑封装为可复用的函数或组合函数。这样可以提高代码的可读性和维护性，并且更好地实现功能模块的复用。
讲一讲强缓存和协议缓存？
强缓存和协议缓存是Web开发中常用的两种缓存机制，用于优化网络请求，减少服务器负载和提高用户体验。
- 强缓存（强制缓存）：
强缓存指通过设置HTTP响应头信息来告诉浏览器，在一定时间内直接使用本地缓存，而不需要发送请求到服务器。常用的HTTP响应头有两个字段来控制强缓存：Expires和Cache-Control。
Expires：指定缓存资源的过期时间，是一个绝对时间点。当浏览器请求的资源的过期时间大于本地时间时，浏览器会直接使用本地缓存，不会发送请求到服务器。Cache-Control：是一个相对时间，通过该字段可以设置缓存资源的最大有效时间。常用的值有：
public：表明响应可以被任何对象（包括代理服务器）缓存。private：表明响应只能被单个用户（使用该资源的浏览器）缓存。max-age=：设置缓存资源的最大有效时间，单位是秒。
- 协议缓存（协商缓存）：
如果资源的强缓存已过期或未设置，浏览器会发送请求到服务器验证是否可以使用本地缓存。这个过程称为协议缓存，它通过比较请求头和服务器响应头来确定是否使用本地缓存。
If-Modified-Since：当浏览器发送请求时，会在请求头中加上该字段，值为上次请求该资源时服务器返回的Last-Modified字段的值。服务器收到请求后，可以根据这个字段判断资源是否发生改变。如果资源未发生改变，服务器返回状态码304（Not Modified），告诉浏览器可以使用本地缓存。If-None-Match：该字段使用实体标签（ETag）来判断资源的更新状态。浏览器发送请求时，会在请求头中加上这个字段，值为上次请求该资源时服务器返回的ETag值。服务器可以根据ETag值来判断资源是否发生改变，如果未发生改变，返回304状态码。
强缓存和协议缓存可以结合使用，当浏览器开启了强缓存，则直接使用本地缓存，不会发送请求到服务器。如果强缓存未命中，则浏览器发送请求到服务器，通过协议缓存验证是否可以使用本地缓存。如果服务器返回304状态码，则说明资源未发生改变，可以使用本地缓存。
通过合理地使用强缓存和协议缓存，可以减少不必要的请求和服务器负载，从而提高页面加载速度和用户体验。
