2024年1月2日

1.虚拟列表怎么做的，为什么能提高性能

虚拟列表的实现:可见区域的大小和滚动位置，动态计算出需要渲染的列表项。这样可以避免在大列表中渲染过多的DOM元素，从而减少了内存占用和渲染开销。

1. 获取列表项的高度（或平均高度）：这是计算可见区域内列表项数量的基础。可以通过测量一个样本列表项的高度，或者手动指定平均高度。

2. 计算可见区域内的列表项数量：根据可见区域的高度和列表项的高度，计算出可见区域内应该渲染的列表项数量。

3. 监听滚动事件：在滚动容器上添加滚动事件监听器，以便在滚动时更新可见区域的位置。

4. 根据滚动位置计算可见区域的起始索引：根据滚动位置和列表项的高度，计算出可见区域内的起始索引。

5. 根据起始索引和可见项数量渲染列表项：根据起始索引和可见项数量，从数据源中获取对应的列表项数据，并渲染到可见区域内。

提升性能：

1. 减少DOM元素数量：只渲染可见区域内的列表项，减少了DOM元素的数量，从而减少了内存占用和渲染开销。

2. 减少重绘次数：只有在滚动时才需要更新可见区域的内容，减少了不必要的重绘次数，提高了页面的渲染性能。

3. 提前计算和缓存：通过提前计算和缓存列表项的高度和位置信息，可以在滚动时快速确定可见区域的起始索引，减少了计算的开销。

2.加载了很多dom，页面比较卡顿，应该怎么解决

1. 使用虚拟列表：虚拟列表可以只渲染可见区域内的DOM元素，从而减少DOM元素的数量，提高页面的渲染性能。

2. 分页加载：将长列表分成多个页面，每次只加载当前页面的DOM元素。这样可以减少一次性加载大量DOM元素的开销，提高页面的响应速度。

3. 延迟加载：将不可见区域的DOM元素延迟加载，只有当用户滚动到可见区域时才进行加载。这样可以减少一次性加载大量DOM元素的开销，提高页面的响应速度。

4. 使用CSS优化：可以使用CSS来优化DOM元素的渲染性能，如使用CSS3动画代替JavaScript动画、使用CSS3渐变代替图片等。

5. 优化JavaScript代码：可以优化JavaScript代码，减少DOM操作和重绘的次数，如使用文档碎片（DocumentFragment）来批量操作DOM元素、使用CSS类名代替直接操作style属性等。

6. 减少不必要的DOM元素：可以通过减少不必要的DOM元素来提高页面的渲染性能，如使用CSS伪元素代替额外的DOM元素、使用CSS3阴影代替图片等。

3.描述一下文件的切片上传和断点续传是怎么做的

1. 将文件切成多个片段：将要上传的文件切成多个固定大小的片段，每个片段的大小一般为2MB到10MB之间。可以使用File API中的slice()方法来实现。

2. 上传每个片段：将每个片段分别上传到服务器，可以使用XMLHttpRequest或Fetch API来实现。在上传时，需要将每个片段的信息（如文件名、大小、索引等）一并上传到服务器。

3. 服务器合并文件：服务器接收到每个片段后，将它们合并成完整的文件。可以使用Node.js中的fs模块来实现。

4. 断点续传：如果上传过程中出现网络中断或其他问题，可以记录已上传的片段信息，下次上传时从上次中断的地方继续上传。可以使用localStorage或IndexedDB来存储已上传的片段信息。

5. 上传进度显示：可以使用XMLHttpRequest或Fetch API的progress事件来显示上传进度，以便用户了解上传的进度和状态。

4.rbac

RBAC（Role-Based Access Control）是一种基于角色的访问控制机制，用于管理系统中的用户和资源之间的访问权限。RBAC将用户分配到不同的角色中，每个角色拥有一组特定的权限，用户通过角色来访问资源，从而实现对系统资源的控制和管理。

RBAC的核心概念包括：

1. 用户（User）：系统中的实体，需要访问资源。

2. 角色（Role）：一组权限的集合，可以被分配给用户。

3. 权限（Permission）：对资源进行操作的权利。

4. 资源（Resource）：需要被保护的对象，如文件、数据库等。

RBAC的实现步骤包括：

1. 确定角色：根据系统的需求，确定需要哪些角色以及每个角色的权限。

2. 分配角色：将用户分配到不同的角色中，每个用户可以拥有多个角色。

3. 确定权限：为每个角色分配一组权限，可以是对资源的读写、修改、删除等操作。

4. 控制访问：根据用户的角色和权限，控制用户对资源的访问。

RBAC的优点包括：

1. 简化权限管理：通过将用户分配到角色中，可以简化权限管理，减少管理的复杂性。

2. 提高安全性：RBAC可以限制用户对资源的访问，从而提高系统的安全性。

3. 灵活性：RBAC可以根据系统的需求进行灵活配置，可以根据不同的角色和权限来控制用户对资源的访问。

总的来说，RBAC是一种有效的访问控制机制，可以帮助系统管理员管理用户和资源之间的访问权限，提高系统的安全性和管理效率。

5.代码优化，资源压缩，提升项目的性能，怎么实现的

代码优化：

• 使用Vue的组件化开发，将页面拆分成多个组件，提高代码的可维护性和复用性。

• 避免在模板中使用复杂的表达式和计算，尽量将逻辑处理放在组件的方法中。

• 合理使用Vue的计算属性和监听器，避免不必要的计算和渲染。

• 避免在模板中频繁使用v-if和v-for指令，可以通过计算属性或者组件的条件渲染来优化。

资源压缩：

• 使用Webpack或者其他构建工具对项目进行打包，可以自动进行资源压缩，包括JavaScript、CSS、图片等。

• 使用压缩工具对图片进行压缩，减小图片的大小，提高加载速度。

• 对CSS进行压缩和合并，减少HTTP请求的次数。

性能提升：

• 使用懒加载（Lazy Loading）技术，按需加载页面和组件，减少初始加载的资源量。

• 使用路由懒加载，将路由对应的组件按需加载，减少初始加载的资源量。

• 使用Vue的keep-alive组件对频繁切换的组件进行缓存，提高页面的响应速度。

• 使用Vue的异步组件，将一些不需要立即渲染的组件进行异步加载，提高页面的加载速度。

优化网络请求：

• 合理使用缓存，对一些不经常变动的数据进行缓存，减少网络请求。

• 对网络请求进行合并，将多个请求合并成一个，减少请求的次数。

• 使用CDN加速，将静态资源部署到CDN上，加快资源的加载速度。

6.websocket基本的使用方法

WebSocket是一种在Web浏览器和服务器之间进行全双工通信的协议，它允许服务器主动向客户端推送数据，而不需要客户端发起请求。下面是WebSocket的基本使用方法：

1. 创建WebSocket对象： 在JavaScript中，可以使用new WebSocket(url)来创建一个WebSocket对象，其中url是WebSocket服务器的地址。

2. 监听事件： WebSocket对象提供了几个事件用于处理不同的WebSocket状态和消息，常用的事件包括：

• onopen：当WebSocket连接成功建立时触发。

• onmessage：当接收到服务器发送的消息时触发。

• onclose：当WebSocket连接关闭时触发。

• onerror：当发生错误时触发。

通过给这些事件绑定回调函数，可以在不同的状态下执行相应的操作。

1. 发送消息： 使用WebSocket对象的send(data)方法可以向服务器发送消息，其中data是要发送的数据，可以是字符串、Blob对象或ArrayBuffer对象。

2. 接收消息： 当WebSocket接收到服务器发送的消息时，会触发onmessage事件，并将消息作为参数传递给回调函数。可以通过event.data来获取接收到的消息数据。

3. 关闭连接： 使用WebSocket对象的close()方法可以关闭WebSocket连接。也可以在服务器端主动关闭连接。

下面是一个简单的WebSocket示例代码：

// 创建WebSocket对象
var socket = new WebSocket("ws://example.com/socket");
​
// 监听事件
socket.onopen = function() {
 console.log("WebSocket连接已建立");
};
​
socket.onmessage = function(event) {
 console.log("接收到消息：" + event.data);
};
​
socket.onclose = function() {
 console.log("WebSocket连接已关闭");
};
​
socket.onerror = function(error) {
 console.error("WebSocket发生错误：" + error);
};
​
// 发送消息
socket.send("Hello, WebSocket!");
​
// 关闭连接
socket.close();

以上是WebSocket的基本使用方法，可以根据实际需求进行扩展和优化。需要注意的是，WebSocket需要服务器端支持WebSocket协议，以便建立和处理WebSocket连接。

vue中：

1. 安装WebSocket库： 首先，需要安装WebSocket库。可以使用npm或者yarn来安装，例如：

npm install --save vue-native-websocket

1. 导入WebSocket库： 在Vue组件中，导入WebSocket库，例如：

import VueNativeSock from 'vue-native-websocket';

1. 注册WebSocket插件： 在Vue实例中注册WebSocket插件，并配置WebSocket服务器的地址，例如：

Vue.use(VueNativeSock, 'ws://example.com/socket', {
  format: 'json',
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000,
});

在上述代码中，配置了WebSocket服务器的地址为ws://example.com/socket，并设置了一些选项，如数据格式为JSON、开启自动重连等。

1. 监听WebSocket事件： 在Vue组件中，可以通过监听WebSocket事件来处理不同的WebSocket状态和消息，例如：

export default {
  created() {
    this.$options.sockets.onmessage = (event) => {
      console.log('接收到消息：', event.data);
    };
  },
  methods: {
    sendMessage() {
      this.$socket.send('Hello, WebSocket!');
    },
  },
};

在上述代码中，通过this.$options.sockets.onmessage来监听WebSocket的onmessage事件，并在接收到消息时打印消息内容。同时，通过this.$socket.send方法来发送消息到WebSocket服务器。

1. 关闭WebSocket连接： 可以通过this.$socket.close()方法来关闭WebSocket连接，例如：

beforeDestroy() {
  this.$socket.close();
},

在上述代码中，通过beforeDestroy生命周期钩子函数来在组件销毁前关闭WebSocket连接。

以上是在Vue中使用WebSocket的基本步骤。需要注意的是，具体的配置和使用方式可能会根据所使用的WebSocket库而有所不同，可以根据实际情况进行调整和扩展。

7.vue双向绑定原理

vue2

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：

1. 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

2. compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

3. Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是: ① 在自身实例化时往属性订阅器(dep)里面添加自己 ② 自身必须有一个 update()方法 ③ 待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。

4. MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

vue3 响应式原理

Vue3 使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能，其作用为：用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）.相对于 Object.defineProperty() 其有以下特点：Proxy 直接代理整个对象而非对象属性，这样只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性。

Proxy 可以监听数组的变化。